Gridy☺

Documentation

01. Structure du Projet

Structure de dossiers recommandée pour une configuration Gridy propre.

    /assets
      /img
      /js
      /css
        style.css

02. Variables de Grille

Dans style.css, définissez d'abord les variables de grille pour personnaliser le système. Sans cela, Gridy utilise les valeurs par défaut.

    :root{
      --pl:32px;
      --pr:32px;
      --gp:32px;
      --mw:960px;
    }

Ces variables contrôlent :
• --pl / --pr → marge intérieure de la page gauche/droite
• --gp → espacement de la grille
• --mw → largeur maximale du conteneur

03. Superposition de Grille

Appuyez sur Maj + G pour activer/désactiver la superposition de grille. Utilisez-la pour aligner les éléments et déboguer l'espacement.

04. Colonnes de la Grille

Gridy utilise un système à 12 colonnes. Les exemples sont classés d'une colonne jusqu'à la pleine largeur.

La structure de la mise en page est composée de trois couches :
.con définit la largeur du conteneur principal et la marge intérieure de la page,
.grd définit le système de grille à 12 colonnes,
et .c-* contrôle le nombre de colonnes que chaque élément occupe.

1 Colonne (12 × 1)

2 Colonnes (6 + 6)

3 Colonnes (4 + 4 + 4)

4 Colonnes (3 + 3 + 3 + 3)

6 Colonnes (2 × 6)

Pleine Largeur (12)

05. Départ de Colonne

Utilisez les classes s-* pour décaler les éléments horizontalement.

.c-4 .s-2

.c-3 .s-6

.c-2 .s-11

06. Utilitaires Flex

Utilisez les classes d'aide flex pour l'alignement et la distribution.

.f-r .j-b .a-c

gauche

centre

droite

.f-c .f-c

élément

.f-c .j-c .a-c

centre

07. Alignement de Texte

Classes utilitaires pour l'alignement horizontal du texte.

.t-l

texte aligné à gauche

.t-c

texte centré

.t-r

texte aligné à droite

08. Espacement

Les utilitaires de marge et de marge intérieure suivent le rythme de base. Les classes d'espacement utilisent des incréments verticaux cohérents pour l'équilibre de la mise en page.

Marge Supérieure

.mt-8

.mt-16

.mt-32

.mt-44

.mt-64

Marge Inférieure

.mb-8

.mb-16

.mb-32

.mb-44

.mb-64

Marge Intérieure Supérieure

.pt-8

contenu

.pt-16

contenu

.pt-32

contenu

.pt-44

contenu

.pt-64

contenu

Marge Intérieure Inférieure

.pb-8

contenu

.pb-16

contenu

.pb-32

contenu

.pb-44

contenu

.pb-64

contenu

09. Système d'Images

Utilitaires d'images à hauteur fixe pour une composition de mise en page rapide. Combinez .img avec les utilitaires de hauteur pour créer des blocs d'images cohérents.

.img .img-80

.img .img-160

.img .img-192

.img .img-240

.img .img-320

.img .img-480

.img .img-560

.img .img-640

.img-fit

10. Système Responsive

En dessous de 900px, Gridy passe automatiquement à 4 colonnes. Toutes les classes de colonnes deviennent en pleine largeur.

bureau : .c-3