Box model ​
Het box-model in onze interface ​
In onze Campus Experience System (CXS) richtlijnen vormt het box-model de basis voor de opmaak en positionering van elementen. Het box-model beschrijft de ruimtelijke relatie tussen de inhoud van een element en zijn omringende omgeving, zoals padding, borders en margins. Dit model biedt ontwerpers en ontwikkelaars een gestandaardiseerde manier om te bepalen hoe elementen ruimte innemen en zich verhouden tot andere onderdelen binnen de interface.
De opbouw van het box-model ​
Een element in het box-model bestaat uit vier lagen:
- Content: De eigenlijke inhoud van het element, zoals tekst of afbeeldingen.
- Padding: De ruimte direct om de inhoud heen, die helpt de leesbaarheid te verbeteren door voldoende afstand te houden tussen de content en de rand van het element.
- Border: Een optionele lijn rondom de padding en de inhoud, die kan worden gebruikt om visuele scheiding of nadruk toe te voegen.
- Margin: De ruimte rond de buitenrand van het element, waarmee afstand wordt gecreëerd ten opzichte van andere elementen. In ons ontwerp vermijden we marges zoveel mogelijk; in plaats daarvan gebruiken we de
gap-eigenschap binnen flex- en grid-layouts om consistente ruimte tussen elementen te beheren.
Praktische tips voor ontwerpers en ontwikkelaars ​
- Beperkt gebruik van margins: Om consistentie te waarborgen en ongewenste visuele variatie te voorkomen, vermijden we het gebruik van margins waar mogelijk. In plaats daarvan creëren we ruimte tussen elementen met behulp van de
gap-eigenschap, vooral binnen flex- en grid-containers. - Focus op padding voor interne ruimte: Padding speelt een belangrijke rol in de leesbaarheid en de algehele ervaring door de inhoud voldoende ruimte te geven. Zie ook Relaties.
- Border als visueel hulpmiddel: Borders worden alleen toegevoegd als visueel hulpmiddel, bijvoorbeeld om elementen te groeperen of bepaalde inhoud te benadrukken. Zie ook border.