Skip to content

Latest commit

 

History

History
62 lines (35 loc) · 2.92 KB

INSTRUCTIONS.md

File metadata and controls

62 lines (35 loc) · 2.92 KB
Raw

CSS Custom Properties

Pas custom properties toe en breng structuur aan in een CSS file.

Context

Deze deeltaak hoort bij sprint 4 Look and Feel. Dit is een deeltaak die je individueel uitvoert.

In de Workshop "CSS voor Styleguides" wordt uitgelegd hoe je Custom Properties en andere methoden kan gebruiken om gestructureerde CSS te coderen.

Deze deeltaak hoort bij de leertaak:

Doel van deze opdracht

Je leert wat custom properties zijn en hoe je ze kan gebruiken voor slimme, consistente en beter gestructureerde CSS.

Werkwijze

Deze opdracht gaat over de analyse- en ontwerp/bouwfase van de DLC.

Je hebt een eerste opzet van de Living Styleguide gemaakt en nu ga je een gestructureerd CSS file maken met custom properties, structuur en conventies.

Analyseren

Bekijk welke elementen uit de living styleguide in CSS geschreven kunnen worden met custom properties. Denk bijvoorbeeld aan kleuren, font-sizes, borders, breedtes en/of hoogtes van elementen. Als waardes vaker voorkomen, kun je custom properties gebruiken.

Ontwerpen/bouwen

Fork deze deeltaak.

Maak voor een aantal huisstijl elementen de HTML en CSS. Structureer de CSS met custom properties, pas een goede structuur toe en gebruik conventies zoals DRY, leesbaarheid van de code en naamgeving.

Teken zo nodig een breakdown-schets om duidelijk te krijgen wat je gaat coderen. Teken de elementen die je gaat maken, maak aantekeningen voor de HTML, de CSS en welke Custom properties je gaat toepassen. Gebruik de Living Styleguide met code voorbeelden...

Beschrijf in de wiki van de leertaak welke structuur jij toepast in jouw CSS bestand; leg de custom properties uit die je hebt gebruikt en welke principes je hebt toegpast om de CSS te structureren.

Voor gevorderden

Als je al vaker met custom properties hebt gewerkt, lees dan het artikel A complet guide to Custom Properties en probeer verschillende technieken en ideeën toe te passen, zoals:

  • Dark mode
  • Custom properties en Media queries
  • Custom properties en JavaScript
  • ...

Bronnen

Definition of done

Deze opdracht is done als:

  • je hebt custom properties gebruikt en in de wiki uitgelegd hoe jouw code werkt
  • je hebt een duidelijke structuur toegepast in jouw CSS bestand(en) en dit gedocumenteerd in de wiki