Pagina opbouw
Hier komt een stukje tekst over de pagina opbouw.
Wrapper
Elke pagina begint met een <div class="wrapper">
. Alle inhoud van
de pagina bevindt zich binnen deze wrapper
Breedte
De breedte van de content wordt zo ingesteld, zodat de regellengte maximaal
600 pixels is. Dit wordt bereikt door verschillende .col-{screensize}
toe te passen.
Door een .col-xx-offset-##
op de div te zetten
wordt het content blok worden gecentreerd op de pagina.
<div class="row">
<div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
<div class="content-background">
<div class="content">
<p>Inhoud van de pagina</p>
</div>
</div>
</div>
</div>
Main
Zet alle content van een pagina (alle zaken behalve het DUO logo, de navigatie en de footer) in een main
element.
De main heeft een minimale hoogte van 70vh (70% van de view height). Als je teveel zaken buiten de main zet heb je kans dat er zaken buiten beeld gedrukt worden.
Zorg er wel voor dat niet meer dan één main
element per pagina is. Screenreaders verwachten ook maar één keer een main per pagina, namelijk het stuk waar de pagina over gaat.
Meestal zal een skiplinks
ook verwijzen naar de main.
<main class="skiplink-target main" id="content" tabindex="-1">
<div class="container">
[content bijvoorbeeld intro]
</div>
</main>
Achtergrondkleur
De inhoud van de pagina wordt weergegeven op een witte achtergrond, dit
wordt bereikt door het .content
blok in een
<div class="content-background">
te plaatsen.
<div class="row">
<div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
<!-- Geeft deze content een achtergrond -->
<div class="content-background">
<div class="content">
<p>Inhoud van de pagina</p>
</div>
</div>
</div>
</div>
Alternatieve achtergrond kleur
De achtergrond
kan gewijzigd door een extra class toe te voegen .background-{rijkshuisstijl kleur}
.
Gebruik dit alleen voor bijvoorbeeld een link list, niet voor tekst blokken.
Content
Een pagina bestaat altijd uit .content
blokken. Binnen de contentvlak kun je de pagina beginnen met een intro .content__header
Content Header
De meeste pagina's beginnen met een intro. Deze bevat de titel van de pagina
met een korte introductie. De titel & de introductie paragraaf worden geplaatst
in een header
element met de class .content__header
.
Het intro blok bevat ook de eventuele .backlink
.
<section class="row">
<div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
<div class="content">
<a href="#" class="content__header-backlink backlink">Terug</a>
<header class="content__header">
<h1 class="content__header-title">Titel</h1>
<p class="content__header-paragraph">Intro</p>
</header>
</div>
</div>
</section>
Titel met subtitel
De subtitel is geen <h2>
maar een gewone paragraaf
h1–h6
elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.
Lees meer over html5
Titel van de pagina
Subtitel van de pagina
Eventuele introductie text
Titel met meta informatie
Terugmeldingen 2e voorlopige foto 2015 mbo vavo beschikbaar
Titel met voortgangsindicatie
Contactgegevens instelling
Extra kolom witruimte
Op grotere schermen kan het wenselijk zijn een extra kolom witruimte aan de linker
en rechter kant van het content vlak toe te voegen. Hiervoor moet op de .content
tag een class worden toegevoegd .content--large-padding
.
Minder witruimte
Voor o.a. medewerkersschermen kan het juist wenselijk zijn om minder witruimte
tussen de verschillende content blokken te hebben. Voeg hiervoor de modifier
.content--compact
toe aan het .content
blok. De witruimte
bovenaan het content vlak wordt hiermee verkleind. Deze modifier kan niet worden
gebruikt in combinatie met .theme--large-padding
.
<div class="row">
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="content-background">
<div class="content content--compact">
<h2>Externe identifiers</h2>
<table class="table table--striped">
<thead>
<tr>
<th>Type</th>
<th>Inhoud</th>
<th>Begindatum</th>
<th>Einddatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>ONDERWIJSAANBIEDER_ID</td>
<td>100A001</td>
<td>02-02-2002</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Content uitvullen
De padding aan de linker en rechter zijde van content blokken kan worden verwijderd
door de modifier .content--wide
toe te passen. Tabellen en componenten
worden dan strak tegen de rand van hetcontent vlak geplaatst
<div class="row">
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="content-background">
<div class="content content--wide">
<h2>Externe identifiers</h2>
<table class="table table--striped">
<thead>
<tr>
<th>Type</th>
<th>Inhoud</th>
<th>Begindatum</th>
<th>Einddatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>ONDERWIJSAANBIEDER_ID</td>
<td>100A001</td>
<td>02-02-2002</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>