Grid

Introductie

Grid systemen worden gebruikt om pagina layouts te bouwen door middel van rows (rijen) en columns (kolommen) waar content in gepresenteerd wordt. Het Bootstrap grid systeem werkt op de volgende manier:

• Rows moeten binnen een .container geplaatst worden voor de juiste uitlijning en vulling.
• Gebruik rows om horizontale groepen met columns te creëren.
• Content moet binnen een column geplaatst worden en alleen columns mogen een directe child van rows zijn.
• Voorgedefinieerde grid classes als .row en .col-xs-4 zijn te gebruiken om snel een grid layout samen te stellen. Sass >mixins kunnen gebruikt worden een meer semantisch grid te bouwen.
• columns creëren gutters (verticale witruimte tussen content en componenten) door middel van padding. De padding heeft een offset in rows voor de eerste en laatste column door een negatieve margin op de .rows.
• De negatieve margin is de oorzaak waarom de onderstaande voorbeelden buiten het grid lopen.
• Grid columns kunnen gecreërd worden door een aantal columns te definieren die samen optellen tot maximaal 12 (de volledige paginabreedte). Bijvoorbeeld: Om 3 gelijke columns over de volledige breedte te creëren gebruik je drie.col-xs-4.
• Wanneer er meer dan 12 columns in een row geplaatst worden, vallen de laatste columns automatisch op een nieuwe regel.
• Grid classes hebben uitwerking op devices met schermresoluties die gelijk en/of groter zijn dan de breakpoints. Ze overschrijven grid classes die kleinere schermresoluties aanspreken. Wanneer men bijvoorbeeld een .col-md-* class aan een element toevoegd, zal deze niet alleen de medium devices aanspreken maar ook alle grotere wanneer er geen .col-lg-* class aanwezig is.
• Het nesten van rows (row in een row) is tot één niveau diep toegestaan. De geneste row dient altijd uit gelijke kolommen opgebouwd te worden.

Bekijk onderstaande voorbeelden voor een uitwerking van deze principes binnen de library.

Media queries

We gebruiken de volgende media queries in onze Sass bestanden om de basis breekpunten in het grid systeem te definieren.

/* Extra kleine devices (telefoons, minder dan 768px) */
/* Geen media query omdat er vanuit mobile first gewerkt wordt in de UX Library. */

/* Kleine devices (tablets, 768px en hoger) */
@media (min-width:
@screen-sm-min) {
... }

/* Medium devices (desktops, 992px en hoger) */
@media (min-width:
@screen-md-min) {
... }

/* Grote devices (grote desktops, 1200px en hoger) */
@media (min-width: @screen-lg-min) { ... }

Het is mogelijk om de media queries uit te breiden met een max-width om een specifiekere range aan devices te bedienen met bepaalde CSS regels.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid opties

In onderstaande tabel is goed te zien hoe het grid systeem zich gedraagt op verschillende devices.

De .col-xxl- classes zijn alleen voor medewerkersschermen en kunnen geactiveerd worden door de class .theme--xxl-breakpoint op de body te zetten.

Voorbeeld: gestapeld-tot-horizontaal

Met enkele .col-md-* grid classes, kan een basis grid systeem gecreëerd worden die gestapeld begint op mobile devices en horizontaal eindigt op de desktop. De grid columns moeten binnen een .rowgeplaatst worden.

Voorbeeld: Mobile en desktop

Wil je niet dat columns stapelen op kleinere devices? Gebruik de extra small en medium device grid classes door .col-xs-* .col-md-* toe te voegen aan je columns. Zie onderstaand voorbeeld voor een uitwerking van deze regels.

Voorbeeld: Mobile, tablet, desktop

Gebasseerd op het vorige voorbeeld kunnen meer dynamische en krachtige layouts gemaakt worden met de toevoeging van de .col-sm-* classes voor tablets.

Voorbeeld: Column wrapping

Wanneer er meer dan 12 columns binnen een enkele row geplaatst worden, zal elke extra groep columns, als één onderdeel op een nieuwe regel vallen.

Offsetting columns

Verplaats columns naar rechts door middel van de .col-md-offset-* classes. Deze classes zorgen voor een toename in de linker margin van * columns. Bijvoorbeeld, .col-md-offset-4 verplaatst .col-md-4 vier columns naar rechts.

Column sortering

Door middel van de .col-md-push-* en .col-md-pull-* modifier classes kan eenvoudig de volgorde van bestaande grid columns worden aangepast.
col-md-push-xx duwt een element xx kolommen naar rechts.
col-md-pull-xx trekt een element xx kolommen naar links.
Let op: de elementen 'floaten' en kunnen elkaar dan overlappen.

Mobile: modal colums

Met de .col-sm-modal modifier kan een kolom op kleine schermen verborgen worden, en met een knop als modal getoond worden. (Maak het scherm smaller om de werking te zien).

Geen gutters

Soms is het nodig dat kolommen direct op elkaar aansluiten, in dat geval kunt je de modifier .row--no-gutter toepassen.

Stippellijnen

Met de modifier .col-{screensize}-up--dotted kan er een stippellijn tussen kolommen worden toegevoegd.

In het onderstaande voorbeeld wordt er een stippellijn toegevoegd op alle schermen, behalve mobiel (xs).