Eerder deze week ben ik begonnen met het bouwen van een nieuwe website voor een klant. Het ging om een relatief kleine website met een beperkt aantal pagina’s en functionaliteiten. Een CMS was niet gewenst en dus leek me dit een goed moment om deze website vanaf scratch op te bouwen. De vraag die dan onmiddellijk rijst is: “Gaan we dit echt helemaal vanaf nul opbouwen of beginnen we met een framework?”

HTML5 Boilerplate

Dit keer heb ik gekozen om te starten vanaf de HTML5 Boilerplate. Een vederlicht pakket waarmee je je over een aantal zaken niet meer hoeft druk te maken. Het template is uiteraard geschreven in HTML5 (what’s in a name?) en gebruikt normalize.css om alvast wat verschillen tussen browsers te verhelpen. Verder wordt de modernizr bibliotheek gebruikt. Deze laatste is bijvoorbeeld handig omdat mijn media queries dan ook direct werken voor IE. Daarnaast voegt modernizr de HTML5shim (of shiv) toe waardoor ook IE de HTML5 tags herkent die we stijlen via CSS.

Hoewel de HTML5 Boilerplate als een heel pakket komt, dat wil zeggen met een aantal files in de root en folders voor bijvoorbeeld je javascript, CSS etc, is het toch een minimaal pakket. Ik heb de documentatie en readme eraf gegooid en hield een overzichtelijke folder met bestanden over.

Het gebruik van de rem eenheid

Een andere noviteit waar ik mee aan de slag wilde gaan is de rem metriek. Rem staat voor root-em en is dus gekoppeld aan em. Jonathan Snook schreef hier al over in font sizing with rem en ook op CSS Tricks is er aandacht aan besteed. De bottom line is, je kunt de rem definieren op de body en vervolgens alle font-sizes (maar dus ook andere grootheden zoals marges, paddings, breedtes en hoogtes) relatief kiezen ten opzichte van deze standaard (base) unit. Maar nu komt het listige van de rem: deze wordt niet ondersteund door javascript. Dus binnen javascript zal je jouw rem waardes weer moeten terugzetten naar pixels. En wat ook een heel leuke is: ook IE ondersteund ze niet. Dus ik had heel consistent ook mijn breakpoints (voor in het responsive design) in rem eenheden gezet en wat bleek: de mediaqueries werkten niet goed in IE.

Lesson learned

• Voor eenvoudige websites die je vanaf scratch wilt opbouwen is de HTML5 Boilerplate echt een goed uitgangspunt
• Het gebruik van rem eenheden in je CSS is gemakkelijker en ook logischer dan em eenheden
• Te consistent gebruik van rem eenheden geeft problemen: Javascript en IE ondersteunen het (nog) niet