Labo 06 - CSS Frameworks (Bootstrap)
Doel van de opdracht
- Begrijpen wat een CSS-framework is en waarvoor het wordt gebruikt.
- Onderzoeken welke componenten Bootstrap aanbiedt.
- Correct gebruikmaken van het Bootstrap grid-systeem.
- Een responsive website bouwen aan de hand van screenshots.
- Een werkende Bootstrap carrousel implementeren.
- Een plug-and-play JavaScript-bibliotheek (BaguetteBox) integreren.
- Inzicht krijgen in functional CSS en OOCSS.
Beschrijving
In dit labo heb ik kennisgemaakt met CSS-frameworks, met een focus op Bootstrap. Ik heb onderzocht welke componenten Bootstrap aanbiedt en hoe deze gebruikt kunnen worden om snel een responsive website op te bouwen.
Eerst heb ik een kleine oefening uitgewerkt waarbij ik een productcard twee keer heb gestyled: één keer met functional CSS en één keer met OOCSS, zonder gebruik te maken van een framework. Hierdoor kreeg ik een beter inzicht in de verschillen tussen beide methodes.
Vervolgens heb ik een volledige website nagemaakt aan de hand van screenshots. Hiervoor heb ik het Bootstrap grid-systeem gebruikt om een correcte layout te bekomen op desktop-, tablet- en mobiele schermgroottes.
De website bevat een vaste navigatiebalk, een hero-sectie, cards met adoptie mogelijkheden, een afbeeldingengalerij met BaguetteBox en een carrousel met succesverhalen. Tot slot heb ik een eenvoudige footer toegevoegd die netjes gecentreerd wordt weergegeven.
Gerelateerde links
Reflectie
Wow!
Dankzij Bootstrap kon ik zeer snel een responsive layout opbouwen zonder zelf veel CSS te moeten schrijven.
Aauw!
Het correct namaken van de layout op basis van screenshots vroeg veel aandacht voor detail en correcte Bootstrap classes.
Niet zeker?
Ik ben nog niet volledig zeker wanneer het beter is om een CSS-framework te gebruiken en wanneer een eigen CSS-oplossing de betere keuze is.