We merkten dat websites vaak een set van dezelfde elementen gebruiken - zoals bijvoorbeeld een navigatie, video of een afbeelding. Om herhaling te voorkomen zijn we eens gaan zitten om te kijken welke elementen er vaak voorkomen en welke elementen we kunnen stroomlijnen zodat je een uniform en HTML5 geschikte beleving krijgt.
Titels en tekst schalen in lettergrootte aan, afhankelijk van de breedte van de gehele pagina.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis molestie arcu, at bibendum tortor auctor eu.
Nulla pulvinar enim in lacus pretium, a vestibulum odio pulvinar. Aenean euismod leo et sem porttitor scelerisque. Donec vel odio turpis. Sed lobortis lectus et dui molestie consectetur nec eu urna.
Tables zijn volledig flexibel en worden responsive doordat ze in de CSS omgezet worden naar flex.
| Column title | Column title | Column title | Column title | Column title |
|---|---|---|---|---|
| Column body | Column body | Column body | Column body | Column body |
| Column body colspan 2 | Column body | Column body | Column body | |
| Column body colspan 3 | Column body | Column body | ||
| Column body | Column body | Column body | Column body | Column body |
| Column footer | Column footer | Column footer | Column footer | Column footer |
Een article is het hoofd element op een pagina die gecrawld wordt als informatie van de pagina. Sections kan je zoveel plaatsen als je wilt. Beide kunnen een combinatie van all basis elementen hebben.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis molestie arcu, at bibendum tortor auctor eu.
Nulla pulvinar enim in lacus pretium, a vestibulum odio pulvinar. Aenean euismod leo et sem porttitor scelerisque. Donec vel odio turpis. Sed lobortis lectus et dui molestie consectetur nec eu urna.
Forms zijn volledig in de basis gestijld.
UIKit houd rekening met parent/nested elementen, je kan deze makkelijk en kort in elkaar plaatsen om complexe situaties op te vangen
Je kan elke optie combineren door binnen de class een Size en Element samen te stellen en gecombineerd te plaatsen, bijvoorbeeld: @s-grid en @m-rows.
<section class="@s-slideshow @m-rows @r-grid">
</section>
Elk column of rij kan je defineren door een Size en Maat samen te voegen, en is in relatie met de directe parent. Onthou dat de laatst gekozen formaat gebruikt blijft wanneer je geen grotere maten toevoegt.
<section class="@s-slideshow @m-rows @r-grid">
<article class="@s-col-12/12 @m-col-4/12"></article>
</section>
UIKit houd rekening met parent/nested elementen, je kan deze makkelijk en kort in elkaar plaatsen om complexe situaties op te vangen.
<section class="@s-slideshow @m-rows @r-grid">
<article class="@s-col-12/12 @m-col-4/12 @s-rows @m-columns">
<section class="@s-col-12/12 @m-col-6/12"></section>
<section class="@s-col-12/12 @m-col-5/12"></section>
</article>
</section>
Inspect the code in this example, you'll be surprised in how flat it is!