Je n'aime pas l'admettre, mais il y a cinq ou six ans, mon intérêt pour la conception Web a commencé à s'estomper. Bien sûr, posséder une entreprise signifiait que je devais continuer à travailler, mais rester motivé et offrir la meilleure pensée possible à mes clients devenait un combat quotidien.

Regarder le Web n’a pas amélioré ma motivation. La conception Web avait stagné, la prévisibilité remplaçait la créativité et les idées semblaient moins importantes que les données.

Les raisons pour lesquelles j'avais aimé travailler sur le Web ne semblaient plus pertinentes. Le design avait perdu sa joie. Des ensembles complexes d’outils de construction et de processeurs avaient même supplanté le simple plaisir d’écrire HTML et CSS.

Lorsque j’ai commencé à travailler avec le légendaire créateur de journaux et de magazines Mark Porter, je suis devenu fasciné par la direction artistique et le design éditorial. En tant que personne qui n’avait pas non plus étudié à l’école d’art, tout était passionnant et nouveau dans ce domaine du design. J'ai lu tous les livres sur les directeurs artistiques influents que j'ai pu trouver et j'ai commencé à collectionner des magazines dans les endroits que j'ai visités à travers le monde.

Plus le design de magazines m'inspirait, plus vite mon enthousiasme pour le web design rebondissait. Je me demandais pourquoi beaucoup de concepteurs de sites Web pensent que la conception d'impression est démodée et sans rapport avec leur travail. J'ai réfléchi à la question de savoir pourquoi si peu de choses rendent la conception d'impression spéciale sur le Web.

Mon objectif était de rechercher des exemples inspirants de conception éditoriale, d'étudier ce qui les rend uniques et de trouver des moyens d'adapter ce que j'avais appris. créer des conceptions plus convaincantes, attrayantes et imaginatives pour le Web.

Mes bibliothèques regorgent maintenant d’inspiration pour la conception de magazines, mais ma collection ne cesse de croître. L’espace est limité, je suis donc pointilleux sur ce que je vais chercher. J'achète une sélection variée et je collectionne rarement plus d'un numéro du même titre.

Je recherche des mises en page intéressantes, une typographie inspirante et des moyens novateurs d'associer du texte à des images. Quand un magazine a beaucoup d'éléments de design intéressants, je l'achète. Cependant, si un magazine ne contient que quelques pièces d’inspiration, je reconnais que je ne suis pas au-dessus de les photographier avant de les remettre sur les étagères.

J’achète de nouveaux magazines aussi régulièrement que possible et, une semaine avant Noël, peu d'amis et moi avons rencontré à Londres. Aucun voyage à «Smoke» n’est complet sans un arrêt à Magma, et j’ai acheté plusieurs nouveaux magazines. Après avoir expliqué mon inspiration, un ami m'a suggéré d'expliquer pourquoi je trouve le design des magazines si inspirant et comment les magazines influencent mon travail.

Cette conversation a suscité l’idée d’une série sur la prise de décisions de conception inspirées. Chaque mois, je choisirai une publication, discuterai de ce qui distingue son design et de la manière dont nous pourrions tirer des enseignements pour améliorer notre travail sur le Web.

En tant qu'utilisateur enthousiaste des langages HTML et CSS, je expliquer également comment mettre en œuvre de nouvelles idées en utilisant les dernières technologies; CSS Grid, Flexbox et Shapes.

Je suis heureux de pouvoir dire que je suis de nouveau inspiré et motivé pour concevoir pour le Web et j'espère que cette série pourra également vous inspirer.

Andy Clarke
Avril 2019

Un coup d’œil me dira que je ne suis pas un grand aventurier. Je ne me considère pas comme particulièrement cultivé et ma femme plaisante régulièrement à propos de ce qu'elle dit être mon manque de style.

Ce qui m'a donc attiré vers le magazine Avaunt et ses reportages sur «l'aventure», la «culture» et le «style» quand il y a tellement de magazines concurrents et variés?

Il ne me faut souvent que quelques tours de page pour décider si un magazine offre l'inspiration que je recherche. Il faut que quelque chose se démarque au cours des premières secondes pour que je regarde de plus près, qu'il s'agisse d'une mise en page intéressante, d'un traitement typographique inspirant ou d'une combinaison novatrice d'images et de texte.

Avaunt a tout cela, mais ce qui m'a frappé Le plus souvent, c’est la manière dont son directeur artistique a utilisé la couleur, la mise en page et le texte de différentes manières, tout en maintenant une impression de cohérence dans l’ensemble du magazine. Il existe des fils de conception distinctifs qui traversent les pages d’Avaunt. Les utilisations audacieuses d’un serif au pochoir et d’une police de caractères sans empattement géométrique sont particulièrement frappantes, de même que la répétition du noir, du blanc, un rouge que les concepteurs d’Avaunt utilisent de différentes manières. De nombreux choix créatifs d’Avaunt sont aussi aventureux que les histoires qu’il raconte.

De nombreux magazines consacrent leurs premiers articles à la publicité sur papier glacé, et Avaunt fait de même. En parcourant ces annonces, vous trouverez la page de contenu d’Avaunt et son fascinante grille modulaire à quatre colonnes.

Cette présentation conserve le contenu ordonné dans les zones spatiales, mais conserve l’énergie en donnant à chaque zone une taille différente. Cette présentation pourrait être adaptée à de nombreux types de contenu en ligne et devrait être facile à mettre en œuvre à l'aide de CSS Grid. Je suis impatient de l'essayer.

Pour les titres sans empattement, les standfirsts et autres éléments typés qui ont du succès, Avaunt utilise MFred, initialement conçu pour le magazine Elephant par Matt Willey en 2011. Matt est ensuite allé à l'art Avaunt Stencil a été conçu en 2014 par le studio londonien A2-TYPE, qui l'a mis sous licence. Il existe de nombreuses polices de caractères disponibles, mais il peut être difficile de trouver une police alliant audace et élégance. Vous cherchez un serif de pochoir hébergé sur Google Fonts? Stardos serait un bon choix pour le type de taille d'affichage. Essayez quelque chose de plus unique, essayez Caslon Stencil d'URW.

L'utilisation d'une grille modulaire par Avaunt ne s'arrête pas à la page de contenu et constitue la base d'une dissémination des curiosités du Musée polytechnique de la guerre froide à Moscou qui m'a d'abord attiré vers le magazine. . Cette diffusion utilise une grille modulaire à trois colonnes et des zones spatiales de différentes tailles.

Ce qui me fascine dans cette diffusion de la Guerre froide, c'est la façon dont les modules de la page verso se combinent pour former une seule colonne de contenu textuel. Même avec cette colonne, les proportions de la grille de modules informent toujours la position et la taille des éléments à l'intérieur.

Alors que la plupart des pages d’Avaunt sont conçues pour une expérience de lecture fabuleuse, de nombreuses autres affichent leur style et leur style typographique de base dans différentes directions. Texte blanc sur les fonds sombres, couleurs vives s'étendent où les objets sont coupés pour se fondre avec le fond. Des majuscules initiales géantes qui remplissent la largeur d’une colonne et de larges lettrines au pochoir qui dominent la page.

Les motifs amusants d’Avaunt ajoutent de l’intérêt et la disposition des pages crée un rythme que je ne vois que très rarement en ligne. Ces variations de conception sont liées par l'utilisation constante d'Anvers – également conçue par A2-TYPE – en tant que police de caractères pour la lecture de texte et en tant que thème de couleurs noir, blanc et rouge, qui est utilisée dans le magazine.

L'étude du design du magazine Avaunt peut enseigner et inspirer. Comment une grille modulaire peut aider à structurer le contenu de manière créative sans se sentir statique. (J'en apprendrai davantage sur les grilles modulaires plus tard.)

Comment un ensemble bien défini de styles peut devenir le fondement de conceptions distinctives et variées et enfin, comment créer un rythme dans une série de pages peut aider les lecteurs à rester engagés .

La prochaine fois que vous passez devant le magasin le plus proche, ouvrez un exemplaire du magazine Avaunt. C’est une question d’aventure, mais je parie que cela peut aider vos conceptions à être plus aventureuses aussi.

Dites bonjour aux maigres colonnes

Pour ce qui semble être une éternité, la conception de grille pour le Web a été très peu innovante. J'avais espéré que les défis posés par le design réactif aboutiraient à une approche créative de la mise en page, mais malheureusement, le contraire semble être vrai.

Au lieu des motifs de grille originaux, les arrangements de contenu à un, deux, trois ou quatre blocs sont devenus la norme. Les grilles de frameworks, comme celles incluses dans Bootstrap, restent le point de départ de nombreux concepteurs, qu'ils utilisent ou non ces frameworks.

Il est vrai que la raison pour laquelle une si grande partie du Web a la même apparence est identique à celle des concepteurs de site utilisant la même grille . Après tout, il existe des conventions similaires pour les magazines et les journaux depuis des décennies, mais d’une manière ou d’une autre, les magazines n’ont pas perdu leur personnalité, contrairement à de nombreux sites Web.

Je suis toujours à la recherche d’inspiration pour la mise en page et les magazines sont une source riche. La lecture d’Avaunt m’a rappelé une technique que j’ai découverte il ya des années mais que je n’avais pas essayée. Cette technique ajoute une colonne très étroite à une grille de colonnes classique. Dans la conception imprimée, cette colonne étroite est souvent appelée «colonne bâtarde ou mesure» et décrit un bloc de contenu non conforme au reste de la grille. (Ceci étant une publication conviviale pour la famille, je l'appellerai une "colonne maigre".)

Dans ces premiers exemples, compresser une image dans une colonne réduit son poids visuel et perturbe l'équilibre de ma composition. Faire en sorte que l'image remplisse deux colonnes standard perturbe également cet équilibre délicat.

Le fait de scinder la dernière colonne, puis d'ajouter une demi-largeur à une autre, crée l'espace idéal pour mon image et un résultat global plus agréable.

Je pourrais utiliser une colonne maigre pour indiquer la largeur des éléments de conception. Ce logo Mini Cooper correspond à la largeur de ma colonne maigre et sa taille est en équilibre avec le reste de ma composition.

Parfois, le contenu ne rentre pas facilement dans une seule colonne, mais en combinant les largeurs des colonnes standard et minces, je crée plus d'espace et une meilleure mesure pour le texte en cours d'exécution. Je peux placer une colonne maigre n'importe où dans une mise en page là où j'ai besoin de mon contenu.

Une colonne vide, maigre, ajoute un espace qui permet de l'oeil pour errer autour d'un design. L'asymétrie créée en plaçant une colonne étroite entre deux colonnes standard confère également à la présentation structurée une impression de dynamisme et d'énergie.

Un autre modèle vide column sculpte une large gouttière dans cette conception et limite mon texte courant à une seule colonne, de sorte que sa hauteur reflète le format vertical de l'image. Je peux également utiliser une colonne maigre pour transformer des éléments typographiques en éléments de conception excitants.

Développement avec des colonnes maigres

Des conceptions comme celles-ci sont étonnamment simples à mettre en oeuvre avec les CSS actuelles. Je n'ai besoin que de quatre éléments structurels; un logo, un en-tête, une figure, ainsi qu'un article contenant le texte courant:

 
… 
 
… 
 
… 

Je commence par créer des écrans de taille moyenne en appliquant CSS Grid à l'élément body dans ma première requête multimédia. À cette taille, je n’ai pas besoin d’une colonne maigre, mais je développe plutôt une grille symétrique à trois colonnes qui s’agrandit uniformément pour remplir la largeur de la fenêtre:

 @media screen et (min-width: 48em) {
corps {
affichage: grille;
Grille-modèle-colonnes: 1fr 1fr 1fr;
grille-colonne-gap: 2vw; }
}

J'utilise des numéros de ligne pour placer des éléments dans les colonnes et les lignes de ma grille. Je place mon logo dans la première colonne maigre et dans la première ligne à l'aide d'un sélecteur d'attribut de correspondance de sous-chaîne. Ceci cible une image avec un «logo» n’importe où dans sa valeur source:

 [src*="logo"] {
grille-colonne: 1;
rangée de grille: 1; }

Ensuite, je place l'élément d'en-tête – contenant mon titre et mon premier paragraphe – dans la deuxième ligne. L'utilisation de numéros de ligne de 1 à -1 étend cet en-tête sur toutes les colonnes:

 header {
grille-colonne: 1 / -1;
rangée de grille: 2; }

Avec display: grid; appliqué, tous les descendants directs d'un conteneur de grille deviennent des éléments de grille que je peux placer en utilisant des zones, des numéros de ligne ou des noms.

élément avec une grande image Mini, plus une légende sur la conception originale du modèle Cooper. Cette figure est cruciale car elle décrit une relation entre img et figcaption. Cependant, bien que cette figure donne davantage de sens à mon balisage, je perds la possibilité de placer img et figcaption à l'aide de CSS Grid, car aucun des deux ne sont des descendants directs du corps où j'ai défini ma grille.

Heureusement, il existe une propriété CSS qui – lorsqu'il est utilisé de manière réfléchie – peut résoudre ce problème. Je n’ai pas besoin de styliser la figure, je n'ai besoin que d’en nommer img et figcaption. En appliquant display: content; sur ma figure, je le retire effectivement du DOM à des fins de mise en forme, de sorte que ses descendants prennent sa place:

 figure {
affichage: contenu; }

Il convient de noter que, bien que display supprime efficacement ma figure du DOM pour des raisons de style, les propriétés qui en héritent – y compris les tailles et les styles de police – le sont toujours:

 figure img {
grille-colonne: 2 / -1; rangée de grille: 4; }

figcaption {
grille-colonne: 1;
rangée de grille: 4;
align-self: fin; }

Je place mon article et modifie son texte en trois colonnes à l'aide de Multi-column Layout, l'une de mes propriétés CSS préférées:

 article {
grille-colonne: 1 / -1;
rangée de grille: 3;
nombre de colonnes: 3;
écart de colonne: 2 vw; }

Il est temps de mettre en œuvre un concept qui inclut une colonne maigre pour les écrans plus grands. J'utilise une requête multimédia pour isoler ces nouveaux styles, puis je crée une grille de cinq colonnes qui commence par une colonne maigre large de 1fr:

 @media screen et (min-width: 64em) {
corps {
Grille-modèle-colonnes: 1fr répéter (4, 2fr); }
}

Ensuite, j'ajoute des valeurs pour repositionner l'en-tête, img et figcaption, et l'article, en veillant à réinitialiser le nombre de colonnes pour le faire correspondre nouvelle largeur:

 header {
grille-colonne: 3 / -1;
rangée de grille: 1; }

figure img {
grille-colonne: 4 / -1;
rangée de grille: 2; }

figcaption {
grille-colonne: 2;
rangée de grille: 2;
align-self: start; }

article {
grille-colonne: 3;
rangée de grille: 2;
nombre de colonnes: 1; }

Changer radicalement l'apparence d'un dessin en utilisant CSS seul, sans apporter de modification à la structure du HTML, me fait sourire, même après presque deux décennies. Je souris aussi lorsque je modifie la composition pour créer une mise en page radicalement différente sans modifier la grille. Pour cette conception alternative, je vise un look plus structuré.

Pour améliorer la lisibilité de mon texte en cours, je le divise en trois colonnes. Ensuite, pour séparer ce bloc de contenu des autres éléments de texte, je place ma petite colonne entre les deux premières colonnes standard. Il n’est pas nécessaire de changer la structure de mon HTML. Tout ce dont j'ai besoin sont des modifications mineures aux valeurs de grille dans ma feuille de style. Cette fois, ma valeur de colonne maigre large de 1fr se situe entre deux largeurs de colonne standard:

 @media screen et (min-width: 64em) {
corps {
Grille-modèle-colonnes: 2fr 1fr 2fr 2fr 2fr; }
}

Je place mon en-tête dans la deuxième ligne et l'article directement dans le bas:

 en-tête {
grille-colonne: 3 / -1;
rangée de grille: 2; }

article {
grille-colonne: 3 / -1;
rangée de grille: 3;
nombre de colonnes: 3;
écart de colonne: 2 vw; }

Etant donné que ni img ni figcaption ne sont des descendants directs de l'élément body où j'ai défini ma grille, pour les placer, il faut afficher la propriété : content; :

 figure {
affichage: contenu; }

figure img {
grille-colonne: 3/5;
rangée de grille: 1; }

figcaption {
grille-colonne: 5 / -1;
rangée de grille: 1;
align-self: start; }

Selon leur utilisation, l'introduction de colonnes minces dans vos conceptions peut rendre le contenu plus lisible ou transformer une mise en page statique en une présentation dynamique et énergique.

Les colonnes minces ne sont qu'un exemple de l'apprentissage d'une technique à partir de l'utiliser pour améliorer un design pour le web. J'avais hâte d'essayer des colonnes maigres et je n'ai pas été déçu.

L'ajout d'une colonne maigre à vos conceptions peut souvent être une décision inspirée. Il vous donne une flexibilité supplémentaire et peut transformer une mise en page par ailleurs statique en une structure pleine d'énergie.

Conception de grilles modulaires

Le magazine Avaunt contient de nombreuses mises en page inspirantes, mais je souhaite me concentrer sur deux pages en particulier. Cette diffusion contient des objets "Conception de la guerre froide" dans une conception qui pourrait être appliquée à une grande variété de types de contenu.

À première vue, les grilles modulaires peuvent paraître compliquées, mais elles sont faciles à utiliser. Cela me surprend que si peu de concepteurs de sites Web les utilisent. Je veux changer cela.

Lorsque vous utilisez judicieusement les grilles modulaires, elles peuvent remplir vos conceptions d'énergie. Ils sont excellents pour mettre en ordre de nombreux contenus variés, mais peuvent également créer des mises en page attrayantes lorsqu'il y a très peu de contenu.

Pour cette conception – inspirée par Avaunt – je base ma grille modulaire sur six colonnes symétriques et quatre uniformément rangées espacées. Les modules de grille définissent l'emplacement et la taille de mon contenu.

Je lie plusieurs modules afin de créer des zones spatiales pour les grandes images et le texte en cours d'exécution dans une colonne à gauche. Les lignes de contour aident à souligner la structure visuelle de la page.

Ce type de mise en page peut sembler compliqué au début, mais en réalité, il est magnifiquement simple à mettre en œuvre. Au lieu de baser mon balisage sur la présentation visuelle, je commence par utiliser les éléments les plus appropriés pour décrire mon contenu. Auparavant, j'utilisais des éléments de table pour implémenter des grilles modulaires. Quelques années plus tard, les divisions ont remplacé ces cellules. Incroyablement, maintenant, il me faut seulement deux éléments HTML structurels pour réaliser cette conception; un article suivi d'une liste ordonnée:

 
… 
 
… 

Cet article contient un titre, des paragraphes et une
tableau pour information tabulaire:

… 
 
… 
… 
… 

La grille modulaire des mini-plans est l'aspect visuel le plus compliqué de ma conception, mais le balisage qui la décrit est simple. Les plans étant classés par ordre chronologique, une liste ordonnée semble être l'élément HTML le plus approprié:

 1969 

 

 1969 

Mon code HTML ne pèse que 2 Ko et est inférieur à soixante lignes. C’est une bonne idée de valider ce balisage car un peu de temps passé à valider tôt économisera beaucoup plus de temps pour le débogage de CSS ultérieurement. J'ouvre également la page non stylée dans un navigateur car je dois toujours m'assurer que mon contenu est accessible sans feuille de style.

Je commence à développer une mise en page symétrique à trois colonnes pour les écrans de taille moyenne en isolant les styles de grille à l'aide d'une requête multimédia:

 Écran @média et (largeur minimale: 48em) {
corps {
affichage: grille;
Grille-modèle-colonnes: 1fr 1fr 1fr;
grille-colonne-gap: 2vw; }
}

L’article et la liste ordonnée sont les seuls descendants directs de body, mais c’est ce qu’ils contiennent que je veux placer en tant qu’éléments de la grille. J'utilise display: content; pour me permettre de placer leur contenu n'importe où sur ma grille:

 article, ol {
affichage: contenu; }

Chaque élément de mon article doit couvrir les trois colonnes. Je les place donc en utilisant les numéros de ligne, en commençant par la première ligne (1) et en terminant par la dernière ligne (-1):

 .standfirst,
section,
table {
grille-colonne: 1 / -1; }

Les éléments de ma liste ordonnée sont placés de manière égale dans la grille à trois colonnes. Cependant, ma conception exige que certains éléments s'étendent sur deux colonnes et une sur deux lignes. Les sélecteurs de type de type sont des outils parfaits pour cibler des éléments sans avoir recours à l'ajout de classes dans mon balisage. Je les utilise, le mot-clé span et la quantité de colonnes ou de lignes que je veux que les éléments couvrent:

 li: nth-of-type (4),
li: nième de type (5),
li: nième de type (6),
li: nième de type (14) {
grille-colonne: envergure 2; }

li: nième de type (6) {
rangée de la grille: portée 2; }

En affichant mon dessin dans un navigateur, je constate qu'il ne s'affiche pas exactement comme prévu, car certains modules de la grille sont vides. Par défaut, le flux normal de tout document organise les éléments de gauche à droite et de haut en bas, comme dans les langues occidentales. Lorsque les éléments ne correspondent pas à l'espace disponible dans une grille, l'algorithme de placement de la grille CSS laisse des espaces vides et les place sur la ligne suivante.

Je peux remplacer la valeur par défaut de l’algorithme en appliquant la propriété grid-auto-flow et une valeur dense à mon conteneur-grid, en l’occurrence le corps:

 body {
écoulement automatique de grille: dense; }

Row correspond à la valeur de grille-flux automatique par défaut, mais vous pouvez également choisir colonne, colonne dense et ligne dense. Utilisez judicieusement grid-auto-flow, car un navigateur remplit n'importe quel module vide avec le prochain élément du flux de documents qui peut tenir dans cet espace. Ce comportement modifie l’ordre visuel sans altérer la source, ce qui peut avoir des conséquences sur l’accessibilité.

Ma conception de taille moyenne ressemble maintenant à ce que j’avais prévu, il est donc temps de l’adapter pour les écrans plus grands. Je n'ai besoin que de modifications mineures dans les styles de la grille pour transformer mon article en une barre latérale (qui couvre toute la hauteur de ma mise en page), puis pour placer des éléments de liste spécifiques dans des modules sur une grille plus large à six colonnes:

 @media screen et (largeur minimum: 64em) {
corps {
Grille-modèle-colonnes: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

article {
grille-colonne: 1;
rangée de grille: 1 / -1; }

li: nième de type (4) {
grille-colonne: 5 / span 2; }

li: nième de type (5) {
grille-colonne: 2 / span 2; }

li: nième de type (6) {
grille-colonne: 4 / span 2;
rangée de grille: 2 / span 2; }

li: nième de type (14) {
grille-colonne: 5/7; }
}

Il peut parfois être difficile de suivre les lignes de placement de la grille, mais heureusement, CSS Grid offre plus d’une façon de réaliser une conception de grille modulaire. Utiliser des zones de modèle de grille est une approche alternative qui, à mon avis, ne suscite pas suffisamment d'attention.

En utilisant des zones de modèle de grille, je définis d'abord chaque module en lui attribuant un nom, puis en plaçant les éléments dans un module ou plusieurs modules adjacents appelés zones spatiales. Ce processus peut paraître compliqué, mais il s’agit en fait de l’un des moyens les plus simples et les plus évidents d’utiliser CSS Grid.

Je donne à chaque élément une valeur de zone de grille pour le placer dans ma grille, en commençant par le logo et l’article:

. ] [src*="logo"] {
zone de la grille: logo; }

article {
zone de grille: article; }

Ensuite, j'attribue une zone de grille à chacun de mes éléments de liste. J'ai choisi une simple valeur i + n, mais je pouvais choisir n'importe quelle valeur comprenant des mots, voire des lettres telles que a, b, c ou d.

 li: nth-of-type (1) {1
surface de la grille: i1; }

…

li: nième de type (14) {
surface de la grille: i14; }

Ma grille comporte six colonnes explicites et quatre lignes implicites, dont la hauteur est définie par la hauteur du contenu qu'elles contiennent. Je dessine ma grille en CSS à l'aide de la propriété grid-template-areas, où chaque période (.) Représente un module de grille:

 body {
Grille-modèle-colonnes: répéter (6, 1fr);
Grille-modèle-zones:
"..." . . . ".. .." .. ..
. . "
. . "
. . "
. . ";}

Ensuite, je place des éléments dans cette grille en utilisant les valeurs de zone de grille que j'ai définies précédemment. Si je répète des valeurs sur plusieurs modules adjacents – sur des colonnes ou des lignes -, cet élément se développe pour créer une zone spatiale. Le fait de laisser un point (.) Crée un module vide:

 body {
Grille-modèle-colonnes: répéter (6, 1fr);
Grille-modèle-zones:
"logo de l'article i1 i2 i3 i3"
"article i4 i4 i5 i5
"article i7 i8 i5 i5
"article i10 i11 i12 i14 i14"; }

Jusqu'à présent, dans chacun des exemples, j'ai isolé les styles de présentation pour différentes tailles d'écran à l'aide de points d'arrêt d'interrogation de support. Cette technique est devenue le moyen standard de traiter les complexités de la conception Web réactive. Cependant, il existe une technique permettant de développer des grilles modulaires réactives sans utiliser de requêtes multimédia. Cette technique tire parti de la capacité du navigateur à redistribuer le contenu.

Avant d’aller plus loin, il convient de rappeler que ma conception ne nécessite que deux éléments HTML structurels; une liste ordonnée pour le contenu et un article que je transforme en barre latérale lorsque la largeur disponible est suffisante pour que les deux éléments se tiennent côte à côte. Lorsque la largeur est insuffisante, ces éléments s’empilent verticalement dans l’ordre du contenu:

 
… 
 
… 

La liste ordonnée constitue la partie la plus importante de ma conception et doit toujours occuper au moins 60% de la largeur d’une fenêtre. Pour que cela se produise, j’utilise une déclaration min-width:

 ol {
largeur minimale: 60%; }

Alors que je recommande normalement d'utiliser CSS Grid pour la mise en page globale et Flexbox pour les composants flexibles, je mets ce conseil en application pour le mettre en œuvre.

Je transforme l'élément de corps dans un conteneur souple, puis mon article est sécurisé. se développe pour remplir tout l’espace horizontal à l’aide de la propriété flex-grow d’une valeur égale à 1:

 body {
affichage: flex; }

article {
croissance flexible: 1; }

Pour que ma liste ordonnée occupe également tout l'espace disponible chaque fois que les deux éléments sont côte à côte, je lui attribue une valeur ridiculement élevée de 999:

 article {
croissance flexible: 999; }

L'utilisation de flex-base fournit une largeur de départ idéale pour l'article. En configurant l’emballage du conteneur flex sur emballage, j’assure l’empilement des deux éléments lorsque la largeur minimale de la liste est atteinte et l’espace insuffisant pour se placer côte à côte:

 body {
enveloppe souple: enveloppe; }

article {
base flexible: 20rem; }

Je souhaite créer une grille modulaire flexible permettant un nombre quelconque de modules. Plutôt que de spécifier le nombre de colonnes ou de lignes, utiliser la commande repeat permet à un navigateur de créer autant de modules que nécessaire. remplissage automatique remplit tout l'espace disponible, en enveloppant le contenu si nécessaire. minmax donne à chaque module une largeur minimale et maximale, ici 10rem et 1fr:

 ol {
grid-template-columns: répéter (remplissage automatique, minmax (10rem, 1fr)); grille-colonne-gap: 2vw; }

Pour éviter que les modules restent vides, j'utilise à nouveau grid-auto-flow avec une valeur dense. L’algorithme du navigateur redistribue mon contenu pour remplir tous les modules vides:

 ol {
écoulement automatique de grille: dense; }

Comme précédemment, certains éléments de liste s'étendent sur deux colonnes et un sur deux lignes. De nouveau, j'utilise des sélecteurs de type de type pour cibler des éléments de liste spécifiques, puis colonne-grille ou ligne-grille avec le mot-clé span suivi du nombre de colonnes ou de lignes que je souhaite étendre:

 li: nth-of- type (4),
li: nième de type (5),
li: nième de type (14) {
grille-colonne: envergure 2; }

li: nième de type (6) {
grille-colonne: envergure 2;
rangée de la grille: portée 2; }

Ce CSS simple crée un design réactif qui s'adapte à son environnement sans requérir de multiples requêtes de supports ni de jeux de styles distincts.