3. Bouwen

Atomic Design

• Aller eerst zijn we een nieuw project gaan opzetten met een nieuw jasje van de Atomic-design methode. Hier hebben we al onze componenten in drie categorieën verdeeld.

1. Atoms

Het basiselement van een Atomic design is een atoom. Atomen zijn de kleinst mogelijke elementen op een pagina, zoals een formulierveld, een veld label of een button.

2. Molecules

Moleculen zijn groepen van atomen die samen een functie kunnen vervullen. Zo kunnen de drie atomen die we als als vorig voorbeeld gebruikte gecombineerd worden tot een zoekveld. De context van het molecuul bepaalt hoe de atomen gaan functioneren.

3. Organisms

Organismen zijn groepen van moleculen die samen een onderdeel van een pagina vormen. Ons zoekveld van het vorige voorbeeld kan samen met andere moleculen een onderdeel worden van een header organisme. Andere moleculen binnen dit organisme zijn bijvoorbeeld een navigatiebalk. Onder een organisme kan ook een atoom vallen, als deze op zichzelf functioneert.

• Vervolgens hebben we alle componenten in stukjes verdeeld.

Component Libary

• De libary heb ik opgezet doormiddel een index.js bestand aan te maken en hierin alles op te slaan wat we gebruiken aan componentjes.

Component Header: Jalal

• Ik ben bezig geweest met het bouwen van de Header-Component. Ik ben begonnen met eerst de Organism-Header te bouwen. Voor mijn component heb ik nog goede feedback ontvangen van Krijn tijdens mijn checkpoint en later ook van Maikel. Ik heb mijn best gedaan om dit ook toe te passen.

• Feedback:

1. Progressive enhancement: Hamburger-menu werkte niet zonder javascript. (Opgelost door alleen CSS te gebruiken).
2. Responsiveness: Was nog niet op desktop af. (Opgelost voor alle schermen).
3. Toegankelijkheid: Op mijn hamburger zat geen aria-label beschreven wat het is. (Opgelost met een duidelijke verwijzing)

    <input class="menu-btn" type="checkbox" id="menu-btn" aria-label="Navigation menu" />

<script>
    import { HeaderNav } from '$lib/index.js'
</script>

<header>
    <HeaderNav />
</header>

• Hier heb ik de Molecule-Nav ingeladen, hierin ben ik de Navigatie gaan opzetten van onze website.

    <ul>
        <li>
            <NavLink href="/about" title="About"></NavLink>
        </li>
        <li>
            <NavLink href="/promise" title="Promise"></NavLink>
        </li>
        <li>
            <BtnPrimary href="/becomeSponsor" title="Become sponsor"></BtnPrimary>
        </li>
    </ul>

• De navigatie lijst ben ik ook gaan opzetten met kleinere Atoms die ik Navlinks heb genoemd. Doormiddel van export let href, title kon ik deze aanpassen en hergebruiken.

<script>
	export let href, title;
</script>

  <a class="nav-link" {href}>{title}</a>

Resultaat

Component Stats: Suus

Ik heb eerst een @properties gebruikt om de initial value op 0 te zetten voor de animatie.

@property --nr358 {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
    }

Met keyframes heb ik de counter op laten lopen

  @keyframes nr358Animation {
        to {
            --nr358: 358;
        }
    }

Component Footer: Anouk

Components Carousel: Arexan

IK heb gebruik gemaakt van het Atomic Design-principe. Door de code op te splitsen in kleinere stukken, zoals atoms, molecules en organisms, en deze via importeren op te halen, kon ik een efficiëntere en kortere code realiseren. Dit maakte het mogelijk om elementen in verschillende componenten opnieuw te gebruiken. Dit is een goed bewijslast omdat het laat zien dat ik op een nieuwe manier code heb geschreven. Door Atomic Design te gebruiken en de code in kleine stukjes te verdelen, kon ik efficiënter werken. has context menu

<carrousel>
 
    <section class="carrousel">
      <h2>Stay up to date</h2>
    <CarrouselText>
    <CarrouselImageOne />
    </CarrouselText>
  
    
    <CarrouselText>
    <CarrouselImageTwo />
    </CarrouselText>
   

    <CarrouselText>
    <CarrouselImageThree />
    </CarrouselText>

    <CarrouselText>
    <CarrouselImageOne />
    </CarrouselText>

    <CarrouselButtonPrevious />
    <CarrouselButtonNext />

   
  </section>
</carrousel>

// ========== Atoms ==========

export { default as Button } from "./atoms/Button.svelte";
export { default as CarrouselButtonPrevious } from "./atoms/CarrouselButtonPrevious.svelte";
export { default as CarrouselButtonNext } from "./atoms/CarrouselButtonNext.svelte";
export { default as CarrouselSlide } from "./atoms/CarrouselSlide.svelte";
// ========== Molecules ==========

export { default as HeaderNav } from "./molecules/HeaderNav.svelte";
export { default as Stats } from "./molecules/Stats.svelte";
export { default as CarrouselImageOne } from './molecules/CarrouselImageOne.svelte'
export { default as CarrouselImageTwo } from './molecules/CarrouselImageTwo.svelte'
export { default as CarrouselImageThree } from './molecules/CarrouselImageThree.svelte'
export { default as CarrouselText } from './molecules/CarrouselText.svelte'


// ========== Organisms ==========

export { default as Header } from "./organisms/Header.svelte";
export { default as Carrousel } from "./organisms/Carrousel.svelte";
export { default as MainHead } from "./organisms/MainHead.svelte";

<script>
    import { Header, Stats, MainHead, Carrousel, Footer } from "../lib/index.js";
</script>

<svelte:head>
    <title>INK</title>
</svelte:head>

<Header />

<Stats />

<Carrousel />

<MainHead />

<Footer />

Component Formulier: Fatih

• Ik ben bezig geweest met het bouwen van de Sponsor-page. Ik ben begonnen met alles te verdelen en daarna in code overtezetten. Voor mijn component heb ik nog goede feedback ontvangen van Joost tijdens mijn checkpoint en later ook een expertreview. Ik heb mijn best gedaan om dit ook toe te passen.

• Feedback:

1. Progressive enhancement: moest nog kijken waar ik PE op kan toepassen
2. Responsiveness: Was niet mobile friendly. Opgelost met een paar media queries.
3. Toegankelijkheid: Wegens het veranderen van een button naar een label doormiddel van een checkbox hack kan ik nu wel de pop up open zonder JS maar niet doormiddel van tab. Ik moet nu zoeken hoe ik dit kan oplossen.

Dit is hoe uiteindelijk na alles verdelen me pagina der uit ziet.

<script>
    import Header from "$lib/components/Header.svelte";
    import Footer from "$lib/components/Footer.svelte";
    import DonationForm from "$lib/components/DonationForm.svelte";
   </script>
   
   <Header />
   
   <main>
    <DonationForm />
   </main>
   
   <Footer />