Layout elementen
De overall layout van de pagina, een-, twee- of drie-koloms, wordt altijd op dezelfde
manier bepaald. Voor de opmaak van <section> en
<article> elementen zijn een hoop decorator classes die
toegevoegd kunnen worden om de layout speelser te maken. Op deze pagina vind je een
opsomming van layout classes en voorbeelden hoe die toe te passen zijn.
Om te beginnen zijn er twee classes die de afronding van hoeken van
<section> en <article> elementen bepaald:
.pilled en .rounded
.pilled
Dit is een blok met grote rondingen, door deze class toe te passen veranderen ook de hapjes uit de hoeken automatisch mee. (dit is de standaard)
.rounded
Dit is een blok met kleine rondingen, door deze class toe te passen veranderen ook de hapjes uit de hoeken automatisch mee.
.title-outset-right
Dit is een <section> met kleine afrondingen en een outset titel
aan de rechter kant. Deze <section> heeft meerdere classes die met
elkaar de opmaak van het element bepalen:
<section class="purple-on-blue rounded title-outset-right">
.title-outset-right
Dit is een <section> met grote rondingen met een outset titel.
Deze <section> heeft meerdere classes die met elkaar de opmaak van het
element bepalen:
<section class="purple-on-blue pilled title-outset-right">
.title-outset-left
Dit is een <section> met kleine afrondingen en een outset titel
aan de rechter kant. Deze <section> heeft meerdere classes die met
elkaar de opmaak van het element bepalen:
<section class="purple-on-blue rounded title-outset-left">
.title-outset-left
Dit is een <section> met grote rondingen met een outset titel.
Deze <section> heeft meerdere classes die met elkaar de opmaak van het
element bepalen:
<section class="purple-on-blue pilled title-outset-left">
Spanning elementen
2 kolommen (.col-span-2)
3 kolommen (.col-span-3)
2 rijen (.row-span-2)
Andere vormen
citaatblok met grotere tekst
kleine of grote gap in een bepaalde hoek (.smallgap-top-left, .largegap-top-left, etc.)
gap elementen met iconen (en kleur bepalen)
border collapse waarbij elementen in elkaar schuiven op basis van gaps. Bijvoorbeeld elementen met .smallgap-bottom-right + .smallgap-top-left