Construire des structures robustes avec des unités de conteneur

Les unités conteneur sont un ensemble spécialisé de variables CSS permettant de créer des grilles, des présentations et des composants à l'aide de colonnes et de gouttières. Ils reflètent la fonctionnalité de présentation du logiciel de conception d'interface utilisateur dans laquelle la configuration de trois valeurs seulement fournit à votre document un ensemble global de colonnes et de gouttières à mesurer et à partir desquelles calculer. – indépendamment de leur profondeur de nidification, de la largeur de leur parent ou de leurs éléments frères. Ainsi, au lieu d’exiger un ensemble répété d’éléments parents . Grid et .row les unités de conteneur mesurent à partir de la : racine de votre document – comme si vous utilisiez un rem .

En quoi les unités conteneur sont-elles différentes? ] Les grilles des cadres populaires (tels que Bootstrap ou Bulma ) partagent la même limitation fondamentale: elles reposent sur des unités relatives telles que les «pourcentages» pour construire des colonnes et des caniveaux.

This Cette approche associe les développeurs à l’utilisation d’une structure HTML spécifique chaque fois qu’ils souhaitent utiliser ces mesures et nécessite parent> enfant une imbrication pour que les largeurs soient calculées correctement.

Pas convaincu? Essayez par vous-même:

• Ouvrez tous les modèles CSS framework grid demo ;
• Inspectez une colonne et notez sa largeur
• Utilisation de DevTools, faites glisser cet élément ailleurs dans le document;
• Notez que la largeur de la colonne a changé au cours du transit.

Freedom Of Mouvement (… pas le Brexit )

Les unités conteneur vous permettent plus de liberté pour dimensionner les éléments à l'aide d'un ensemble d'unités globales. Si vous voulez construire une barre latérale de trois colonnes, il vous suffit de:

 .sidebar {
  width: calc (3 * var (- unité de colonne));
  / * ou colonnes (3) * /
}

Votre ... class = "sidebar"> ... L'élément peut vivre n'importe où dans votre document – sans éléments parent ni imbrication spécifiques.

Partage d’outils avec les concepteurs

Les concepteurs et les développeurs disposent d’un excellent compromis qui facilite la conversion de logiciels de conception en modèles frontaux: numéros .

Échelles modulaires exceptionnel, non seulement parce qu’ils aident les concepteurs à harmoniser leur typographie, mais aussi parce que les développeurs peuvent les reproduire sous la forme d’un système simple . Il en va de même pour Baseline Grids : de superbes systèmes auto-documentés avec une configuration minuscule (un numéro racine) et une cohérence massive.

Les unités de conteneur sont configurées de la même manière que les concepteurs utilisent Sketch pour configurer Paramètres de disposition :

Toute possibilité offerte aux concepteurs et aux développeurs de créer avec les mêmes outils constitue un gain de productivité considérable et favorise la réflexion dans les deux domaines.

Commencez à construire avec des unités de conteneur

Définissez les proportions de votre grille avec trois valeurs:

 :racine {
  - largeur de grille: 960;
  --grid-column-width: 60;
  - colonnes de grille: 12;
}

Ces trois valeurs définissent la largeur d'une colonne par rapport à votre grille. Dans l’exemple ci-dessus, la largeur d’une colonne est 60/960 . Les gouttières sont calculées automatiquement à partir de l'espace restant.

Enfin, définissez une largeur pour votre conteneur:

: root {
  --container-width: 84vw;
}

Note : - La largeur du conteneur doit être définie comme une unité absolue. Je vous recommande d'utiliser les unités d'affichage ou rems .

Vous pouvez mettre à jour votre - conteneur-width à tout point d'arrêt (toutes vos unités conteneur seront mises à jour en conséquence ):

 @media (largeur minimale: 800 pixels) {
  --container-width: 90vw;
}
    
@media (min-width: 1200px) {
  --container-width: 85vw;
}
    
/ * Qu'en est-il de la largeur maximale? * /
@media (min-width: 1400px) {
  --container-width: 1200px;
}

Vous avez maintenant débloqué deux unités très robustes à construire:

1. - unité de colonne
2. - unité de gouttière

Longueur des colonnes: la troisième et dernière arme

Il est plus courant de construire des colonnes ou des gouttières qu’elles soient traversées:

Grand aperçu )

Les longueurs de colonne sont faciles à calculer, mais pas très jolies à écrire. Pour couvrir plusieurs colonnes, je recommanderais l’utilisation d’un pré-processeur:

 .panel {
  / * vanilla css * /
  width: calc (6 * var (- unité colonne et gouttière) - var (- unité gouttière));
  
  / * raccourci pré-processeur * /
  largeur: travées de colonne (6);
}

Bien sûr, vous pouvez utiliser des raccourcis de pré-processeur pour chaque unité de conteneur que j’ai mentionnée jusqu’à présent. Essayons-les avec un exemple de conception

Composants de construction avec unités de conteneur

Prenons un exemple de conception et décomposons-le:

Cet exemple utilise des colonnes, des gouttières et des colonnes. Comme nous ne faisons que stocker une valeur, les unités de conteneur peuvent être utilisées pour d'autres propriétés CSS, telles que la définition d'une hauteur ou la fourniture d'un remplissage:

 .background-image {
  largeur: travées de colonne (9);
  fond de rembourrage: gouttières (6);
  / * 6 gouttières plus hautes que la bannière au premier plan * /
}

.foreground-banner {
  largeur: colonnes (8);
  rembourrage: gouttières (2);
}

.bouton {
  hauteur: gouttières (3);
  rembourrage: gouttières (1);
}

Saisissez le code

: racine {
  / * Proportions de la grille * /
  - largeur de grille: 960;
  --grid-column-width: 60;
  - colonnes de grille: 12;

  / * Logique de grille * /
  - gouttières: calc (var (- colonnes de grille) - 1);

  / * Logique de proportion de grille * /
  --column-proportion: calc (var (- grille-colonne-largeur) / var (- grille-largeur));
  - proportion de gouttière: calc ((1 - (var (- colonnes de grille) * var (- proportion de colonne))) / var (- gouttières de grille));

  / * Unités de conteneur * /
  --column-unit: calc (var (- proportion de la colonne) * var (- largeur du conteneur));
  --gutter-unit: calc (var (- proportion de la gouttière) * var (- largeur du conteneur));
  unité de colonne et de gouttière: calc (var (- unité de colonne) + var (- unité de gouttière));

  / * Largeur du conteneur * /
  --container-width: 80vw;
}

@media (min-width: 1000px) {
  :racine {
    --container-width: 90vw;
  }
}

@media (min-width: 1400px) {
  :racine {
    --container-width: 1300px;
  }
}

Pourquoi utiliser les variables CSS?

“Les pré-processeurs ont été capables de le faire pendant des années avec $ variables – pourquoi avez-vous besoin de variables CSS?”

Pas… tout à fait. Bien que vous puissiez utiliser des variables pour exécuter des calculs, vous ne pouvez pas éviter la compilation de code inutile lorsque l’une des variables met à jour sa valeur .

Prenons l’exemple condensé suivant de grille:

 .grid {
  $ colonnes: 2;
  $ gouttière: $ colonnes * 1rem;
  affichage: grille;
  grid-template-columns: repeat ($ colonnes, 1fr);
  maillage: $ gouttière;

  @media (min-width: $ medium) {
    $ colonnes: 3;
    grid-template-columns: repeat ($ colonnes, 1fr);
    maillage: $ gouttière;
  }
  
  @media (min-width: $ large) {
    $ colonnes: 4;
    grid-template-columns: repeat ($ colonnes, 1fr);
    maillage: $ gouttière;
  }
}

Cet exemple montre comment chaque référence à une variable SASS / LESS doit être recompilée si la variable change – en dupliquant le code encore et encore pour chaque instance.

Mais les variables CSS partagent leur logique. avec le navigateur afin que les navigateurs puissent effectuer la mise à jour pour vous .

 .grid {
  --colonnes: 2;
  --gutter: calc (var (- colonnes) * 1rem);
  affichage: grille;
  grid-template-columns: repeat (var (- colonnes), 1fr);
  intervalle de grille: var (- gouttière);

  @media (min-width: $ medium) {
    --colonnes: 3;
  }
  
  @media (min-width: $ large) {
    --colonnes: 4;
  }
}

Ce concept aide à former la logique des unités de conteneur; En stockant la logique une fois à la racine, chaque élément de votre document surveille ces valeurs au fur et à mesure de leur actualisation et réagit en conséquence.

Essayez-le!

Lecture recommandée

(dm, ra, il)