Column Setter : Tutoriel pour l'outil de grille responsive en Sass

1. Présentation du projet

Column Setter est une bibliothèque Sass conçue pour faciliter la création de grilles responsives personnalisées. Cet outil permet aux développeurs d'établir facilement une grille adaptable pour leurs sites web, en construisant des layouts basés sur le flottent ou Flexbox. Column Setter utilise une simple fonction et quelques mixins optionnels pour générer des largeurs CSS basées sur des paramètres définis. L'outil se concentre principalement sur la génération des largeurs de grille, laissant aux développeurs le soin de gérer entièrement la structure HTML et CSS.

2. Démarrage rapide

2.1 Installation

Pour commencer, clonez le projet localement :

git clone https://github.com/propublica/column-setter.git

2.2 Configuration

Dans le répertoire du projet, trouvez le fichier _parametres-colonne.scss et modifiez les proportions de la grille selon vos besoins. Par exemple :

$marge: 4; // Largeur des marges
$largeur-colonne: 4; // Largeur des colonnes
$espacement: 2; // Largeur des espacements
$remplissage: 1; // Largeur du remplissage

2.3 Importation

Dans votre fichier Sass principal, importez _parametres-colonne.scss et _column-setter.scss :

@import "_parametres-colonne.scss";
@import "_column-setter.scss";

2.4 Utilisation

Employez la fonction largeurColonne() pour générer des valeurs de largeur. Par exemple, pour spécifier qu'un élément occupe 6 colonnes dans un conteneur de 12 colonnes :

.exemple {
  width: largeurColonne(6, 12); // 6 colonnes de large sur 12 au total
}

3. Cas d'application et meilleures pratiques

3.1 Création d'une grille entièrement fluide

En utilisant des valeurs sans unité dans _parametres-colonne.scss, vous pouvez créer une grille entièrement fluide :

$marge: 4;
$largeur-colonne: 4;
$espacement: 2;
$remplissage: 1;

3.2 Utilisation des points de rupture

Définissez des points de rupture dans _parametres-colonne.scss pour adapter la grille à différentes tailles d'écran :

$points-de-rupture: (
  xs: (colonnes: 4, largeur-min: 0, remplissage: 2em),
  sm: (colonnes: 6, largeur-min: 30em, marge: 5),
  md: (colonnes: 8, largeur-min: 40em),
  lg: (colonnes: 12, largeur-min: 50em),
  xl: (colonnes: 16, largeur-min: 60em)
);

3.3 Utilisation du mixin grille()

Employez le mixin grille() pour définir les marges supérieure et inférieure de votre mise en page :

@include grille(contenu-principal);

4. Projets de l'écosystème

4.1 Humio Column Setter

Humio Column Setter est une extension Chrome permettant d'automatiser le positionnement des colonnes et champs dans Humio. Cet outil aide les utilisateurs à ne pas être limités aux champs @timestamp et @rawstring par défaut, améliorant ainsi l'effficacité des requêtes.

4.2 Autres projets connexes

• Sass : Column Setter étant construit sur Sass, une connaissance de Sass est nécessaire.
• Flexbox : Bien que Column Setter prenne en charge les mises en page avec flottants, Flexbox reste l'outil de choix pour les mises en page modernes.

En suivant ces étapes, vous pouvez rapidement maîtriser Column Seter et créer des grilles responsives personnalisées pour vos projets web.