Cet article met en avant quelques lignes de code CSS puissantes qui font un travail considérable et 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 pertinentes et robustes en quelques frappes. Dans cet article, nous nous pencherons sur 10 lignes de code CSS puissantes, qui font le gros du travail.
Pour suivre ces démonstrations ou les tester par vous-même, utilisez l'intégration Glitch ci-dessus ou visitez le site 1linelayouts.glitch.me.
01. Super-centré: place-items: center
Pour la première mise en page sur une seule ligne, nous allons résoudre le plus grand mystère du monde CSS: le centrage. Sachez que c'est plus facile que vous ne le pensez avec place-items: center.
Commencez par spécifier 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 à la fois align-items et justify-items. Si vous la définissez sur center, align-items et justify-items sont tous deux définis sur center.
.parent {
display: grid;
place-items: center;
}
Ainsi, le contenu est parfaitement centré dans le parent, quelle que soit la taille intrinsèque.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Ensuite, nous avons la pancakes déstructurés ! Cette mise en page est courante pour les sites marketing, par exemple, qui peuvent comporter une ligne de trois articles, généralement avec une image, un titre, puis du texte décrivant certaines caractéristiques d'un produit. Sur les mobiles, il faut que ces éléments s'empilent et se développent à mesure que la taille de l'écran augmente.
En utilisant Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster l'emplacement 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 se remplissent à leur taille de <flex-basis>, réduisent la taille pour les petites tailles, sans étirer pour occuper l'espace supplémentaire, saisissez flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est 150px et se présente comme suit:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si vous voulez que les cases s'étirent et remplissent l'espace à mesure qu'elles passent à la ligne suivante, définissez <flex-grow> sur 1, comme suit:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Désormais, à mesure que vous augmentez ou diminuez la taille de l'écran, ces éléments Flex se rétrécissent et s'agrandissent.
03. La barre latérale indique: grid-template-columns: minmax(<min>, <max>) …)
Cette démonstration exploite la fonction minmax pour les mises en page en grille. Ici, nous allons définir la taille minimale de la barre latérale sur 150px, mais sur les écrans plus grands, elle sera étirée sur 25%. La barre latérale occupe toujours 25% de l'espace horizontal du parent, jusqu'à ce que 25% devienne inférieure à 150px.
Ajoutez-la 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 un 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 crêpes: grid-template-rows: auto 1fr auto
Contrairement à Deconstructed Pancake, cet exemple n'encapsule pas ses enfants lorsque la taille de l'écran change. Communément appelée pied de page persistant, cette mise en page est souvent utilisée pour les sites Web et les applications, pour les applications mobiles (le pied de page est généralement une barre d'outils) et pour les sites Web (les applications monopages utilisent souvent cette mise en page globale).
L'ajout de display: grid au composant génère une grille à une seule colonne. Toutefois, la taille de la zone principale correspond à celle du contenu sous lequel se trouve le pied de page.
Pour que le pied de page soit collé au bas de la page, ajoutez:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Ainsi, le contenu de l'en-tête et du pied de page prendra automatiquement la taille de ses éléments enfants et appliquera l'espace restant (1fr) à la zone principale, tandis que la ligne auto prendra la taille du contenu minimal de ses enfants. Ainsi, à mesure que ce contenu augmente en taille, la ligne elle-même s'agrandit pour s'ajuster.
05. Mise en page classique avec le Saint Graal: grid-template: auto 1fr auto / auto 1fr auto
Cette mise en page classique du Saint Graal comprend un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Elle est semblable à la mise en page précédente, mais comprend désormais des barres latérales.
Pour écrire l'intégralité de cette grille à l'aide d'une seule ligne de code, utilisez la propriété grid-template. Cela vous permet de définir à la fois les lignes et les colonnes.
La paire propriété/valeur est la suivante: grid-template: auto 1fr auto / auto 1fr auto. La barre oblique située entre la première et la deuxième liste d'éléments séparés par un espace correspond au saut entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans le dernier exemple, où l'en-tête et le pied de page étaient dimensionnés automatiquement, les barres latérales gauche et droite sont automatiquement dimensionnées en fonction de la taille intrinsèque des enfants. Toutefois, cette fois, il s'agit d'une taille horizontale (largeur) et non verticale (hauteur).
06. Grille à 12 segments: grid-template-columns: repeat(12, 1fr)
Nous avons ensuite un autre classique: la grille à 12 segments. 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 pour chacune des 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Maintenant que vous avez une grille de suivi à 12 colonnes, nous pouvons placer nos éléments enfants sur la grille. Une façon de le faire serait de les placer à l'aide de lignes de grille. Par exemple, grid-column: 1 / 13 s'étend de la première à la dernière ligne (13e) et s'étend sur 12 colonnes. grid-column: 1 / 5; couvrirait 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 à emprunter à partir de ce point. Dans ce cas, grid-column: 1 / span 12 équivaut à 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, auto, min. max.): 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 éléments enfants flexibles et placés automatiquement. Génial. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax()', que vous vous souvenez par l'acronyme RAM.
L'ensemble ressemble à ceci:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vous utilisez à nouveau la répétition, mais cette fois, en utilisant le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela active le placement automatique de ces éléments enfants. Ces éléments enfants ont également une valeur minimale de base de 150px avec une valeur maximale de 1fr, ce qui signifie qu'ils occupent toute la largeur de 1fr sur les petits écrans. Et lorsqu'ils atteignent 150px de largeur chacun, ils commencent à s'insérer sur la même ligne.
Avec auto-fit, les cases s'étirent lorsque leur taille horizontale dépasse 150 pixels pour occuper tout l'espace restant. Toutefois, si vous remplacez cette valeur par auto-fill, elles ne s'étirent pas lorsque leur taille de base dans la fonction minmax est dépassée:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Alignement: justify-content: space-between
Pour la mise en page suivante, le point principal à démontrer ici est justify-content: space-between, qui place les premier et dernier éléments enfants sur les bords de leur cadre de délimitation, avec l'espace restant réparti uniformément entre les éléments. Ces fiches sont placées dans un mode d'affichage Flexbox et la direction est définie sur la colonne à l'aide de flex-direction: column.
Le titre, la description et le bloc d'images sont ainsi placés dans une colonne verticale à l'intérieur de la fiche parent. Ensuite, l'application de justify-content: space-between permet d'ancrer le premier (titre) et le dernier (bloc d'image) sur les bords du Flexbox. Le texte descriptif entre ceux-ci est placé avec un espacement égal entre chaque extrémité.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Définir mon style: clamp(<min>, <actual>, <max>)
Nous allons aborder ici certaines techniques qui n'acceptent pas les navigateurs, mais elles ont des implications intéressantes pour les mises en page et la conception d'interface utilisateur responsive. Dans cette démonstration, vous définissez la largeur à l'aide d'une pince comme suit: 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 se présenter comme suit:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La taille minimale est de 23ch ou 23 unités de caractères, et la taille maximale de 46ch, soit 46 caractères. Les unités de largeur de caractère sont basées sur la taille de police de l'élément (en particulier la largeur du glyphe 0). La taille "réelle" est de 50%, ce qui correspond à 50% de la largeur du parent de cet élément.
La fonction clamp() permet à cet élément de conserver une largeur de 50% jusqu'à que 50% soit supérieur à 46ch (sur les fenêtres d'affichage plus grandes) ou inférieur à 23ch (sur les fenêtres d'affichage plus petites). Comme vous pouvez le constater, lorsque j'étire et réduit la taille du parent, la largeur de cette carte augmente jusqu'à sa valeur maximale et diminue jusqu'à sa valeur minimale. 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 (au-dessus de 46ch) ni trop resserré et trop étroit (moins de 23ch).
C'est également un excellent moyen d'implémenter une typographie responsive. Par exemple, vous pouvez écrire: font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de police d'un titre restera toujours limitée entre 1.5rem et 3rem, mais augmenterait ou diminuerait 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 des valeurs de taille minimale et maximale. Toutefois, n'oubliez pas qu'elle n'est pas compatible avec tous les navigateurs récents. Par conséquent, assurez-vous d'avoir des créations de remplacement et effectuez vos tests.
10. Respect de l'aspect: aspect-ratio: <width> / <height>
Enfin, ce dernier outil de mise en page est le plus expérimental. Il a été récemment introduit dans Chrome Canary dans Chromium 84, et Firefox a activement contribué à son implémentation, mais il n'est actuellement disponible dans aucune édition de navigateur stable.
Je tiens toutefois à le mentionner, car il s'agit d'un problème qui se pose souvent. Il s'agit simplement de maintenir le format d'une image.
Avec la propriété aspect-ratio, lorsque je redimensionne la fiche, le bloc visuel vert conserve ce format 16:9. Le format respecte les proportions définies pour aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16:9 sans cette propriété, vous devez utiliser une astuce padding-top et lui attribuer une marge intérieure de 56.25% afin de définir un rapport haut/largeur. Nous disposerons bientôt d'une propriété permettant d'éviter le piratage et de devoir calculer le pourcentage. Vous pouvez créer un carré au format 1 / 1, un ratio de 2:1 avec 2 / 1, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un ratio de taille défini.
.square {
aspect-ratio: 1 / 1;
}
Cette fonctionnalité est encore en développement, mais elle est intéressante, car elle résout de nombreux problèmes de développement auxquels j'ai été confrontée moi-même, en particulier en ce qui concerne les vidéos et les cadres iFrame.
Conclusion
Merci d'avoir exploré 10 lignes de code CSS efficaces. Pour en savoir plus, regardez la vidéo complète et essayez vous-même les démonstrations.