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>

4. Inhoud centreren

Je kan de inhoud van een element eenvoudig horizontaal centreren door er de klasse "center" aan te geven.

<div class="four columns center">                     
    Hier komt de inhoud van de eerste kolom.  
</div>

De inhoud vertikaal centreren kan eveneens:

<div class="four columns verticalcenter">           
    Hier komt de inhoud van de eerste kolom. 
</div>

Je kan een rij ook de volledige hoogte van het browservenster (de viewport) geven door er de klasse "fullheight" aan toe te kennen, zoals in het voorbeeld hierboven.

5. De hoogte van elementen instellen

<div class="four columns verticalcenter fullheight">           
      Hier komt de inhoud van de eerste kolom. 
</div>

Je kan een rij ook de volledige hoogte van het browservenster (de viewport) geven door er de klasse "fullheight" aan toe te kennen, zoals in het voorbeeld hierboven.

6. Navigatiebalken bouwen

Een navigatiebalk bouw je in HTML op de gepaste manier:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="geschiedenis.html">Historiek</a></li>
        <li><a href="albums.html">Albums</a></li>
    </ul>
</nav>

Wanneer je een horizontaal menu wil, dan voeg je aan het <nav>-element de class "horizontalnavigation" toe.

<nav class="horizontalnavigation">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="geschiedenis.html">Historiek</a></li>
        <li><a href="albums.html">Albums</a></li>
    </ul>
</nav>

7. Elementen vastzetten (pinnen)

a. Vastzetten bovenaan het venster

Je kan een element zoals je navigatiemenu ook vastzetten aan de bovenrand van de pagina. Hiervoor gebruik je de klassen "stick" en "top".

<nav class="horizontalnavigation stick top">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="geschiedenis.html">Historiek</a></li>
        <li><a href="albums.html">Albums</a></li>
    </ul>
</nav>

Omdat je het element "vastplakt" in een afzonderlijke laag, schuift het volgende element in je pagina onder dit vastgeplakte element door. Hierdoor kan het gebeuren dat het bovenste deel van het volgende element niet meer volledig zichtbaar is. Dit kan je oplossen door aan het volgende element de klasse "understick" toe te kennen.

<nav class="stick top">...</nav>
<div class="row understick">...</div>

b. Vastzetten onderaan het venster

Op een gelijkaardige manier kan je elementen ook aan de onderkant van de pagina vastplakken:

<footer class="stick bottom">
</footer>

8. Mobiele navigatie

Om je horizontale navigatiebalk ook te laten functioneren op mobiele toestellen, moet je nog een kleine aanpassing doen.

<nav class=”horizontalnavigation stick top”>
    <a class="showmobile">TOON</a>
    <ul>
        <li><a href=”index.html”>Home</a></li>
        <li><a href=”info.html”>Info</a></li>
        <li><a href=”contact.html”>Contact</a></li>
        <li><a href=”geschiedenis.html”>Historiek</a></li>
        <li><a href=”albums.html”>Albums</a></li>
    </ul>
</nav>

Het woordje toon kan je door een ander woord of door een afbeelding vervangen. Door het toevoegen van de klasse "navicon”, genereert ons stijldocument automatisch een icoontje.

<a class="showmobile navicon">TOON</a>

9. Een uitklapmenu maken

Hoe bouw je een uitklapmenu? Hoe ga je te werk?

Maak een niet-genummerde HTML-lijst en geef hem de klasse “slidingdoors”.
Voeg lijstitems (<li>) toe.
Voeg aan elk lijstitem 2 <div>-elementen toe.
Aan het eerste <div>-element geef je de klasse “slidingtitle”.
Aan het tweede <div>-element geef je de klasse “slidingcontent”.
Voeg aan elke “slidingtitle” een link toe.
Voer een referentie in voor die link. Die referentie moet bestaan uit een # gevolgd door een “naam”.
Voeg die naam toe als id aan de corresponderende slidingcontent.

HTML-code:

<ul class="slidingdoors shadow">
    <li>
        <div class="slidingtitle">
              <a href="#sc1">Lees meer</a>
        </div>
        <div class="slidingcontent" id="sc1">
              Hier komt de inhoud
        </div>
    </li>
    <li>
        <div class="slidingtitle">
              <a href="#sc2">Lees meer</a>
        </div>
        <div class="slidingcontent" id="sc2">
             Hier komt de inhoud
        </div>
    </li>
</ul>

10. Opmaak van afbeeldingen

Je kan door het toevoegen van een klasse bepalen hoe breed je afbeelding moet zijn en waar ze moet staan.

a. Breedte en positie

CSS-klasse	Doel
left	Foto staat links
right	Foto staat rechts
image100, imagefull, stretch	Foto neemt 100% van de breedte van de "parent" in (het element waar de foto zich in bevindt).
image50, imagehalf	Foto neemt 50% van de breedte van de "parent" in (het element waar de foto zich in bevindt).
imagethird	De foto neemt ongeveer een derde in van de "parent" (het element waar de foto zich in bevindt).

Voorbeeld:

<img src="images/foto.jpg" class="imagehalf left"/>

b. Schaduw en afgeronde hoeken

Een foto is een blokelement, een "rechthoek". Ook andere elementen zoals bijvoorbeeld <div> en <article> zijn blokelementen. Aan al deze blokelementen kan je afgeronde hoeken geven of een schaduw.

Met de klasse "shadow" geef je een element een schaduweffect. Opgelet: dit werkt niet bij tekstelementen!

<div class="shadow"></div>

Met de klasse "dropshadow" geef je foto's een schaduweffect.

<img src="images/foto.jpg" class="dropshadow"/>

Met de klasse “roundcorners" geef je een element afgeronde hoeken. Opgelet: dit werkt niet bij tekstelementen!

<img src="images/mijnfoto.jpg" class="roundcorners"/>

c. Filters

Aan afbeeldingen kan je filters toevoegen voor drie gebeurtenissen:

– bij het openen van de pagina

– wanneer de muis over de afbeelding beweegt

– wanneer de gebruiker op de afbeelding klikt

Wat?	Filterklasse	Klasse voor muisover	Klasse voor "klik"
grijstinten	bw	bwOnMouseOver	bwOnClick
contrast	contrast	contrastOnMouseOver	contrastOnClick
sepia	sepia	sepiaOnMouseOver	sepiaOnClick
negatief	invert, negative	invertOnMouseOver	invertOnClick
zacht vervagen	softblur	softblurOnMouseOver	softblurOnClick
sterk vervagen	strongblur	strongblurOnMouseOver	strongblurOnClick

Voorbeeld:

<img src="images/cat.jpg" class="bw invertOnMouseOver sepiaOnClick"/>

"Spin" en "fade" vormen 2 afzonderlijke filters voor een muis-over-effect:

Voorbeeld:

<img src="images/foto.jpg" class="spin"/> 
<img src="images/foto.jpg" class="fade"/>

d. Maskers

Een masker is een techniek om bepaalde gebieden van een afbeelding te "verbergen". Zo kan je een afbeelding achter de volgende "vormen" (CSS-klassen) maskeren: textballoon, star, message, circle, fadetop, fadingcircle.

<img src="images/cat.jpg" class="textballoon"/> 
<img src="images/cat.jpg" class="star"/> 
<img src="images/cat.jpg" class="message"/> 
<img src="images/cat.jpg" class="circle"/> 
<img src="images/cat.jpg" class="fadetop"/> 
<img src="images/cat.jpg" class="fadingcircle"/>

Het resultaat in een webpagina waar CSSBIB wordt gebruikt:

11. Achtergrondafbeelding

a. Dekkende afbeelding

Als je een achtergrondafbeelding toevoegt aan een element kan je de afbeelding door het toevoegen van de klasse "coverme" de volledige achtergrond laten bedekken.

Naast het toevoegen van de klasse “coverme", geef je aan het element een id. Aan dat id ken je in je stijldocument een achtergrondafbeelding toe.

De HTML-code:

<div class="row coverme" id="mijnfoto"></div>

De CSS-code:

#mijnfoto{ 
       background-image: url(images/beeld.jpg); 
}

b. Parallax

Als je een achtergrondafbeelding toevoegt aan een element kan je de afbeelding door het toevoegen van de klasse “parallax" een parallax-animatie genereren.

Naast het toevoegen van de klasse “parallax", geef je aan het element een id. Aan dat id ken je in je stijldocument een achtergrondafbeelding toe.

<div class="row parallax" id="mijnfoto"></div>

In je CSS-bestand bepaal je niet enkel welk beeld je als achtergrond wil gebruiken, maar ook de hoogte van het element. Die hoogte mag niet hoger zijn dan de afbeelding zelf.

#mijnfoto{
     background-image: url(images/beeld.jpg);
     height:300px;
}

12. YouTube, VIMEO, Google Maps... responsive insluiten

Het stappenplan hieronder gebruikt het voorbeeld van een ingesloten YouTube-film, maar het werkt evenzeer voor insluitcode van VIMEO, Google Maps of wat dan ook.

1. Kopieer de YouTube-insluitcode:

Bijvoorbeeld:

<iframe src="https://www.youtube.com/embed/Z3jhVHqd67g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

2. Plak de code tussen de volgende tag met class “onlinevideo":

<div class="onlinevideo">       
        <iframe src="https://www.youtube.com/embed/Z3jhVHqd67g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 
</div>

3. Verwijder de parameter “width", “height" en/of "frameborder" (als die aanwezig zijn):

<div class="onlinevideo">
   <iframe src="https://www.youtube.com/embed/Z3jhVHqd67g" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

13. Bijzondere teksteffecten

a. Tekstschaduw

Met de klasse “textshadow” geef je een element een schaduweffect.

<h3 class=”textshadow”>Hier komt mijn titel</h3>

b. Tekstmasker

Een masker op een titel kan een bijzonder mooi effect opleveren. Dit houdt in dat de tekstkleur vervangen wordt door een uitsnede van de foto.

Hiervoor voeg je de CSS-klasse "textmask" toe je titel.
Vervolgens geef je de titel een ID.
Aan dit ID ken je in CSS vervolgens een achtergrondafbeelding toe.

HTML-code:

<h1 class="textmask" id="titelmasker">HIER KOMT DE SLOGAN</h1>

CSS-code:

#titelmasker{     
     background-image:url(images/cat.jpg); 
}

c. Flexibele tekstomloop

Zoals je (vermoedelijk, hopelijk :-) ) weet kan je afbeelding met behulp van de stijlregel "float" links of rechts langs een tekst uitlijnen. Uitlijning volgt steeds het rechthoekige kader van de afbeelding of het HTML-element waarop je een "float" hebt toegepast. Het is echter ook mogelijk om tekst cirkelvormig rond een afbeelding te laten vloeien.

De HTML-code:

<p><img src="images/cat.jpg" class="floatcircle imagethird"/>De Palm Desertbands werden   
lokaal bekend door veelvuldige optredens in bars en partijen, maar vooral in en rond de   
geïsoleerde woestijngebieden en steden van de Coachella Valley. De instrumenten en   
versterkers werden aangedreven door een generator. Met name de band Kyuss is bekend   
geworden door de "generator parties". Plekken waar de feesten werden gehouden waren   
vooral 'The Nudist Colony' (Desert Hot Springs/Yucca Valley), 'The Iron Door' (Indio  Hills),  
'Shot Gun Flats' (Sky Valley), 'Mecca Banks' (Afwateringssysteem in Mecca)...</p>