CSS framework installeren

Er zijn meestal drie manieren om een CSS-framework te te installeren: Via CDN (Content Delivery Network), downloaden en handmatig toevoegen aan het project, of installeren met package managers zoals npm of yarn.

Methode 1: Handmatig toevoegen aan het project

Een CSS-framework is in de basis alleen een css bestand, soms zitten er een of meerdere javascript bestanden bij. Deze kun je meestal gewoon downloaden vanaf de site van het framework en toevoegen aan jouw website.

1 2 3 4 5 6 7 8 9 10 11
<!-- Een css framework installeren is niet moeilijk --> <html> <head> <!-- Stylesheet komen vrijwel altijd in de head sectie --> <link rel="stylesheet" href="/bootstrap.min.css" /> </head> <body> <!-- Javascript includen gebeurd vaak net voor de sluittag. --> <script src="/bootstrap.min.js"></script> </body>

Methode 2: CDN (Content Delivery Network

Een Content Delivery Network (CDN), oftewel "inhoud bezorg netwerk", is een netwerk van servers die overal ter wereld staan. Op die servers staat een kopietje van bijvoorbeeld een CSS-framework. Jij mag als programmeur gratis gebruik maken van de code die op deze servers staat door er rechtstreeks mee te linken.

1 2 3 4 5 6
<!-- Regel 5 uit het vorige voorbeeld zou dan bijvoorbeeld zo worden --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384hhpuuCOmLASjC...ingekort" crossorigin="anonymous"> <!-- Regel 10 uit het vorige voorbeeld zou dan bijvoorbeeld zo worden --> <script src="https://cdn.jsdelivr.net/npm/bootstrap-voorbeeld/dist/js/bootstrap.bundle.min.js" integrity="sha384MrcW6ZM....ingekort" crossorigin="anonymous"></script>

Het integrity attribuut integrity="rAaReC0de"

Stel nou dat een server van een CDN gehackt wordt en de hacker het javascript bestand zou vervangen met malware? Dan zouden alle bezoekers van jouw website, maar ook alle bezoekers van al die duizenden andere websites die van het CDN gebruik maken geïnfecteerd raken. Om daar een stokje voor te steken is het integrity attribuut uitgevonden.

Integriteit controleren

Je ziet dat er een nieuw integrity=""attribuut is toegevoegd aan de <script> en aan de <link> tag. De combinatie van letters en cijfers die je daar ziet staan zijn de uitkomst van een sommetje, dit soort sommetjes noemen we cryptografische hashing functies. De input van het sommetje is de tekst in het bestand. De output van het sommetje een reeks letters en cijfers. Voordat jouw browser het bestand gaat gebruiken zal het eerst datzelfde sommetje uitvoeren met de inhoud van het bestand als input en het verwacht dan natuurlijk als ouptut precies dezelfde tekens als het in de integrity="" tag aantrof. Wanneer er ook maar 1 letter anders is zal de hash compleet anders zijn.

CDN: performance

Installeren via een CDN heeft een heel groot voordeel. Browsers cachen css en Javascript bestanden om deze snel te kunnen gebruiken. Bestanden die bij een CDN staan wijzigen zelden tot nooit en er wordt daarom ook hevig gebruik gemaakt van caching op deze bestanden. Als een bezoeker op een andere website die ook jouw framework gebruikt is geweest dan heeft de browser dat framework al, nog voordat de gebruiker op je website is geweest.

Methode 3: Met een package manager zoals npm of yarn.

Je kunt een framework ook installeren met npm of yarn dit die je vanaf je terminal/command prompt door iets te typen als npm install bootstrap. Na het installeren kun je de bestanden gaan gebruiken in je javascript code: import 'bootstrap/dist/css/bootstrap.min.css';.

Navigatie

« Frameworks in deze cursus Doelbewust ontwerpen »