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 het 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.