Guide de style

Grilles

Le système de grilles est un élément fondamental d'un site web moderne. C'est une armature facilitant l'organisation du contenu de la page. Elle est utile aussi bien pour le designer et le développeur (conception et création facilitées) que pour le visiteur (espacement harmonieux entre les différents blocs).

Grille UI

Des largeurs de blocs et de gouttières entre ceux-ci sont prédéfinies en fonction de chaque point de rupture (ou breakpoint).

Desktop 1200 px

Desktop 960 px

Tablet 768 px

Mobile 375 px

Développer en utilisant la grille

Toute page doit être construite en se basant sur la grille Bootstrap.

Certaines règles doivent être respectées :

  • Lorsque la grille est utilisée, elle doit toujours être contenue dans un div.container.
  • La largeur maximale de ce conteneur est fixée à 123rem. Cela signifie que même sur un écran d'ordinateur très large, le contenu ne dépassera jamais cette largeur.
  • Si (et seulement si) la grille contient des colonnes, alors elles doivent être englobées dans un div.row.

Grille Bootstrap

La grille ANS est basée sur la grille Bootstrap 4.5, qui dispose d'une abondante documentation et est extrêmement bien prise en charge. Accédez à la documentation Grille sur Bootstrap.

Elle est utilisée pour construire les pages et assembler les composants entre eux. Exemple :

Titre h1

Chapô. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis itaque dolores alias iste hic, exercitationem perspiciatis beatae quaerat possimus doloribus maiores, cum aut ullam optio voluptatum veritatis assumenda a odio?

Le symbole * indique les champs obligatoires