Trousse de codes du système de conception du GNB
La trousse de démarrage contient tous les fichiers dont vous avez besoin pour commencer à créer des expériences cohérentes et accessibles. Elle inclut des feuilles de style en cascade (CSS) et du JavaScript, des polices Web, des images et une page HTML de démarrage qui vous permettent de vous lancer sans délai.
S’inscrire sur la liste de diffusion
Obtenez des renseignements sur les dernières versions, les nouvelles fonctionnalités et les prochains ateliers pour les développeurs.
Ajouter du CSS au projet
La feuille de style de la trousse de codes du système de conception contient tous les styles nécessaires et applicables, y compris le modèle de disposition en grille.
Les noms de classe des composants portent déjà le préfixe gnb- pour éviter les conflits avec d’autres plateformes et permettre l’intégration sûre à d’autres bibliothèques et cadres d’applications.
HTML
<!-- Mettez ceci dans le <head> de vos pages -->
<link rel="stylesheet" href="../css/gnb-1.0.0" type="text/css" />
Ajouter du JavaScript au projet
La trousse de codes du système de conception du GNB contient tous les fichiers relatifs aux composants qui utilisent JavaScript. Vous pouvez appliquer tous les codes par le biais de fichiers distincts ou d’un dossier unique regroupant tous les fichiers, selon ce qui convient le mieux au projet.
HTML
<!-- Mettez ceci juste avant la balise de fermeture </body> dans vos pages -->
<script src="../js/gnb-1.0.0.js" type="text/javascript"></script>
Fichiers JavaScript pour composants individuels
| Composant | Nom du fichier |
|---|---|
| Accordéons | gnb-accordions-1.0.0.js |
| Formulaires | gnb-forms-1.0.0.js |
| Navigation principale | gnb-menus-1.0.0.js |
| Fenêtres modales | gnb-modals-1.0.0.js |
| Barre de progression | gnb-progress-1.0.0.js |
| Barre de navigation en haut fixe | gnb-sticky-top-1.0.0.js |
| Onglets | gnb-tabs-1.0.0.js |
| Étiquettes | gnb-tags-1.0.0.js |
Héberger les polices
Si vous devez héberger les polices localement, téléchargez notre fichier de polices Web pour l’inclure au projet.
Déposez les deux dossiers du fichier d’archives ZIP à la racine du projet, puis mettez le code à
jour dans l’élément <head> en incluant des liens vers les fichiers CSS du fichier
de polices Web.
Télécharger le fichier de polices Web
HTML
<!-- Mettez ceci dans le <head> de vos pages -->
<link rel="stylesheet" type="text/css" href="../css/gnb-fonts-1.0.1.css" />
<link rel="stylesheet" type="text/css" href="../css/fontawesome-6.4.0.css" />
Ressources
Les principes du système de conception guident notre approche du développement de l’interface frontale et vous permettent de créer des expériences réactives, accessibles et optimisées pour une utilisation sur tous les types d’appareils.