Een website bouwen in Bricks is snel. Een consistente website bouwen — waarbij elke knop er hetzelfde uitziet, elke sectie dezelfde spacing heeft, en aanpassingen in één keer doorvoeren op elke pagina — dat vergt structuur. Die structuur lever je via globale klassen en templates.
Wat zijn globale klassen?
Een globale klasse is een herbruikbare stijlregel die je één keer definieert en op meerdere elementen toepast. Stel je voor dat je op tachtig pagina’s een knop hebt. Met een globale klasse verander je de kleur van al die knoppen in één aanpassing — zonder dat je elke pagina handmatig hoeft te openen.
In Bricks sla je de stijlinstellingen van een element op als klasse. Die klasse verschijnt in een centrale bibliotheek. Voortaan sleep je de klasse op elk nieuw element. Het is het equivalent van CSS-klassen, maar dan visueel beheerd vanuit de builder zelf.
Waarom globale klassen onmisbaar zijn
Zonder globale klassen bouw je inconsistent. Je stelt op pagina A een padding in van 20px, op pagina B van 24px, en op pagina C van 16px. Niemand merkt het direct — totdat de klant vraagt of je “alle tussenruimtes wat groter” kunt maken. Dan begin je een uur lang te zoeken en aan te passen.
Met globale klassen definieer je jouw design tokens eenmalig. Consistentie is geen discipline meer — het is de standaard die automatisch gehandhaafd wordt.
Bricks Templates: hergebruik op structuurniveau
Naast klassen heeft Bricks een systeem van templates. Een template is een opgeslagen set van elementen — een header, een footer, een hero-sectie — die je op meerdere pagina’s of posts kunt hergebruiken.
Templates in Bricks werken met voorwaarden. Je stelt in: “gebruik deze header op alle pagina’s”, of “gebruik dit template uitsluitend op de categoriepagina van Diensten”. Dat geeft je de flexibiliteit om per pagina-type een andere layout te tonen, terwijl je niet voor elke pagina opnieuw begint.
Het verschil tussen globale en sectie-templates
Bricks kent twee typen templates. Globale templates — voor header, footer en popups — worden automatisch geladen op de pagina’s waarvoor ze zijn ingesteld. Sectie-templates zijn opgeslagen blokken die je handmatig op een pagina plaatst als je ze nodig hebt, als een soort bibliotheek van herbruikbare secties.
In de praktijk gebruik je beide. De globale templates zorgen voor de vaste structuur. De sectie-templates versnellen de bouw van nieuwe pagina’s doordat je bewezen secties direct kunt invoegen en aanpassen.
Zo bouw je een design system in Bricks
Begin met je typografie en kleurpalet. Stel CSS-variabelen in voor je primaire kleur, je achtergrondkleur, en je font-groottes. Maak daarna globale klassen voor je meest gebruikte elementen: knoppen, sectie-padding, card-containers, headings.
Bouw vervolgens je header en footer als template, en stel de condities in zodat ze op elke pagina laden. Je hebt dan een fundament waarop je alle pagina’s kunt bouwen zonder steeds opnieuw dezelfde beslissingen te nemen.
Het resultaat is een website die niet alleen snel gebouwd is, maar ook snel aan te passen valt — nu en in de toekomst. Lees ook waarom we Bricks Builder als basis kiezen voor elk project.