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

Component Footer: Anouk

Components Carousel: Arexan

Component Formulier: Fatih