Naar Core

Grid

De componenten library maakt gebruik van een responsive, mobile first grid systeem die relatief kan schalen tot 12 kolommen als er een verandering in schermgrootte of type device plaatsvindt. De UX Library maakt gebruik van voorgedefinieerde classes om snel en eenvoudig een grid te kunnen samenstellen. Het grid is een uitgeklede variant van het Bootstrap 4 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.

Extra kleine devices Telefoons (<768px) Kleine devices Tablets (≥768px) Medium devices Desktops (≥992px) Grote devices Desktops (≥1200px) Extra grote devices
Desktops (≥1800px)
Grid gedrag Altijd horizontaal Uitgeklapt tot aan begin, horizontaal boven breekpunten
Container breedte Geen (auto) 750px 970px 1200px 1800px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xxl-
Aantal kolommen 12
Kolom breedte Auto ~62px ~81px ~97px ~147px
Gutter breedte 20px (10px aan beide zijden van een column)
Nestable
Offsets
Column ordering

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.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

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.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

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.

.col-xs-9
.col-xs-4
Omdat 9 + 4 = 13 > 12, valt deze 4-column-brede div op een nieuwe regel als een aaneensluitend element.
.col-xs-6
Opeenvolgende columns komen tegen het vorige element op de nieuwe regel.

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.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

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.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

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.

Geen gutter
.col-sm-4
.col-sm-4
Met >gutter
.col-sm-4
.col-sm-4

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).

Integer venenatis faucibus ultricies. Suspendisse sed varius purus. Ut sit amet ligula scelerisque, venenatis orci sit amet, cursus lectus. Aenean tempus, nulla et mollis semper, ex odio tempor ligula, non porttitor libero nibh et augue.
In placerat eu est vel posuere. Nunc sed feugiat nisl. Maecenas ac maximus sem. Aliquam tincidunt orci in rhoncus commodo. Duis auctor pellentesque velit et egestas. Sed non faucibus mauris.
Nulla mattis efficitur nisl ut tempus. Nullam urna nibh, hendrerit vel iaculis vitae, lobortis nec nulla.

Benodigde stylesheets

  • /uno/components/modal/modal.css
  • /uno/components/table/table.css