Al een tijdje bestaat het fenomeen "CSS framework". Wat zijn CSS frameworks, ook wel grid systems genoemd? Een CSS framework is (vrij vertaald) een verzameling standaard bestanden waarmee versneld HTML/CSS templates gecodeerd kunnen worden aan de hand van een standaard Photoshop template (PSD'tje).

Hoe gaat het in z'n werk? Oké, je hebt een PSD bestand die bestaat uit precies een x aantal kolommen (12, 16 of 24). Binnen deze kolommen ontwerp je het grafisch ontwerp. Daarnaast heb je een HTML/CSS template die bestaat ook uit precies een x aantal kolommen (12, 16 of 24). Exporteer je vervolgens de PSD file naar images, dan passen deze precies binnen het stramien van de HTML/CSS template. Op deze pagina wordt dit nog eens gevisualiseerd. Op de website van tuts+ staat een uitgebreide tutorial van het 960 grid system. Oké, nu valt de term grid system, deze term wordt ook wel gebruikt als equivalent op de term css framework, omdat er namelijk sprake is van een grid vanwege het standaard aantal kolommen.

Welke CSS frameworks bestaan er allemaal? Je hebt er vele. Op de wiki pagina zijn ze allemaal terug te vinden. Zelf heb ik me verdiept in het 960 grid system. Dit systeem is in feite een verzameling van bestanden, nl. de htm/css code, de PSD files (maar ook fireworks files, e.d. als je dit pakket gebruikt) en tenslotte klad A4'tjes met het grid er al op afgedrukt. Dat laatste is echt leuk, want nu kun je dus design uittekenen op papier die straks precies binnen het grid van de PSD passen. De bronbestanden  van 960.gs zijn overigens hier te vinden.

Samengevat, wat zijn de voordelen van een CSS framework c.q. grid system?:
- Je kunt hele mooie symmetrische layouts maken, omdat je volgens een specifiek grid werkt, het is m.i. met name interessant voor websites met een complexe layout
- De ontwikkeltijd van een html/css template is veel korter, omdat de PSD 1 op 1 kan worden overgezet naar een html/css template
- De html/css template is cross-browser compatible, dus dit scheelt weer tijd met testen

En wat zijn de nadelen:
- Je zit vast aan een stramien van een grid, dus als ontwerper heb je minder vrijheid, voor websites met een speelse layout waar alles kriskras door elkaar staat, wordt werken met een vast grid niet erg makkelijk

Hier nog een paar voorbeelden van websites zijn gemaakt aan de hand van een grid system:
http://gobible.com/
http://www.woothemes.com/
http://onehub.com/
http://www.lulu.com/
http://modxcms.com/

Zoals je ziet zijn dit websites met een wat complexere layout, maar alles ziet er perfect symmetrisch uit.

Heb je nog iets toe te voegen aan dit artikel? Mail ons dan even!