Over frameworks voor het maken van websites

Als je een nieuwe website gaat opzetten, ben je eigenlijk wel verplicht om die website te maken voor een breed scala aan schermformaten. Zeg maar: van smartphone tot desktop. De huidige trend is om één website te bouwen die zich aanpast aan het beschikbare schermformaat of window. Dat heet Responsive Web Design (RWD).

Voor webdesigners die al hun code zelf maken (zoals ik), is het nogal een klus om zelf een responsive ontwerp in elkaar te zetten. Gelukkig zijn er mensen en organisaties die een soort 'kookplaat' hebben gemaakt waarmee je eenvoudig een responsive lay-out voor je site kunt maken. Als het goed is hoef je aan de code van zo'n boilerplate of framework niets te veranderen. Voeg je eigen instellingen in en het werkt.

Een framework bestaat uit HTML en CSS, meestal aangevuld met jQuery of een andere JavaScript-bibliotheek.
De pagina wordt ingedeeld in blokken die elk een id of class hebben. De CSS zorgt er voor dat de content netjes op het scherm komt. Verder is de CSS nodig voor het responsive maken van het framework.

De werkwijze van vrijwel alle frameworks doet denken aan de aanpak uit de begintijd van HTML, waarbij veelvuldig gebruik wordt gemaakt van tabellen. Iets wat lijkt op die tabellen wordt nu gemaakt met CSS. Dat wordt grid (raster) genoemd. Het document wordt verdeeld in een aantal rijen en kolommen, dat dient als onderlaag voor de opmaak.
Deze aanpak is overgenomen uit de drukkerij-wereld, waar het stramien wordt genoemd.

Hieronder zie je links een screenshot van een willekeurige website. Aan de rechterkant zie je de (12) kolommen er overheen geprojecteerd, met de roze kleur. De rijen zijn goed waarneembaar.

• Zoals je ziet zijn in het menu bovenaan 6 × 2 kolommen samengenomen.
  
• Daaronder zitten drie rijen van elk 2 × 6 kolommen.
  
• Vervolgens is er een rij met 4 × 3 kolommen.
  
• Helemaal onderaan is er een rij met 2 × 3 kolommen en 1 × 6 kolommen.

De breedte van de kolommen is gewoonlijk voor alle kolommen gelijk. Er zijn ook frameworks waarbij je de breedte per kolom kunt instellen, of die werken met een vaste breedteverhouding tussen de opeenvolgende kolommen, zoals de gulden snede.

De toepassing van dit soort platforms is niet beperkt tot sites die worden gebouwd door handmatig te coderen (zoals deze site). Je komt ze ook tegen in de thema's en templates van Content Management System (CMS).
Voor de bekende CMS-en WordPress, Joomla en Drupal zijn thema's die een platform gebruiken zoals hier beschreven, ruim voorhanden op internet. Het gaat dan vrijwel zonder uitzondering om responsive thema's. Er zijn er die gratis zijn, maar ook waar je voor moet betalen.

Welke platforms zijn er?
Er bestaan tientallen platforms om een website mee te bouwen. Er komen er nog regelmatig nieuwe bij. In feite maakt het niet uit welk platform je inzet. Belangrijk is of je het zelf lekker vindt werken en of je ermee kunt realiseren wat je voor ogen staat, want:

Alleen het eindresultaat telt!

Bezoekers van je website zijn alleen geïnteresseerd in wat er op hun scherm verschijnt. Ze gaan echt niet zitten kijken hoe je het hebt gemaakt (uitzonderingen daargelaten ).

De meest bekende platforms zijn:

HTML5 Boilerplate

Dit is het oudste, een van de bekendste en een van de veel gebruikte platforms. De eerste versie dateert van begin 2011 en er is sindsdien stevig aan ontwikkeld. Op het moment dat dit wordt geschreven (mei 2020) is versie 7.3.0 beschikbaar.
 

Naast HTML5 en CSS3 maakt HTML5 Boilerplate gebruik van jQuery en Modernizr.
Gebruik van dit platform is niet moeilijk om te leren. Ik zelf vind het lastig om de verschillende CSS- en JavaScript bestanden uit elkaar te houden. Er is veel code, dat vertraagt het laden van de site.
 

HTML5 Boilerplate kun je downloaden van html5boilerplate.com.
De code is goed gedocumenteerd, er zijn veel voorbeelden voorhanden.
 

Twitter Bootstrap

In de wandeling gewoonlijk 'Bootstrap' genoemd. Ook dit platform behoort tot de meest bekende en meest gebruikte platforms. Bootstrap is opgezet door de makers van de berichtendienst Twitter. Er wordt wordt steeds aan ontwikkeld. Op het moment dat dit geschreven wordt (mei 2020) is het versienummer 4.4.1.
 

Naast HTML5 en CSS3 maakt Bootstrap gebruik van jQuery.
Gebruik van dit platform is een fluitje van een cent. Je hebt te maken met slechts 2 bestanden (CSS en JavaScript) om Bootstrap te laten werken, en één CSS-bestand met je eigen aanpassingen van de Bootstrap-instellingen. Die paar bestanden bevatten echter heel veel code, dat vertraagt het laden van de site. Dit nadeel weegt voor mij niet op tegen het enorme gebruiksgemak. Aanrader!
 

Om Bootstrap te downloaden ga je naar getbootstrap.com.
De code is goed gedocumenteerd, er zijn veel voorbeelden voorhanden. Voor speciale functies zijn en veel plug-ins beschikbaar, denk hierbij aan een carrousel of inlog-pagina.
 

CMS-en gebruiken vaak Bootstrap, omdat het eenvoudig is om er een thema of template mee te maken.
 

Foundation

Foundation wordt gemaakt door Zurb Inc., gevestigd in Californië, USA. De community groeit snel. De huidige versie is 6.6.1 (mei 2020).
 

Naast HTML5 en CSS3 maakt Foundation gebruik van jQuery.
 

Dit pakket heeft minder code dan de twee hierboven. De leercurve is daardoor wel een stuk steiler (lees: Dit platform is lastiger te leren dan Boilerplate en Bootstrap). Het laadt natuurlijk wel sneller.
 

Om Foundation te downloaden ga je naar foundation.zurb.com.
De code is goed gedocumenteerd, er zijn veel voorbeelden voorhanden. Voor speciale functies zijn en veel plug-ins beschikbaar.
 

N.B.: De hierboven genoemde platforms zijn allemaal gratis te gebruiken.

Opmerking:
 
Informatie over het werken met Bootstrap in je in het item Werken met Bootstrap.