Installation de Système de design GC
Système de design GC est en phase de test. Les fonctionnaires peuvent en faire l’essai. Soyez parmi les premiers à l’adopter. Installez-le et commencez à expérimenter!
Pourquoi Système de design GC est la solution pour vous
Faites appel à Système de design GC pour répondre aux exigences du gouvernement du Canada en matière de prestation de services et de communication numérique.
Simplifiez votre prestation numérique.
Travaillez dans l’infrastructure qui vous convient.
Aidez-nous à créer des expériences de service uniformes pour le gouvernement du Canada.
Comment fonctionnent nos mises à jour
Les changements apportés à Système de design GC (SDGC) se font en une seule mise à jour qui comprend les unités de style, les composants et les modifications non destructrices aux unités de style existantes. Système de design GC est indépendant de la Boîte à outils de l'expérience Web (BOEW) et de GCWeb.
1. Choisissez l’option qui vous convient le mieux
La bibliothèque de composants SDGC fonctionne dans de multiples infrastructures ou peut être utilisée comme telle. Choisissez votre environnement de développement et suivez les instructions pour commencer votre projet.
2. Pour commencer
Sélectionnez une option à l'étape 1 pour obtenir les instructions d'installation.
2. Pour commencer
Si vous utilisez Angular, suivez ces instructions pour installer les composants SDGC.
Installation à l'aide de npm
Naviguez jusqu'au dossier racine de votre projet et exécutez :
npm install @cdssnc/gcds-components @cdssnc/gcds-components-angularInsérez le code suivant dans le fichier app.module.ts de votre application :
import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';
@NgModule({
declarations: [
...
],
imports: [
...,
GcdsComponentsModule
],
providers: [],
bootstrap: [...]
})
export class AppModule { }Insérez le code suivant dans le fichier styles.scss de votre application :
@import '../node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css';2. Pour commencer
Si vous utilisez React, suivez ces instructions pour installer les composants SDGC.
Installation à l'aide de npm
Naviguez jusqu'au dossier racine de votre projet et exécutez :
npm install @cdssnc/gcds-components @cdssnc/gcds-components-reactInsérez le code suivant dans le fichier index.js de votre application :
import '@cdssnc/gcds-components-react/gcds.css'2. Pour commencer
Si vous utilisez Vue, suivez ces instructions pour installer les composants SDGC.
Installation à l'aide de npm
Naviguez jusqu'au dossier racine de votre projet et exécutez :
npm install @cdssnc/gcds-componentsInsérez le code suivant dans le fichier main.js de votre application :
import { applyPolyfills, defineCustomElements } from '@cdssnc/gcds-components/loader';
import '@cdssnc/gcds-components/dist/gcds/gcds.css';
applyPolyfills().then(() => {
defineCustomElements();
});2. Pour commencer
Si vous utilisez npm (node package manager) sans infrastructure, suivez ces instructions pour installer les composants SDGC.
Installation à l'aide de npm
Naviguez jusqu'au dossier racine de votre projet et exécutez :
npm install @cdssnc/gcds-componentsInsérez le code suivant dans l'élément <head> de votre site :
<!-- Icons Font Awesome (pour avoir accès aux icônes, installer Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">
<!-- GC Design System -->
<link rel="stylesheet" href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css">
<script type="module" src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.js"></script>2. Pour commencer
Pour installer les composants SDGC sans infrastructure, suivez ces instructions.
Ajoutez le code
Insérez le code suivant dans l'élément <head> de votre projet :
<!-- Icons Font Awesome (pour avoir accès aux icônes, installer Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">
<!-- GC Design System -->
<link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.css">
<script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.js"></script>2. Pour commencer
Vous ne trouvez pas notre bibliothèque Figma? Suivez le guide :
2. Pour commencer
Vous ne trouvez pas votre infrastructure dans la liste? Écrivez-nous pour obtenir des conseils.
3. Prochaines étapes
Pour chaque design, vous trouverez le code qu'il vous faut accompagné de lignes directrices. Nous avons prédéfini la couleur, le type et l'espacement à l'aide d'unités de style qui forment la base de tout design.
Commencez par parcourir la liste des composants qui conviennent à votre produit et à vos utilisateur·rice·s. Ensuite, ouvrez le projet que vous avez créé, insérez le code et commencez à travailler.