CSS-bib en Skeleton
Er bestaan heel wat CSS-frameworks. Tot de bekendste behoren Bootstrap en Materialize. Maar het zijn lang niet de enige. Een CSS-framework bestaat uit een CSS-bestand dat je in de meeste gevallen gratis mag gebruiken voor je site. Een CSS-framework bevat al een hele reeks klassen om je webpagina's makkelijk te kunnen vormgeven.
Voor de lessen webdesign basis heb ik een aangepaste versie van het Skeleton-framework geschreven. Hiermee kan je je site makkelijk indelen in rijen en kolommen, iets wat bijzonder moeilijk is als je dit zelf zou gaan doen in CSS. Bovendien houdt Skeleton (of zoals wij het noemen "CSSBIB") rekening met mobiele toestellen. Hierdoor maak je je site in een wip "responsive".
Naast het CSS-framework dat op deze pagina uit de doeken wordt gedaan, heb je vaak nog wat extra zaken nodig om je site "responsive" en "mobile-first" te maken. Problemen met de mobiele weergave? Klik dan op de volgende link:
Responsive webpagina's, mobile first
1. CSSBIB gebruiken
Link het CSS-bestand aan je webpagina.
Voeg in de <head>-sectie van je document de volgende regel toe:
<link rel="stylesheet" href="">
Tussen de aanhalingstekens achter href, tik je het adres van het CSS-bestand:
https://www.schoolvoorbeeld.be/css/cssbib.css
De resulterende regel ziet eruit als volgt:
<link rel="stylesheet" href="https://www.schoolvoorbeeld.be/css/cssbib.css">
2. Rijen en kolommen maken
Met CSSBIB kan je snel rijen en kolommen maken. Op mobiele toestellen gaan de kolommen netjes onder elkaar staan.
2.1 Maak een "rij"
<div class="row"> </div>
2.2 Voeg kolommen toe aan een rij
Elke rij beschikt over twaalf cellen/kolommen. Je kan die groeperen om een pagina in kolommen onder te verdelen.
Opgelet: je eindtotaal moet altijd 12 zijn.
In het onderstaande voorbeeld verdelen we de rij in drie gelijke kolommen.
<div class="row">
<div class="four columns">
Inhoud eerste kolom
</div>
<div class="four columns">
Inhoud tweede kolom
</div>
<div class="four columns">
Inhoud derde kolom
</div>
</div>
Maak even de optelsom: four + four + four = twelve. De indeling zou er als volgt uitzien:
Uiteraard kan je ook andere combinaties maken:
- twelve columns (slechts één kolom)
- six columns + six columns (twee gelijke kolommen)
- nine columns + three columns
- eight columns + four columns
- ...
Je bepaalt op die manier zelf hoe je je webpagina wil opbouwen. Uiteraard kan je meerdere rijen met meerdere combinaties van kolommen onder elkaar in de pagina toevoegen. Als je aan een site voor jezelf of voor een klant begint, kan je eerst een draadmodel van je pagina uittekenen. Vervolgens is het heel makkelijk om in html dat draadmodel te bouwen.
Voorbeeld van een draadmodel (wireframe):
Bekijk het draadmodel. Hoeveel rijen en kolommen (per rij) zou je nodig hebben om deze indeling te bouwen in HTML?
3. Volledige schermbreedte of breedte beperken
Het is soms handig dat een rij de volledige breedte van je browservenster in beslag neemt, bijvoorbeeld als je in een rij een bannerafbeelding wil plaatsen. Als je in een rij een tekst plaatst, worden de tekstregels echter zeer "breed" op een heel breed scherm zoals bij een Apple iMac. Daarom kan het zinvol zijn om een rij of een groep rijen te beperken in breedte.
Een "container" die de breedte van de rijen beperkt tot een normale "laptopweergave":
<div class="container">
<div class="row">
</div>
</div>
Wil je er zeker van zijn dat een rij de volledige breedte inneemt, voeg dan de volgende container toe:<div class="container-max">
<div class="row"></div>
</div>