Aan de slag

CIBG Design System gebruiken

Om het CIBG Design System te gebruiken heb je de CIBG Huisstijl nodig. Op deze pagina lees je hoe je deze kunt verkrijgen, wat er in de huisstijl package zit en hoe je het gebruikt.

Downloaden

Buiten het CIBG

Werk je buiten het CIBG aan een project voor het CIBG of een andere Rijksoverheid organisatie? Neem dan contact met ons op wanneer je het Design System wilt gebruiken. In overleg stellen we het CIBG Huisstijl package dan als ZIP bestand via een download-link beschikbaar.

Binnen de CIBG omgeving

Werk je binnen het CIBG aan een project? Dan kun je via de @CIBG NPM respository de huisstijl gebruiken als dependency in je project. Als je als ontwikkelaar voor het CIBG werkt heb je hiervoor waarschijnlijk al geldige credentials. Heb je deze credentials nog niet? Vraag dan aan een beheerder van AzureDevops naar deze credentials.

Installeer de laatste versie van de Huisstijl door via deze toe te voegen aan de NPM dependencies:

npm install --save @cibg/huisstijl@latest

Structuur

De CIBG Huisstijl bevat de volgende directories. Wanneer je de deze directories kopieert naar de project dan is het van belang om de structuur te behouden, zodat de relatieve paden naar de lettertypes, afbeeldingen en iconen juist zijn.

/css

Hierin staan de CSS bestand(en) van de huisstijl. Meestal heb je hiervan alleen het bestand huisstijl.min.css nodig. Subfolders hierin zijn back-office en components. Deze subfolders heb je alleen in specifieke gevallen nodig.

/fonts

Hierin zitten de font-families van de Rijksoverheid die in de Huisstijl gebruikt worden en een CIBG icon-font voor een deel van de iconen. Het enige format dat we ondersteunen is *.woff.

/icons

Hierin zitten een aantal (legacy) iconen. Op het bestand favicon.ico zulllen op termijn de legacy iconen worden uitgefaseerd.

/images

Hierin zit een combinatie van iconen en afbeeldingen. Om historische redenen is er deels overlap met de /icons folder, omdat een deel van de afbeeldingen eigenlijk iconen zijn.

/scss

Hierin zit het bestand variables.scss met de Bootstrap variabelen overrides zoals die in de Huisstijl gebruikt worden. Dit bestands is handig als je zelf een uitbreiding wilt maken op de Huisstijl en hierbij de variabelen wilt gebruiken.

Importeren in project

Na het downloaden moet je de Huisstijl bestanden importeren in je project. Per project zal verschillen hoe je dit doet, maar in de regel zul je in het build proces de bestanden van de Huisstijl kopiƫren naar je project. Het is handig dit te automatiseren, zodat je makkelijk naar een nieuwe versie van de Huisstijl kunt updaten.