Van framework naar custom markup en CSS

Onze eigen website hebben we onder de motorkap eens goed opgefrist. We hebben afscheid genomen van het Foundation framework en hebben alles vervangen door eigen markup en gebruik gemaakt van de laatste CSS mogelijkheden, namelijk CSS Grid.

Waarom custom in plaats van een framework

Tijdens WordCamp Rotterdam bezocht ik de talk van Luc Prinsen met als titel ‘Ditch your framework’. Luc had het in zijn talk over de nadelen die een framework zoals Bootstrap of Foundation heeft. Nadelen zijn bijvoorbeeld de opmaak van je markup die vol zit met allerlei div’s en nietzeggende classes. Een ander nadeel van een framework is de hoeveelheid CSS en JavaScript die een framework bevat. Gelukkig kan je met behulp van moderne CSS zoals Flexbox en Grid op een makkelijke manier layouts maken die hetzelfde bereiken als een framework, maar dan zonder de bijbehorende nadelen.

Onze eigen site was ook gebouwd op basis van een framework, we gebruikten hiervoor Foundation. Het voordeel van het gebruik van een framework is dat je hiermee snel layouts kan maken en dat het framework (over het algemeen) goed getest is en goed werkt in verschillende browsers. Door verschillende classes van het framework mee te geven is je site ook gelijk voorzien van een layout voor tablets en smartphones.

Dit werkt in principe goed alleen is de markup die je hiervoor moet gebruiken verre van semantisch. Luc had me overtuigd dat dit anders kon dus werd het tijd om de bezem door mijn eigen code te halen. Alleen hoe heb ik dat aangepakt?

Schonere markup

Om te beginnen heb ik alle markup die we gebruikten ontdaan van alle Foundation div’s en classes. Als voorbeeld hiervoor gebruik in het nieuws blok op onze homepage. Dit is een content blok dat bestaat uit drie kolommen voor desktop, twee kolommen voor tablet en een kolom voor smartphone. Om dit met Foundation voor elkaar te krijgen gebruik je deze markup:

Markup met Foundation

Na het opschonen en verwijderen van alle Foundation markup blijft er dit over:

Doordat we geen Foundation classes meer gebruiken moet je zelf je eigen grid maken. Gelukkig kan dat heel eenvoudig door gebruik te maken van CSS Grid.

Basis CSS Grid

Met deze twee regels geven we de container een display: grid; mee waardoor alle children in deze container gelijk verdeeld worden in drie gelijke kolommen ongeacht de grootte van je container.

En hoe maken we deze layout responsive? In de basis kan dit heel eenvoudig door de grid-template-columns waarde te wijzigen in een media query:

Grid CSS Mediaquery

In plaats van drie gelijke kolommen zien we nu twee gelijke kolommen in onze grid. De derde kolom wordt nu automatisch in een tweede rij geplaatst.

Standaard zit er geen ruimte (gutter) tussen je grid items. Je kan dit heel eenvoudig aanpassen door gebruik te maken van grid-gap in plaats van reguliere margins of paddings. In onderstaand voorbeeld geef ik de items in mijn grid 30 pixels ruimte over de horizontale as en 90 pixels ruimte over de verticale as.

Grid Gap CSS

Veel flexibeler

Door CSS grid te gebruiken kan je het nog veel flexibeler maken door een variatie te maken op de bestaande grid. Een voorbeeld is om voor tablet te gaan naar een grid bestaande uit twee rijen. De bovenste rij bevat twee kolommen en de onderste rij gebruikt de volledige rij.

Alleen hoe krijg je dit met CSS voor elkaar? Je kan hiervoor gebruik gaan maken van grid en template area’s. Deze template area’s gebruik je om de volgorde van verschillende onderdelen te bepalen met de bijbehorende hoeveelheid kolommen.

Grid Area CSS

In dit geval gebruik ik de volgorde van de verschillende onderdelen zoals ik die in mijn markup heb gedefinieerd. Dus eerst de afbeelding met hiernaast de bijbehorende tekst. Hieronder komt op de volle schermbreedte het overzicht met de andere nieuwsitems. Deze opmaak van deze nieuwsitems verander ik door ze naast elkaar te zetten in plaats van onder elkaar.

Dit alles doe ik zonder allerlei aparte classes toe te voegen, ik gebruik alleen maar zeer marginale markup. Hetzelfde resultaat halen zou onmogelijk zijn in Foundation zonder hele zware aanpassingen te doen.

Naast dit voorbeeld ben je ook veel flexibeler met de breakpoints van je CSS. Met een framework zit je hier een soort van aan vast door het gebruik voor de verschillende classes die je framework gebruikt. In feite heb je altijd drie vaste breakpoints, namelijk small, medium en large. Door gebruik te maken van je eigen CSS ben je hier vele malen flexibeler in omdat je volledig onafhankelijk bent van de voorgedefinieerde classes die een framework je biedt.

CSS in plaats van JavaScript

Een ander voordeel van het vervangen van je framework door je eigen CSS is dat je bepaalde functionaliteit die je framework oploste met JavaScript kan vervangen door een CSS gebaseerde oplossing. Zo is het responsive menu wat we nu gebruiken gebaseerd op slechts enkele regels CSS.

Ook de sticky content die we op enkele pagina’s gebruiken wordt gerealiseerd door slechts drie regels CSS, zonder allerlei additionele markup die je nodig zou hebben als je een framework gebruikt.

Met Foundation zou je bovenstaande markup nodig hebben om een element sticky te maken.

Sticky markup van Foundation

Het kan gelukkig ook anders met wat basis markup.

Sticky markup zonder Foundation

Met onderstaande CSS maak je een element sticky en blijft deze ‘plakken’ zodra het parent element de bovenkant van je browserscherm heeft bereikt. In dit geval geef ik wat extra ruimte mee aan de bovenkant. Standaard zijn alle grid items in een rij even hoog, iets wat je niet wil hebben als je gebruik wil maken van de sticky functionaliteit. Om dit tegen te gaan maak je gebruik van align-self.

Sticky CSS

De Grid inspector

Tijdens de omzetting van Foundation naar CSS Grid heb ik veel gebruik gemaakt van een handige feature in de FireFox dev tools; de grid-inspector. Nadat je display: grid hebt toegepast op een bepaald element kan je hiermee heel duidelijk zien wat je browser aan output genereerd. Je kolommen, rijen en ruimte (grid-gap) tussen deze onderdelen wordt via een overlay weergegeven wat heel verhelderend kan werken als je er even niet uitkomt.

Grid Inspector Firefox Dev Tools

Vergeet Flexbox niet

Tot nu toe heb ik het alleen nog maar over CSS Grid gehad. Maar laten we ook Flexbox niet vergeten. Flexbox is ontzettend handig voor het eenvoudig positioneren van allerlei elementen in je layout. Zo gebruik ik bijvoorbeeld Flexbox voor de positionering van het menu. Flexbox kan je daarnaast ook heel goed combineren met Grid.

Beide hebben hun eigen specifieke (on)mogelijkheden dus het ligt maar net aan je situatie wat je moet gaan gebruiken. Een eenvoudige uitleg over het verschil tussen Grid en Flexbox kan je hier vinden.

Kan ik CSS Grid gebruiken voor mijn projecten?

Ja dat kan zeker. Ondanks dat CSS Grid nieuw is wordt het goed ondersteund door alle moderne browsers. Uiteraard is het oude Internet Explorer spelbreker die CSS Grid deels ondersteund met een prefix. Browsers die CSS Grid niet ondersteunen krijgen een 100% width layout wat in veel gevallen overeenkomen met de mobiele weergave van je website.

Data

Nu begon mijn hele betoog over het feit dat een framework relatief zwaar is in gebruik. De bestandgrootte van websites nemen alleen maar toe terwijl we meer mobiel zijn gaan browsen. Verder is de snelheid van je site alleen maar belangrijker geworden, helemaal als het om conversies gaat. Laten we ook niet vergeten dat Google van snelle websites houdt en uiteraard ook de bezoekers van je website.

Om het verschil inzichtelijk te maken heb ik wat data voor je op een rijtje gezet. Ik vergelijk hierbij de CSS van Bootstrap, Foundation en mijn eigen CSS. Mijn eigen CSS bevat naast de Grid layout ook alle andere styling.

De eerste vergelijking is met de standaard stylesheet van het framework die alle features van het framework van styling voorziet. De eerste waarde in de tabel is die niet gecomprimeerde versie van het bestand, de tweede waarde is de gecomprimeerde versie van het bestand.

Bootstrap Foundation Custom
159 kB / 127kB 156 kB / 117kb 40 kB / 31 kB

De tweede vergelijking is een vergelijking met alleen de CSS-bestanden voor de layout van Bootstrap 4.1 en de XY-Grid van Foundation. De eerste waarde in de tabel is die niet gecomprimeerde versie van het bestand, de tweede waarde is de gecomprimeerde versie van het bestand.

Bootstrap Foundation Custom
38 kB / 29 kB 66 kB / 47 kB 40 kB / 31 kB

Naast de CSS heb ik ook een vergelijking gemaakt voor JavaScript. Deze vergelijking is niet helemaal eerlijk aangezien ik voor Bootstrap en Foundation de volledige JavaScript package gebruik. Voor zowel Bootstrap als Foundation geldt dat je ook een custom build kan downloaden die aanzienlijk minder JavaScript kan bevatten afhankelijk van welke framework componenten je wil gaan gebruiken. De eerste waarde in de tabel is die niet gecomprimeerde versie van het bestand, de tweede waarde is de gecomprimeerde versie van het bestand.

Bootstrap Foundation Custom
121kb / 51 kB 423 kB / 149 kB 1,5 kB / 1 kB

Nu we de verschillen in CSS en JavaScript inzichtelijk hebben gemaakt voor ons custom theme wordt het tijd voor het totaalplaatje. Hieronder zie je twee tests die van Pingdom komen en onze homepage betreffen:

Vergelijking performance Pingdom tools

Zoals je kan zien pakken we winst in de totale laadtijd, bestandsgrootte van CSS en JavaScript. Het beeld is enigszins gekleurd omdat in deze meting ook CSS en JavaScript van WordPress en gebruikte plugins wordt meegerekend. Naast deze bespraing zijn er vier server requests minder nodig door geen gebruik meer te maken van Foundation.

Afgezien van deze winst in resources is de mate van flexibiliteit die je hebt met je eigen CSS ook ontzettend belangrijk. Als je begint met Grid of Flexbox moet je absoluut even wennen aan de nieuwe syntax en kost dit uiteraard ook meer tijd dan als je jouw vertrouwde framework gebruikt. Maar als je eenmaal gewend bent werkt het minstens net zo snel, ben je veel flexibeler en schrijf je vooral veel nettere maar ook veel minder code.

Resources

Wil je zelf ook aan de slag en je framework vervangen door custom CSS? Onderstaande links vond ik heel erg handig en heb ik erg veel van geleerd als het om CSS Grid gaat:

En natuurlijk ook de presentatie van Luc Prinsen op WordCamp Rotterdam waar het allemaal mee begon.

Ook interessant

Cookies en privacy

Je weet dat ze er zijn: cookies. Per categorie kan je jouw keuze voor het gebruik van cookies aangeven. Deze methode komt overeen met de nieuwe AVG (ingangsdatum 25 mei 2018). Wij hebben de cookies van Google Analytics volledig geanonimiseerd en daarom mogen wij die plaatsen zonder toestemming. Op onze Privacy Pagina kan je hier meer over lezen.

Privacy policy | Sluiten
Instellingen