Labo 6 - CSS Frameworks

Don't reinvent the wheel. In dit labo leerden we werken met Bootstrap om snel responsieve lay-outs te bouwen en integreerden we externe JavaScript-bibliotheken zonder zelf complexe code te schrijven.

Beschrijving

CSS Methodologies

Voor we in Bootstrap doken, hebben we eerst de theoretische basis gelegd. In een "kleine oefening" hebben we een productkaart gestijld op twee manieren:

  • Functional CSS: Gebruik maken van utility classes (zoals Tailwind of Bootstrap dat doen).
  • OOCSS (Object Oriented CSS): Het scheiden van structuur en skin voor herbruikbare componenten.

Bootstrap Project: Puppy Adoptie

De hoofdoefening bestond uit het nabouwen van een website op basis van screenshots, met behulp van Bootstrap 5. De focus lag op:

  • Het Grid System: Responsieve rijen en kolommen voor de adoptie-kaarten.
  • Componenten: Een collapsible navbar, een hero-sectie en een werkende carousel voor succesverhalen.

JavaScript Integration

Hoewel we zelf geen JavaScript schreven, hebben we geleerd hoe we een externe bibliotheek implementeren. We gebruikten baguetteBox.js om een werkende, responsieve lightbox-galerij te maken voor de foto's van de puppy's.

Doelstellingen

  • Begrijpen wat een CSS Framework is en componenten gebruiken.
  • Het verschil begrijpen tussen Functional CSS en OOCSS.
  • Een plug-and-play JavaScript bibliotheek (baguetteBox) implementeren.
  • Een responsieve Bootstrap layout maken (Grid, Cards, Navbar).
  • Een Bootstrap Carousel correct configureren.
  • Documentatie leren lezen en toepassen.
Ga naar de oplossing

Reflectie

  • Wauw!

    Het is indrukwekkend hoe snel je een volledige lay-out kunt neerzetten met Bootstrap. De classes voor marges en padding (zoals mb-3) werken heel intuïtief.

  • Au!

    Het overschrijven van standaard Bootstrap-stijlen kan soms frustrerend zijn door specificiteit. Ook was het even zoeken hoe baguetteBox precies geïnitialiseerd moest worden.

Gerelateerde links

Gebruikte documentatie:

You can also find me on