Fondamentaux

Notre charte graphique met en place des normes
à respecter pour un meilleur fonctionnement du
Design System.

Éléments permettant de rendre compatible et accessible les différents produits de la CNSA sur tous les appareils et tailles d’écran.

Caractéristiques

Les grilles sont enregistrées dans Figma. Pour les utiliser, sélectionner la Frame à laquelle vous voulez appliquer la grille, puis choisissez la bonne taille dans la liste déroulante des Grid styles.

Web

Mise en page

Valeurs

Largeur maximum du contenu

x-small

de 0 à 599 px

-

Small

de 600 à 904 px

-

Medium

de 905 à 1230 px

-

Large

de 1240 à 1439 px

-

x-large

1440 px et plus

1128 px

Mobile

Mise en page

Valeurs

Largeur maximum du contenu

Mobile

de 0 à 599 px

320px * 569px

Tablette verticale

de 600 à 904 px

720px * 990px

Tablette horizontale

de 905 à 1230 px

1024px * 720px


Grilles

Desktop

Grand format

Petit format


Tablette

Horizontale

 

Verticale


Mobile

 


Implémentation

Plusieurs classes CSS sont mises à disposition afin d’implenter les mises en pages présentées ci-dessus. Elle sont présentées sur la page Classes CSS/Grid - Grille.