Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

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

Si vous êtes un développeur, commencez ici pour vous assurer que vous avez tout ce dont vous avez besoin pour utiliser le Système de conception.

Options

Il existe deux façons de développer votre site Web ou votre application avec le Système de conception pour l’Ontario.

Trousse de distribution

  • L’option la plus souple pour créer des applications/sites personnalisés
  • Ensemble complet de composantes du Système de conception
  • Inclut des styles complets, à la fois en CSS et en SASS.
  • Fourni avec des exemples HTML et JS
  • Fichier Zip facile à télécharger

En savoir plus sur la trousse de distribution.

Trousses npm (gestionnaire de trousse Node)

  • Options modulaires pour créer des applications ou des sites personnalisés
  • Comprend tous les styles et les actifs
  • Remplace la trousse de distribution
  • Versions lancées au moyen du gestionnaire de trousse Node
  • Lancements en continu

Pour en savoir plus sur les trousses npm.

Composantes Web

  • Des éléments HTML riches et prêts à être utilisés
  • Prise en charge des cadres HTML et JavaScript
  • Créé et testé pour suivre le Système de conception pour l’Ontario
  • Publication des versions par npm
  • Publication en continu

En savoir plus sur les composantes Web.


À propos de la trousse de distribution

Pour commencer à utiliser le Système de conception dans votre propre application/site, vous pouvez utiliser la trousse de distribution officielle du Système de conception pour l’Ontario.

La trousse de distribution combine l’échantillon de code de chaque composante avec tous les fichiers nécessaires (HTML, CSS/SCSS, JavaScript) à intégrer dans vos projets de développement.

La trousse comprend également des actifs, tels que :

  • fichiers de police
  • le jeu de favicons de l’Ontario

Vous trouverez les variables SCSS et leur utilisation dans la section de chaque composante.

Communiqués précédents

Lisez les notes de mise à jour et téléchargez les versions précédentes.

Obtenir la trousse de distribution

Télécharger manuellement

Créez un dossier dans lequel vous pourrez placer tous vos fichiers afin de les garder cohérents et séparés des autres fichiers du projet (par exemple, dans un dossier appelé vendor).

Lorsqu’une nouvelle version est publiée, vous pouvez facilement remplacer le contenu de ce dossier par la nouvelle version.

  1. Télécharger la dernière version (1.7.0)
  2. Dézippez la trousse de distribution.
  3. Renommez le dossier extrait en ontario-design-system.
  4. Déplacez ce dossier dans votre projet (par exemple, au même endroit que vos autres actifs statiques).
  5. Importez globalement ontario-design-system/styles/ds-theme.css (ou ds-theme.min.css) dans votre propre projet. Pour plus de détails, lisez le guide d’importation.

Télécharger avec un script

Vous pouvez également intégrer la trousse de distribution dans votre projet à l’aide d’un script (au lieu de le faire manuellement), et l’organiser en fonction de vos besoins.

Par exemple, le script suivant téléchargera une version particulière et déplacera son contenu dans un dossier sous src/assets/vendor.

Remarque : n’oubliez pas de mettre à jour le numéro DS_VERSION pour qu’il corresponde à la version que vous souhaitez télécharger.

export DS_VERSION=1.7.0 && \
    export DS_ZIP_NAME=ontario-design-system.zip && \
    export VEN_DIR=src/assets/vendor  && \
    export DS_UNZIP_DIR=$VEN_DIR/ontario-design-system && \
    curl https://designsystem.ontario.ca/dist/ontario-design-system-dist-$DS_VERSION.zip > $VEN_DIR/$DS_ZIP_NAME && \
    unzip -o $VEN_DIR/$DS_ZIP_NAME -d $DS_UNZIP_DIR && \
    rm $VEN_DIR/$DS_ZIP_NAME && \
    rm $DS_UNZIP_DIR/version-release-notes-*.* && \
    rm -rf $DS_UNZIP_DIR/html-samples && \
    rm $DS_UNZIP_DIR/index.html && \
    rm $DS_UNZIP_DIR/package.json && \
    rm -rf $DS_UNZIP_DIR/styles/components && \
    rm -rf $DS_UNZIP_DIR/styles/sass && \
    rm -rf $DS_UNZIP_DIR/fonts/ds-fonts.zip

Vous pouvez personnaliser les éléments que le script supprime si vous souhaitez les conserver dans votre projet.

Importez les styles

Dans votre fichier CSS principal, ajoutez une instruction d’importation pour importer les styles du Système de conception dans votre projet.

À l’aide de @import et du chemin d’accès à vos ressources, ajoutez les styles Design System au CSS de votre application/site.

@import '<path-to-vendor-dir>/vendor/ontario-design-system/styles/ds-theme.min.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 toutes les classes de composantes pour créer des boutons, des cases à cocher, etc.

Contenu de la trousse

Dossier Description
fonts Polices de caractères - contient diverses versions de chaque police, notamment TTF, WOFF, WOFF2 et SVG.
html-samples Des échantillons HTML qui donnent un exemple du HTML et du CSS de chaque composante.
icons Fichiers d’icônes - apprenez-en davantage sur les icônes dans les conseils sur les icônes primaires et les icônes secondaires.
index.html Exemple mettant en évidence les différents composantes qui peuvent être ouverts dans un navigateur.
logos Copies du logo de l’Ontario.
scripts Fichiers JavaScript de soutien pour divers composantes du Système de conception. Par exemple, un exemple de code de défilement de retour en haut.
styles Styles utilisés par le Système de conception, y compris les styles des composantes ainsi que les styles combinés (ds-theme.css et ds-theme.min.css).

Création de composantes personnalisées

La trousse de distribution du Système de conception contient des fichiers SCSS avec des variables. Ceux-ci peuvent vous aider à créer de nouveaux composantes et pages personnalisés en conformité avec les normes du Système de conception.

Il suffit d’importer ontario-design-system/styles/sass/_variables-import.scss dans votre composante. Ce fichier va importer plusieurs catégories de variables en une seule fois (grille, couleur, police, espacement, etc.).

Exemple : variables de couleur

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

Logiciels requis

En interne, nous utilisons Node.js 16 pour créer le site statique, mais en externe, de nombreuses personnes travaillant avec le package dist Design System auront besoin de SASS et SVGxUse afin de pouvoir bénéficier d’une expérience d’utilisation optimale du système de conception.

Nos versions sont les suivantes :

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