Système de design GCDémarrerInstallation de Système de design GC
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Installation dans un projet HTML

Utilisez les composants Web de Système de design GC directement dans un projet HTML. Ces composants s’adaptent à tout cadriciel et ont un comportement similaire aux éléments HTML natifs. Utilisez cette option pour les situations suivantes :
  • Sites statiques
  • Plateformes CMS
  • Node.js
  • Java
  • Svelte
  • .NET
Si vous utilisez les cadres React, Angular ou Vue, consultez la page d’installation pour connaître les options propres à chaque cadre.

Sélectionner le paquet utilisé

Sélectionnez parmi les options suivantes, puis suivez les étapes pour installer et utiliser les composants de Système de design GC dans votre projet.
Instructions d’installation avec npm

1. Installer le paquet

Naviguez vers le dossier racine de votre projet et exécutez la commande suivante : 
npm install @gcds-core/components

2. Inclure Système de design GC dans votre projet

Ajoutez les balises link suivantes à l’intérieur de la balise head de vos fichiers HTML pour charger Système de design GC : 
<!-- Système de design GC -->
<link
  rel="stylesheet"
  href="/node_modules/@gcds-core/components/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="/node_modules/@gcds-core/components/dist/gcds/gcds.esm.js"
></script>
3. Ajouter la feuille de style des Raccourcis CSS Nous recommandons d’utiliser les raccourcis CSS de Système de design GC pour appliquer des classes utilitaires CSS prédéfinies. Ces classes sont conformes à nos composants et aident à construire plus rapidement tout en assurant l’uniformité. L’utilisation des Raccourcis CSS dans votre projet n’est pas obligatoire. Ils peuvent être ajoutés à votre CSS existant. Naviguez vers le dossier racine de votre projet et exécutez la commande suivante : 
npm install @gcds-core/css-shortcuts
Ajoutez la balise link suivante à l’intérieur de la balise head de vos fichiers HTML : 
<!-- Raccourcis CSS de Système de design GC  -->
<link
  rel="stylesheet"
  href="/node_modules/@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css"
/>
4. Commencer à créer Une fois le système de design installé, vous pouvez commencer à intégrer le code dont vous avez besoin dans votre projet. Commencer par un modèle Commencez avec un modèle de page de base. Il combine plusieurs composants pour des pages communes du GC. Commencer par les composants Ajoutez des composants pour créer un produit qui répond à vos besoins. Commencer par le code Ajoutez des classes de style à votre code HTML à l’aide des Raccourcis CSS. Ceci est pour votre code personnalisé.
Instructions d’installation avec CDN

1. Sélectionner comment recevoir des mises à jour

Vous avez deux options pour recevoir des mises à jour du CDN :
  • Utiliser la version épinglée pour la stabilité (recommandé).
  • Utiliser @latest pour obtenir des mises à jour automatiques.

a. Utiliser la version épinglée (recommandé)

Il est fortement recommandé d’utiliser cette option pour garantir la stabilité et la prévisibilité de votre projet. Ajoutez le code suivant à la balise head de vos fichiers HTML pour charger Système de design GC. Assurez-vous d’indiquer la version actuelle. Version actuelle : Version , publiée le . 
<!-- Système de design GC -->
<link
  rel="stylesheet"
  href="https://cdn.design-system.canada.ca/@gcds-core/components@||version||/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="https://cdn.design-system.canada.ca/@gcds-core/components@||version||/dist/gcds/gcds.esm.js"
></script>
Remarque : <script type=“module”> doit être chargé depuis un serveur. Pour le développement local, utilisez <script nomodule>.
Étapes suivantes
Le code restera inchangé jusqu’à ce que vous mettiez à jour manuellement la version dans les URL CDN, ce qui est idéal pour les environnements de production. Vérifiez régulièrement s’il y a des nouvelles versions de Système de design GC afin de mettre à jour la dernière version épinglée.

b. Utiliser la version @latest (la dernière version)

Utilisez la balise @latest pour insérer la plus récente version de Système de design GC dans votre projet. Remplacez le numéro de version par cette balise. Bien que cette approche vous évite la mise à jour manuelle des versions, elle court le risque d’introduire des modifications qui entraînent une rupture de compatibilité avec le code base à mesure que les nouvelles versions sont automatiquement appliquées.

2. Ajouter la feuille de style des Raccourcis CSS

Nous recommandons d’utiliser les raccourcis CSS de Système de design GC pour appliquer des classes utilitaires CSS prédéfinies. Ces classes sont conformes à nos composants et aident à construire plus rapidement tout en assurant l’uniformité. L’utilisation des Raccourcis CSS dans votre projet n’est pas obligatoire. Ils peuvent être ajoutés à côté de votre CSS existant. Vous avez les mêmes options que ci-dessus :
  • Utiliser la version épinglée pour la stabilité (recommandé)
  • Utiliser @latest pour obtenir des mises à jour automatiques.

a. Utiliser la version épinglée (recommandé)

Ajoutez la balise link suivante à l’intérieur de la balise head de vos fichiers HTML. Assurez-vous d’indiquer la version actuelle. 
<!-- Raccourcis CSS de Système de design GC -->
<link
  rel="stylesheet"
  href="https://cdn.design-system.canada.ca/@gcds-core/css-shortcuts@||shortcuts-version||/dist/gcds-css-shortcuts.min.css"
/>

b. Utiliser la version @latest (la dernière version)

Utilisez la balise @latest pour insérer la plus récente version de Raccourcis CSS dans votre projet. Remplacez le numéro de version par cette balise.
3. Commencer à créer Une fois le système de design installé, vous pouvez commencer à intégrer le code dont vous avez besoin dans votre projet. Commencer par un modèle Commencez avec un modèle de page de base. Il combine plusieurs composants pour des pages communes du GC. Commencer par les composants Ajoutez des composants pour créer un produit qui répond à vos besoins. Commencer par le code Ajoutez des classes de style à votre code HTML à l’aide des Raccourcis CSS. Ceci est pour votre code personnalisé.
Besoin d'aide? Si vous avez besoin d'aide, n'hésitez pas à nous écrire et nous vous aiderons à partir du bon pied.
2026-09-02