Introduction au Système de conception pour l'Ontario (pour les développeurs)

Si vous êtes un développeur, vous pouvez commencer votre aventure ici, question de vous assurer d’avoir tout ce dont vous avez besoin pour utiliser le système de conception.


Installation de la trousse de distribution

Dans la trousse de distribution, vous trouverez tous les fichiers nécessaires (HTML, CSS/SCSS, JS) pour intégrer vos projets. La trousse comprend également les fichiers de polices de caractères et de favicônes. Vous trouverez les variables du code en SCSS et leur utilisation dans chaque partie de composantes.

Télécharger la dernière version (0.12.11)

Voir les notes de version et versions antérieures

Nous vous recommandons de créer un dossier dans lequel vous placerez tous vos fichiers pour qu’ils restent cohérents et séparés des autres fichiers du projet. Lorsqu’une nouvelle version est publiée, vous pouvez facilement remplacer ce dossier par la nouvelle version.


Utilisation

  1. Décompressez la trousse de distribution
  2. Renommez le nom du dossier extrait en lui donnant le nom ontario-design-system
  3. Déplacez ce dossier dans votre projet (c’est-à-dire au même endroit que vos autres actifs statiques)
  4. Importez ontario-design-system/styles/ds-theme.css (ou ds-theme.min.css) globalement dans votre propre projet. Exemple utilisant les codes en SCSS et CSS : @import "ontario-design-system/styles/ds-theme.css";

Maintenant que le système de conception fait partie de votre projet, tous les styles globaux sont appliqués automatiquement (styles d’en-tête, espacement des paragraphes, etc.). Vous pouvez également utiliser n’importe quelle catégorie de composantes pour créer des boutons, des cases à cocher, etc.


Création de composantes personnalisées

La trousse de distribution du système de conception contient des fichiers SCSS avec des variables qui facilitent la création de nouvelles composantes et pages personnalisées en fonction du système de conception. Il suffit d’importer ontario-design-system/styles/sass/_variables-import.scss dans votre composante. Ce fichier importera plusieurs catégories de variables à la fois (grille, couleur, police, espacement, etc.).

Exemple : variables de couleur

.ontario-callout-alert {
  border-color: $ontario-colour-alert;
}


Aidez-nous à améliorer le système de conception

Si vous avez des suggestions, des conseils ou des questions pour l’équipe du système de conception, sachez que nous serons heureux d’en prendre connaissance.

Découvrez quoi faire si vous ne trouvez pas l’élément dont vous avez besoin.

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.