Des Layouts

Les "Layouts" sont des classes CSS utilitaires neutres destinées à gérer la façon dont les composants vont s'afficher et interagir entre eux. Les Layouts sont responsive, entièrement paramétrables (variables CSS) et destinés à être réutilisables.

Stack

Layout vertical où l'espace entre chaque enfant est consistant.

  • Principe : Ce layout organise les éléments verticalement avec un espacement consistant entre chaque enfant. Idéal pour créer des listes ou des sections empilées avec un rythme vertical régulier.
  • Déclencheur : Aucun, fonctionne toujours en vertical.
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="stack" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Cluster

Layout qui dispose les éléments horizontalement avec espacement uniforme et retour à la ligne automatique.

  • Principe : Ce layout permet d'organiser deux éléments de tailles variables avec un espacement uniforme entre eux. Les deux éléments passent automatiquement à la ligne quand l'espace est insuffisant, tout en maintenant leur alignement.
  • Déclencheur : Espace disponible dans le conteneur parent.
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="cluster" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-justify="" (alignement horizontal des enfants), data-align="" (alignement vertical des enfants), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Autogrid

Layout en grille automatique avec des colonnes de même largeur.

  • Principe : Grille responsive où les enfants s'organisent automatiquement en colonnes de même largeur. Le nombre de colonnes s'adapte en fonction de l'espace disponible.
  • Déclencheur : Largeur minimale des colonnes définie par une variable.
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="autogrid" sur l'élément parent et modifier les variables si nécessaire.
  • Variables (à adapter à chaque usage) :
    • --col-min-size (largeur minimale des colonnes)
    • --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-align="" (alignement vertical des enfants), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Switcher

Layout composé d'enfants de même largeur s'affichant horizontalement ou sur une colonne.

  • Principe : Ce layout est composé d'enfants de même taille, s'affichant par défaut verticalement, ou horizontalement selon l'espace disponible.
    • Mobile : Une colonne verticale (quel que soit le nombre d'enfants).
    • Desktop : X colonnes horizontales (X = le nombre d'enfants).
  • Déclencheur : Point de rupture 48rem (768px)
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="switcher" sur un élément parent et modifier les variables / attributs si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-align="" (alignement vertical des enfants), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Repel

Layout qui écarte les éléments aux extrémités avec un espacement minimal.

  • Principe : Ce layout place les éléments aux extrémités opposées du conteneur, en maintenant un espacement minimal entre eux. Lorsque l'espace devient insuffisant, les éléments passent automatiquement en colonne.
    • Mobile : Une colonne verticale alignée à gauche.
    • Desktop : Un enfant à gauche, l'autre à droite.
  • Déclencheur : Espace disponible dans le conteneur parent.
  • Enfants : Deux
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="repel" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-align="" (alignement vertical des enfants), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Reel

Layout horizontal défilant avec scroll latéral sur petits écrans (avec snap-points).

  • Principe : Ce layout permet d'afficher une série d'éléments horizontalement avec un défilement latéral lorsque l'espace est insuffisant. Particulièrement utile pour les galeries d'images ou les listes de cartes sur mobile.
  • Déclencheur : Largeur du conteneur insuffisante pour afficher tous les éléments.
  • Enfants : Trois ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="reel" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem), --item-size (largeur des éléments enfants)
  • Attributs HTML : data-scroll (permet de modifier la valeur de l'ancrage), data-scrollbar="hidden" (permet de masquer la barre de défilement), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière)

Duo

Layout pour aligner deux contenus côté à côte, avec un rapport de 2/3 1/3 par défaut.

  • Principe : Ce layout permet de placer deux contenus côté à côte, avec un rapport de 2/3 1/3 par défaut, mais d'autres rapports sont possibles. Il passe automatiquement en colonne quand l'espace est insuffisant. Idéal pour les blocs "image + texte" ou "input + submit".
    • Mobile : Une colonne verticale occupant toute la largeur du parent.
    • Desktop : Un enfant à gauche, l'autre à droite.
  • Déclencheur : Point de rupture 48rem (768px)
  • Enfants : Deux
  • Gouttière : Oui
  • Mise en place : ajouter l'attribut data-layout="duo" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --gap-m (gouttière par défaut, à renseigner dans le projet sinon 1rem)
  • Attributs HTML : data-model="" (modifie les rapports d'affichage), data-gap="l", data-gap="xl", data-gap="none" (modificateur de la taille de gouttière), data-align="" (alignement vertical des enfants)

Boxed

Layout centré horizontalement avec une largeur maximale définie.

  • Principe : Ce layout centre le contenu horizontalement et limite sa largeur maximale. Idéal pour créer des conteneurs centrés avec une largeur contrôlée, particulièrement utile pour les sections de contenu principal.
  • Déclencheur : Non
  • Enfants : Un ou plusieurs
  • Gouttière : Non
  • Mise en place : ajouter l'attribut data-layout="boxed" sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --boxed-max (largeur maximale du conteneur)
  • Attributs HTML : data-boxed (modificateur de la taille)

L'annuaire de Layouts

Choisis ton layout en fonction de tes besoins, lis la documentation fournie dans le fichier CSS puis tu n'as plus qu'à récupérer le code source du layout choisi. L'ensemble des Layouts est disponible sur Github. en libre accès Open Source.

See the Pen stack by Alsacreations (@alsacreations) on CodePen.