Visuele taal

Grid

In de huisstijl wordt het standaard grid-systeem van Bootstrap gebruikt. Dit grid bestaat uit 12 flexibele kolommen met een tussenafstand van 30px. Afhankelijk van de inhoud van de pagina waarop je het grid toepast zal de kolomverdeling verschillen.

Op deze pagina worden een aantal voorbeelden van grid-verdelingen getoond. Let bij het gebruik van het grid op de volgende dingen:

• Een .col-* moet altijd een element zijn binnen een .row. Dit komt doordat het ene element een negatieve marge geeft en het andere element een positieve padding.
• Er moet rekening worden gehouden met responsiveness op verschillende resoluties. Hiervoor kun je col-lg-*, col-md-* en col-sm-* gebruiken.
• Binnen een kolom kan op dezelfde wijze weer een onderverdeling gemaakt worden in kolommen.

Voorbeelden van layout grids

De layout grids bepalen de vlakverdeling van de main-content van de pagina (het deel onder de header). In hoofdlijnen zijn de volgende drie varianten te onderscheiden.

Volledige breedte (1/1)

Deze layout wordt gebruikt als er geen zijbalk nodig is en de inhoud van de pagina een hoge informatiedichtheid heeft. In pagina's beschikbaar voor burgers wordt dit niet vaak toegepast, maar het komt vaker voor op beheerpagina's.

Breed met zijbalk (3/4 en 1/4)

Deze layout wordt gebruikt als er een zijbalk met extra informatie of navigatie elementen nodig is en de inhoud van de pagina een reguliere informatie dichtheid heeft. Dit is de meest voorkomende layout.

Breed zonder zijbalk (3/4)

Deze layout wordt gebruikt als er geen zijbalk (meer) nodig is. Dit wordt vaak gebruikt in combinatie met pagina's die wel een zijbalk hebben, waarbij de zijbalk verborgen wordt om de aandacht te vestigen op de inhoud op het linker deel van het scherm.

Om verspringen van het scherm tussen pagina's te voorkomen wordt er dan vaak voor gekozen om de inhoud niet op de volledige breedte weer te geven.

Grid in back-office applicaties

De breedte van de hoofd container in back-office applicaties is groter. Deze breedte komt automatisch mee als je op het body element de class back-office toevoegd.

De huidige maximale breedte van de back-office container is 1540 pixels. De maximale breedte van de backoffice grid container is gebaseerd op de resolutie van de schermen bij het CIBG en de breedte waarop content nog prettig leest. Doordat er nu veel meer ruimte is op het scherm moet er aandacht zijn voor het volgende:

• Je hebt meer vrijheid in het toepassen van verschillende grid-indelingen. Let er op dat een kolom met een breedte van 12 in veel gevallen niet prettig leest.
• Er is bewust voor gekozen om een maximale breedte te bepalen en niet uit te gaan van '100% schermbreedte minus een padding', omdat je dan te weinig controle hebt over hoe de weergave op nog hogere resoluties is.
• Hoewel je meer breedte beschikbaar hebt, moet de applicatie nog steeds bruikbaar zijn om schermen met lagere resoluties of wanneer er ingezoomd wordt.