Cet article met en avant quelques lignes de code CSS puissantes qui vous aident à créer des mises en page modernes robustes.
Les mises en page CSS modernes permettent aux développeurs d'écrire des règles de style vraiment efficaces et pertinentes en quelques frappes seulement. La présentation ci-dessus et l'article suivant s'intéressent à 10 lignes de code CSS performantes qui demandent beaucoup d'efforts.
Pour suivre ces démonstrations ou les tester par vous-même, consultez l'intégration Glitch ci-dessus ou accédez à 1linelayouts.glitch.me.
01. Super-centré: place-items: center
Pour la première mise en page "en une seule ligne", résolvons le plus grand mystère de l'univers CSS: le centrage des éléments. Sachez que c'est plus simple que vous ne le pensez avec place-items: center.
Spécifiez d'abord grid comme méthode display, puis écrivez place-items: center sur le même élément. place-items est un raccourci permettant de définir align-items et justify-items en même temps. En le définissant sur center, align-items et justify-items sont tous deux définis sur center.
.parent {
display: grid;
place-items: center;
}
Le contenu est ainsi parfaitement centré dans le parent, quelle que soit la taille intrinsèque.
02. La crêpe déconstruite : flex: <grow> <shrink> <baseWidth>
Vient ensuite la crêpe démontée ! Il s'agit d'une mise en page courante pour les sites marketing, qui peuvent comporter une ligne de trois éléments, généralement avec une image, un titre, puis du texte décrivant certaines caractéristiques d'un produit. Sur mobile, nous voulons que ces éléments s'empilent bien et se développent à mesure que la taille de l'écran augmente.
Si vous utilisez Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster la position de ces éléments lors du redimensionnement de l'écran.
Le raccourci flex signifie: flex: <flex-grow> <flex-shrink> <flex-basis>.
De ce fait, si vous souhaitez que vos boîtes remplissent leur taille <flex-basis>, rétrécissent pour les tailles plus petites, mais pas étirer pour remplir tout espace supplémentaire, écrivez: flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est 150px. Il se présente donc comme suit :
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si vous voulez que les zones se dilatent et remplissent l'espace lorsqu'elles passent à la ligne suivante, définissez <flex-grow> sur 1. Le code ressemblera alors à ceci :
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Maintenant, lorsque vous augmentez ou diminuez la taille de l'écran, ces éléments Flex se réduisent et se développent.
03. La barre latérale indique: grid-template-columns: minmax(<min>, <max>) …)
Cette démonstration utilise la fonction minmax pour les mises en page en grille. Ici, nous définissons la taille minimale de la barre latérale sur 150px, mais sur les écrans plus grands, nous la laissons s'étendre jusqu'à 25%. La barre latérale occupe toujours 25% de l'espace horizontal de son parent jusqu'à ce que 25% soit inférieur à 150px.
Ajoutez cette valeur en tant que valeur de "grid-template-columns" avec la valeur suivante : minmax(150px, 25%) 1fr. L'élément de la première colonne (la barre latérale dans ce cas) obtient une minmax de 150px à 25%, et le deuxième élément (la section main ici) occupe le reste de l'espace en tant que piste 1fr unique.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pile de pancakes : grid-template-rows: auto 1fr auto
Contrairement à la crêpe déconstruite, cet exemple ne met pas en forme ses enfants lorsque la taille de l'écran change. Communément appelée pied de page fixe, cette mise en page est souvent utilisée à la fois pour les sites Web et les applications, dans les applications mobiles (le pied de page est généralement une barre d'outils) et les sites Web (les applications monopages utilisent souvent cette mise en page globale).
Ajouter display: grid au composant vous donnera une grille à une seule colonne, mais la zone principale n'aura que la hauteur du contenu, avec le pied de page en dessous.
Pour que le pied de page reste en bas, ajoutez les éléments suivants:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Cela permet de définir le contenu de l'en-tête et du pied de page pour qu'il prenne automatiquement la taille de ses enfants et d'appliquer l'espace restant (1fr) à la zone principale. La ligne de taille auto prendra la taille du contenu minimal de ses enfants. Ainsi, à mesure que ce contenu augmente, la ligne elle-même s'ajuste.
05. Mise en page classique du Saint Graal: grid-template: auto 1fr auto / auto 1fr auto
Cette mise en page classique comprend un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et le contenu principal. Elle est semblable à la mise en page précédente, mais avec des barres latérales.
Pour écrire l'ensemble de cette grille en une seule ligne de code, utilisez la propriété grid-template. Cela vous permet de définir les lignes et les colonnes en même temps.
La paire propriété/valeur est grid-template: auto 1fr auto / auto 1fr auto. La barre oblique entre la première et la deuxième liste séparée par des espaces correspond à la séparation entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans le dernier exemple, où le contenu de l'en-tête et du pied de page était automatiquement dimensionné, les barres latérales gauche et droite sont ici automatiquement dimensionnées en fonction de la taille intrinsèque de leurs enfants. Cependant, cette fois, il s'agit de la taille horizontale (largeur) et non de la taille verticale (hauteur).
06. Grille à 12 colonnes: grid-template-columns: repeat(12, 1fr)
Voici un autre classique: la grille à 12 travées. La fonction repeat() vous permet d'écrire rapidement des grilles en CSS. Si vous utilisez repeat(12, 1fr); pour les colonnes du modèle de grille, vous obtenez 12 colonnes de 1fr chacune.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Vous disposez maintenant d'une grille de 12 colonnes. Nous pouvons y placer nos enfants. Pour ce faire, vous pouvez les placer à l'aide de lignes de grille. Par exemple, grid-column: 1 / 13 s'étend de la première ligne à la dernière (13e) et sur 12 colonnes. grid-column: 1 / 5; s'étendrait sur les quatre premiers.
Vous pouvez également utiliser le mot clé span. Avec span, vous définissez la ligne de départ, puis le nombre de colonnes à couvrir à partir de ce point de départ. Dans ce cas, grid-column: 1 / span 12 serait équivalent à grid-column: 1 / 13 et grid-column: 2 / span 6 à grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (répétition, automatique, minimale maximale): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Pour ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page responsive avec des enfants flexibles et placés automatiquement. C'est plutôt sympa. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax()', que vous pouvez retenir sous l'acronyme RAM.
En résumé, cela se présente comme suit:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vous utilisez à nouveau la répétition, mais cette fois avec le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet de placer automatiquement ces éléments enfants. Ces enfants ont également une valeur minimale de base de 150px avec une valeur maximale 1fr. Cela signifie que sur les petits écrans, ils occuperont toute la largeur de 1fr et, lorsqu'ils atteindront 150px chacun la largeur, ils commenceront à se déplacer sur la même ligne.
Avec auto-fit, les cases s'étendent lorsque leur taille horizontale dépasse 150 px pour remplir tout l'espace restant. Toutefois, si vous remplacez cette valeur par auto-fill, elles ne s'étireront pas lorsque leur taille de base dans la fonction minmax sera dépassée:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Ligne: justify-content: space-between
Pour la mise en page suivante, l'élément principal à démontrer ici est justify-content: space-between, qui place le premier et le dernier élément enfant aux bords de leur boîte de délimitation, l'espace restant étant réparti uniformément entre les éléments. Ces cartes sont placées dans un mode d'affichage Flexbox, avec la direction définie sur "colonne" à l'aide de flex-direction: column.
Le titre, la description et le bloc d'image sont alors placés dans une colonne verticale dans la fiche parente. Ensuite, l'application de justify-content: space-between ancre les premiers (titre) et derniers (bloc d'image) éléments aux bords de la flexbox, et le texte descriptif entre les deux est placé avec un espacement égal à chaque point final.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Ajuster mon style: clamp(<min>, <actual>, <max>)
Nous allons maintenant découvrir des techniques qui sont moins compatibles avec les navigateurs, mais qui ont des implications très intéressantes pour les mises en page et la conception d'UI responsive. Dans cette démonstration, vous définissez la largeur à l'aide d'une pince comme ceci: width: clamp(<min>, <actual>, <max>).
Cela définit une taille minimale et maximale absolue, ainsi qu'une taille réelle. Avec des valeurs, cela peut ressembler à ceci:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La taille minimale est de 23ch, soit 23 unités de caractères, et la taille maximale est de 46ch, soit 46 caractères. Les unités de largeur de caractères sont basées sur la taille de police de l'élément (plus précisément, la largeur du glyphe 0). La taille "réelle" est de 50%, ce qui représente 50% de la largeur parente de cet élément.
La fonction clamp() permet à cet élément de conserver une largeur de 50% jusqu'à ce que 50% soit supérieur à 46ch (sur les fenêtres d'affichage plus larges) ou inférieur à 23ch (sur les fenêtres d'affichage plus petites). Vous pouvez voir que lorsque je fais varier la taille du parent, la largeur de cette fiche augmente jusqu'à son point maximal limité et diminue jusqu'à son point minimal limité. Il reste ensuite centré dans le parent, car nous avons appliqué des propriétés supplémentaires pour le centrer. Cela permet d'obtenir des mises en page plus lisibles, car le texte ne sera pas trop large (supérieur à 46ch) ni trop écrasé et étroit (inférieur à 23ch).
C'est également un excellent moyen d'implémenter une typographie responsive. Vous pouvez par exemple écrire: font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de police d'un titre reste toujours limitée entre 1.5rem et 3rem, mais augmente ou diminue en fonction de la valeur réelle 20vw pour s'adapter à la largeur de la fenêtre d'affichage.
Il s'agit d'une excellente technique pour assurer la lisibilité avec une valeur de taille minimale et maximale. Toutefois, n'oubliez pas qu'elle n'est pas compatible avec tous les navigateurs modernes. Assurez-vous donc de disposer de solutions de remplacement et effectuez vos tests.
10. Respect des proportions: aspect-ratio: <width> / <height>
Enfin, cet outil de mise en page est le plus expérimental de tous. Il a récemment été introduit dans Chrome Canary dans Chromium 84. Firefox s'efforce actuellement de l'implémenter, mais il n'est actuellement disponible dans aucune édition stable du navigateur.
Je tiens toutefois à le mentionner, car il s'agit d'un problème très courant. Il s'agit simplement de conserver les proportions de l'image.
Avec la propriété aspect-ratio, lorsque je redimensionne la fiche, le bloc visuel vert conserve ce format de 16 x 9. Nous respectons le format avec aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16x9 sans cette propriété, vous devez utiliser un hack padding-top et lui attribuer une marge intérieure de 56.25% afin de définir un rapport haut/largeur. Nous allons bientôt proposer une propriété pour éviter le piratage et le calcul du pourcentage. Vous pouvez créer un carré avec un format 1 / 1, un format 2 à 1 avec 2 / 1, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un format de taille défini.
.square {
aspect-ratio: 1 / 1;
}
Bien que cette fonctionnalité soit encore en cours de développement, elle est intéressante à connaître, car elle résout de nombreux problèmes que j'ai moi-même rencontrés à de nombreuses reprises, en particulier en ce qui concerne les vidéos et les iFrames.
Conclusion
Merci de nous avoir suivis dans ce voyage à travers 10 lignes de CSS puissantes. Pour en savoir plus, regardez la vidéo complète et essayez les démonstrations par vous-même.