La plupart des personnes impliquées d'une manière ou d'une autre dans la mise en page des sites passent par ... Appelons cela le «chemin du bootstrap». C'est une telle position philosophique lorsque vous avez 12 colonnes et rien de plus. Vous prenez les éléments, les mettez dans certaines colonnes et tout va bien pour vous. Vous pouvez éteindre le cerveau, plonger dans le nirvana et les mains elles-mêmes organiseront les éléments. Beauté ... Mais alors un designer moderne apparaît qui dessine quelque chose qui, eh bien, n'est pas du tout d'accord avec ce merveilleux concept. Les colonnes sont clairement plus grandes, elles sont toutes de largeurs différentes, et même quelque chose doit être aligné en hauteur. Horreur. Et cela se produit plus souvent, surtout si vous vous éloignez des magasins ou des zones d'administration. Aujourd'hui, nous allons parler de quel type de miracle il est utilisé là-bas et comment il peut être préparé en CSS moderne. Il y aura très peu de code, principalement des réflexions et des images.
Les artistes traditionnels ont une chose très cool - une sorte de grille de diagonales et de lignes perpendiculaires qui leur est ajoutée, ce qui aide non seulement à créer des compositions standard, mais vous permet également de transférer manuellement l'image entre des toiles de proportions différentes, tout en conservant ces mêmes compositions. Je ne sais pas qui et quand l'a inventé, mais l'invention n'est clairement pas nouvelle. Si vous parcourez les magazines sur papier glacé pendant une période suffisamment longue, vous remarquerez que certains modèles ne dépendent pas de la taille des éléments et sont conservés avec différentes proportions de pages ou de blocs alloués au contenu. Il semble y être associé au terme «grilles modulaires typographiques». En général, depuis l'Antiquité, il est à la mode de s'occuper de la typographie sur les proportions, les compositions et les proportions. De nombreux typographes et architectes bien connus ont proposé à un moment donné leurs canons sur la façon dont il est meilleur / plus facile / plus beau de diviser un rectangle sans une règle avec des divisions. Certains d'entre eux étaient liés aux proportions du papier, mais certains vous permettaient de travailler avec n'importe quel rectangle. Et donc, cette approche de répulsion de la composition, quelles que soient les proportions du vecteur d'information, nous est venue lentement mais sûrement sur le web, déplaçant la répulsion des locuteurs, du moins dans le cadre des sites publicitaires et «wow». En fait, nous parlons d'une grille, largement connue dans les cercles étroits, qui au cours des deux dernières années a souvent été appelée la "grille du canon d'or", et avant cela, si je comprends bien, elle était simplement utilisée sans nom spécifique.
Grille du canon d'or
Habituellement, lorsque les mots «doré», «canon» et «design» sont entendus, les gens se souviennent de diverses constructions géométriques confuses, quelque chose comme ça:
Ce diagramme simple montre quelles actions, en général, doivent être effectuées pour construire cette mystérieuse grille, qui sera discutée dans cet article. Les artistes et les photographes s'arrêtent généralement à l'étape 2, les concepteurs vont un peu plus loin, mais nous avons besoin du résultat de la toute dernière étape, où toutes les diagonales sont déjà effacées et seules les lignes verticales et horizontales restent, car dans le navigateur, nous sommes tous constitués de rectangles et nous pensons rectangles et en général nous avons un monde rectangulaire:
On peut voir que la grille se compose de différentes tailles de cellules. Ils sont tous différents! Et il y en a beaucoup! Aaaaaaaaaaa !!!
Tout codeur de maquillage doit désormais fuir:
En fait, si vous prenez un morceau de papier et dessinez, alors tout deviendra plus clair. Si vous divisez une feuille de papier en 4 parties égales, puis dessinez toutes les diagonales possibles, les points d'intersection des diagonales entre eux et avec des lignes horizontales ou verticales sont formés. Si nous dessinons plus de lignes horizontales ou verticales à travers ces points, puis construisons plus de diagonales, alors nous obtenons plus de points d'intersection, etc. Vous pouvez donc continuer indéfiniment.
Si vous vous souvenez encore de la géométrie de l'école, vous avez probablement déjà deviné que la tâche de diviser un segment en parties égales à l'aide d'une boussole et d'une règle est délicate. Et il en est ainsi. En fin de compte, nous obtenons des lignes qui coupent la feuille 1/2, 1/3, 1/4, 1/6, 1/8, etc. En fait, dans le monde moderne, vous n’avez même pas besoin de construire quoi que ce soit - l’ordinateur lui-même peut tout partager, mais, par souci d’horizon, il est utile de savoir comment il est construit à la manière de grand-père.
Je ne sais pas s'il y a des noms pour les éléments de cette grille dans le monde de l'art, mais nous utiliserons les termes "lignes", "colonnes" et "blocs" ou "cellules", car ils sont les plus proches du monde CSS. Le plus grand nombre de lignes et de colonnes dans une telle grille, que j'ai rencontré - 20, comme dans l'image ci-dessus. Parfois, cela se produit moins lorsque moins d'étapes ont été prises lors de la construction de la grille. Je pense que cela n'a aucun sens d'en faire plus de 20, car la différence de taille de police sur différents écrans élimine presque la différence entre des blocs plus petits avec plus de lignes et de colonnes.
Si vous prenez une telle grille de 20 lignes et 20 colonnes et que vous la peignez un peu, vous verrez qu'il y a vraiment des lignes qui divisent tout en parties égales. Toute la difficulté de la perception réside dans le fait que les fractions paires et impaires sont mélangées ici dans un schéma.
Lors du développement de magasins standard, de pages de destination, etc. une telle grille n'est pas nécessaire. Cela ne fera que compliquer tout à l'improviste, et l'utilisateur ne remarquera toujours pas la différence. Mais je crois que chaque front-end devrait au moins une fois faire pivoter un design construit dessus dans une atmosphère détendue afin de se vider un peu le cerveau et de ne pas paniquer si vous devez encore faire face à quelque chose comme ça à l'avenir.
Beaucoup d'espace, peu de contenu
Une telle grille est particulièrement bonne sur les sites où il n'y a pas beaucoup de contenu, elle ne change pas, et l'accent est mis sur sa présentation et sur l'impression du visiteur. En regardant de tels sites, je ne peux pas sortir ces mêmes magazines de mode de ma tête et il me semble approprié d'appeler une telle mise en page "composition de magazine". Parcourir de tels sites ressemble vraiment à feuilleter des magazines, en particulier avec le défilement page par page. Dans le même temps, vous pouvez voir qu'ils sont presque toujours conçus dans toute leur splendeur uniquement pour le bureau, pour les écrans horizontaux, où ils sont très similaires à une page de deux pages. Par exemple, prenons ces deux concepts:
Nous les utiliserons comme exemples d'utilisation de notre grille. Mais d'abord, quelques mots sur les proportions et l'espace négatif. Si vous ne savez pas ce que c'est, alors je vous recommande fortement de lire le livre « Design for Non-Designers ».
Sur ces sites, nous avons généralement trois types d'éléments: texte, images ou vidéos et formes décoratives. Débutants, et parfois pas très débutants, les concepteurs de mise en page prennent la mise en page et commencent à copier les dimensions de tout cela en pixels sur le front. Y compris le rembourrage. Et les tailles de police. Par conséquent, lorsque vous modifiez les proportions de la fenêtre du navigateur, tout «se déplace» et n'a plus l'air si bien. Cela est dû au fait que les propriétés des éléments liés à la taille de la police (y compris le nombre approximatif de lettres ou de mots en lignes, les rayons de courbures, etc.) se décomposent et l'espace négatif est redistribué. Et si le problème des polices peut toujours être résolu à l'aide de passerelles CSS , d' une typographie adaptative et de définir la taille de tout dans REM / EM (comme sur le même Smashing Magazine, par exemple), alors avec un espace négatif, vous avez besoin de mesures plus sérieuses. Et notre étrange grille vient à la rescousse.
Pourcentage magique contre le système
Si vous faites la mise en page de ces pages à l'ancienne, par positionnement absolu, sans être lié à la grille, cette leçon se transformera en une copie sans fin d'une variété de nombres indiquant des pourcentages ou des pixels pour les propriétés supérieure, gauche, droite et inférieure en CSS. Ce sera juste une montagne de nombres magiques dans laquelle il est impossible de naviguer, ce qui est absolument impossible à vérifier «à l'œil nu», sans parler au moins d'une sorte de système. Et je voudrais tout exprimer dans un ensemble de chiffres simples et compréhensibles, comme avec les colonnes bootstrap. Ici, outre la commodité, il y a encore la question de la constance, de la cohérence ou, comme il est à la mode de dire, de la cohérence. Dans notre contexte, si l'ensemble des tailles et positions des éléments n'est pas limité, il est très difficile de maintenir la cohérence et tout sur les pages commence à «danser» dans des directions différentes. Il s'agit d'une maladie éternelle des sites qui n'ont pas de guide de style intégré directement dans le code et les têtes de développeurs.
Pour vous faire ressentir toute la douleur, imaginez que l'élément de navigation pivote de 90 degrés, aligné avec son bord supérieur (maintenant à gauche) sur la grille sur le côté droit de la page, mais sa hauteur (maintenant largeur) est inférieure à la largeur des cellules de la grille dans lesquelles il se trouve, et les personnes qui ne connaissent pas la grille, par habitude, mesurent la distance entre son bord inférieur (maintenant à droite) et le côté droit de la fenêtre du navigateur comme la plus petite, mais cette distance n'a plus la moindre relation avec la grille. Il s'agit de la distance entre le bord droit de l'écran et la ligne de guide de grille moins la taille du texte conditionnel avec une certaine hauteur de ligne dans cet élément particulier. Et il y a des dizaines de ces éléments sur la page. Et leurs positions dans CSS n'ont rien à voir avec la grille, bien qu'elles y soient alignées en théorie. Ici, il serait nécessaire d'insérer une image des premiers Black Ops, où le héros voit les chiffres. Beaucoup de chiffres.
Mais si je vous dis qu'il y a un système à tout cela? Posons notre grille «courbe» 20x20 sur les pages ci-dessus et jetons un coup d'œil.
Ouah. Tous les éléments sont disposés exactement sur la grille. La seule question est dans quelle direction le texte est aligné en eux - gauche, droite, haut ou bas, mais la position des blocs eux-mêmes n'est clairement pas aléatoire. Voyons un deuxième exemple:
Et encore une fois, tout n'est pas localisé au hasard. Le seul élément légèrement assommé est le texte au centre. Mais après l'avoir regardé, il devient clair qu'il est légèrement décalé vers la droite (indiqué par des flèches), mais si la transformation est supprimée, il se mettra également exactement en place, que j'ai encerclé en rose.
Peu importe à quel point la grille peut sembler étrange à première vue, elle introduit le système dans la conception, et il serait logique d'enregistrer ce système dans le code. En organisant tout strictement sur une grille et en utilisant les transformations CSS selon les besoins, nous rendons le code plus compréhensible et maintenable.
Peut-être avez-vous vu des sites avec ce type de conception et beaucoup d'animations (même s'il n'y a pas de WebGL et de transitions complexes entre les pages, alors wow.js est presque toujours là). Ainsi, tout est exactement identique sur la grille, et toute l'apparence des éléments se produit à l'aide de transformations CSS, lorsque l'élément est «supprimé» de la grille à l'avance par transformation, puis animé à son état d'origine.
Il est important de noter le mince losange autour de la fille. Vous pourriez penser qu'il a quitté le système par la gauche, mais ce n'est qu'à première vue. En fait, il n'est pas attaché à elle, mais à l'image, et il n'a «volé» qu'en raison de l'inégalité de la grille.
La logique du comportement est plus importante que les nombres spécifiques
En utilisant l'exemple de ce détail, à peine perceptible à première vue, un principe très important, presque le plus important de la composition de ces conceptions pour le bureau est révélé, à savoir: la logique du comportement des éléments vient toujours en premier. À quoi est-il attaché? Par rapport à ce qui est aligné? Comment la conception globale de la page est-elle liée à l'état de cet élément particulier? Que se passe-t-il lorsque la fenêtre ou le contenu est légèrement redimensionné? Ce sont les questions qui font de la mise en page simple une bonne mise en page qui a l'air bien sur n'importe quel écran.
Ne copiez pas seulement les dimensions des pixels comme ça, étudiez les différentes options de positionnement en CSS et faites toujours attention au contexte. Cela peut grandement simplifier la prise en charge du code et travailler sur l'adaptabilité.
Apprendre à compter jusqu'à 20
Avant de passer à la partie pratique et d'écrire du code, je voudrais dire quelques mots sur le comptage des blocs dans une telle grille. Il peut être affiché à la fois dans la mise en page et sur la page (via une image d'arrière-plan de 100 à 100% pour un conteneur avec une grille), mais il faut quand même compter.
Personnellement, il semble pratique avec cette approche de peindre la grille en morceaux de blocs 5x5 et de les parcourir:
Compter de 1, 5/6, 10/11, 15/16, 20, ajouter ou soustraire des nombres de 1 à 5 n'est pas si difficile, la seule chose qui peut être un peu déroutante est la soustraction (au début, tout le monde se trompe par l'un dans un sens ou dans l'autre) mais ça passe vite. Bien sûr, vous demandez, pourquoi ne pas compter avec 0, comme les gens normaux? Mais le fait est que dans CSS Grid, le nombre passe de 1.
Grilles CSS - balle dorée
Rappelez-vous ce défi lorsque quelque chose est fait en 30 lignes de code? Ainsi, une telle page peut être composée de 30 lignes et le code sera parfaitement compréhensible. Ne croyez pas? Voyons voir.
Le CSS moderne nous offre une excellente occasion de faire une telle grille - des grilles . Ils sont comme spécialement conçus pour cette tâche. En utilisant les propriétés grille-modèle-colonnes et grille-modèle-lignes, vous pouvez définir les relations entre les tailles de nos blocs, il vous suffit de les compter.
Armé d'une calculatrice, ce n'est pas difficile. Et si à portée de main il y a déjà une grille dessinée avec des guides, cela devient alors une tâche purement mécanique. Si nous prenons la première cellule d'une ligne ou d'une colonne comme 1, nous obtenons une séquence de tailles 1, 1, 2, 4, 2,66, 5,33, etc. Ce sont les tailles de cellule par rapport à la première dans le cas d'une grille à 20 lignes ou colonnes et ces guides, comme dans nos exemples. Si votre projet a un nombre différent de cellules dans la grille, vous devrez tout recalculer vous-même. Nous les substituons dans les propriétés ci-dessus:
.golden-grid { grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; }
Pas si difficile. Habituellement, vous devez étirer la grille en plein écran et définir son positionnement, alors faisons-le. Vous pouvez afficher une image avec une grille en arrière-plan pour vous en assurer:
.golden-grid { display: grid; position: relative; height: 100vh; width: 100%; grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; background: url('grid.jpg') left top / 100% 100% no-repeat; }
Sur cette grille peut être considérée comme terminée.
Composition
Nous revenons aux images dans lesquelles l'emplacement des blocs sur les mises en page a été noté, et nous commençons à composer. Nous ne mesurons rien, pas de pixels, seulement des nombres de cellules dans le tableau. Commençons par le concept violet.
<div class='golden-grid'> ... </div>
Nous regardons l'emplacement de la photo avec la fille - elle part du bord gauche, occupe la moitié verticalement et un peu plus de la moitié horizontalement. Dans le contexte de la grille, elle part de la cellule [11, 1] et s'étend de 10 vers le bas et de 12 vers la droite. En fait, si vous vous entraînez un peu, il sera possible de deviner ces chiffres avec une grande précision, sans compter la cellule.
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> </div>
Nous allons plus loin - l'image de fond de gauche. Il occupe les 20 cellules en hauteur et six en longueur. Commence par le septième? Le compteur oculaire peut tromper, nous vérifions - tout va bien.
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> </div>
Ainsi, nous parcourons tous les objets de la page:
<div class='golden-grid'> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> <div style='grid-area: 14 / 15 / span 7 / span 6;'></div> <div style='grid-area: 1 / 9 / span 13 / span 12;'></div> <div style='grid-area: 3 / 17 / span 1 / span 1;'></div> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <div style='grid-area: 14 / 11 / span 1 / span 2;'></div> <div style='grid-area: 15 / 11 / span 3 / span 6;'></div> <div style='grid-area: 7 / 16 / span 4 / span 1;'></div> <div style='grid-area: 7 / 17 / span 1 / span 1;'></div> </div>
J'écris spécialement des styles en ligne afin qu'il soit aussi compact que possible et que vous puissiez couvrir toute la page en un coup d'œil. En pratique, bien sûr, il est logique de mettre cela dans des classes en CSS afin qu'il soit au moins plus facile d'écrire des expressions multimédias.
La disposition des blocs sur la première page est prête. Nous passons à la seconde et procédons de manière similaire:
<div class='golden-grid'> <div style='grid-area: 1 / 11 / span 20 / span 10;'></div> <div style='grid-area: 4 / 13 / span 14 / span 4;'></div> <div style='grid-area: 3 / 3 / span 1 / span 2;'></div> <div style='grid-area: 3 / 17 / span 1 / span 2;'></div> <div style='grid-area: 7 / 4 / span 1 / span 4;'></div> <div style='grid-area: 11 / 3 / span 5 / span 1;'></div> <div style='grid-area: 17 / 4 / span 1 / span 4;'></div> <div style='grid-area: 12 / 8 / span 6 / span 3; transform: translateX(10%);'></div> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <div style='grid-area: 8 / 18 / span 6 / span 1;'></div> </div>
Pour le texte, une transformation a été ajoutée pour qu'elle reste dans la grille. Regardons le résultat (en haut de l'image, ci-dessous sont des captures d'écran des positions composées des éléments avec une grille intégrée sous eux):
Il reste à définir les couleurs des éléments, insérer des images, écrire des textes et ajouter des rotations de 90 degrés (grâce à la rotation CSS) et un alignement gauche-droite et haut-bas pour eux. Mais ce ne sont que des bagatelles - l'essentiel est que la tâche la plus problématique avec le positionnement a été résolue rapidement et simplement.
Bac à sable pour les expériences .
Et l'adaptabilité?
La pratique montre que ces sites sont conçus pour des écrans horizontaux, et la grille vous permet de conserver une belle apparence dans différentes proportions - plein écran, iPad pivoté, Nexus 7 pivoté - il sera bon partout. Il y a deux situations principales où quelque chose doit être changé:
- La hauteur de la fenêtre d'affichage est trop petite (très large, mais faible - cela se produit si vous redimensionnez manuellement la fenêtre ou si le clavier s'affiche sur la tablette).
- Une fenêtre haute mais étroite lorsque la «propagation de deux pages» ne tient pas dans la largeur et se déforme (téléphones, tablettes dans une orientation verticale).
La première question est généralement résolue en définissant la hauteur minimale pour les sections faites sur une telle grille et en désactivant le défilement page par page s'il y en a un. Ainsi, l'apparence est préservée et les éléments interactifs restent accessibles - vous pouvez les faire défiler.
La version mobile verticale est nécessaire principalement pour la consommation de contenu. Là, vous ne pouvez pas vous retourner et faire une indentation géante pour la beauté et l'impression. Habituellement, le défilement de la page est désactivé, la grille s'estompe en arrière-plan (dans la mesure où tous ses éléments sont affichés: bloc) et seul le rythme vertical reste, qui est obtenu davantage à partir de l'indentation associée à la taille de la police. Bien qu'il y ait parfois des exceptions lorsqu'un concepteur parvient à tout arranger magnifiquement sur de petits écrans. Dans ce cas, nous changeons simplement la propriété grid-area en une nouvelle et alignons le texte dans la bonne direction.
Un point important est les points d'arrêt sur lesquels tout est reconstruit. Il y a des partisans de les attacher à la taille des appareils populaires, mais il y a régulièrement des situations où, après avoir ajouté de tels points, tout ne fonctionne pas très bien - soit sur la version mobile, il serait possible d'en adapter plus, ou au milieu de la tablette quelque chose devrait être retiré ou réorganisé et. etc. Tout repose sur le design original d'un grand écran. Si souvent, le processus d'adaptation vient au concept de contenu d'abord ou de variations sur ce sujet, lorsque le contenu est pris comme base et que les points sont sélectionnés en fonction de considérations de conception, de commodité et non de la taille d'écran des appareils populaires. Autrement dit, le contenu est principal, il est important qu'il soit pratique de consommer sous sa forme prévue, et les versions mobile, tablette et ordinateur de bureau sont déjà secondaires. Ce ne sont que des noms d'outils, mais pas la base. Oui, cela peut conduire au fait qu'il y aura plus de points d'arrêt que d'habitude 2-3, il peut en résulter 5 ou même 7, mais cette approche vous permet de faire une mise en page qui semble belle sur toutes les tailles d'écran dans les limites indiquées.
Pour résumer
Je comprends que tout le monde et pas tous les jours ne doivent pas travailler avec de telles pages, mais ces grilles sont assez courantes dans différents sites non standard et au moins il est utile de les connaître afin qu'en cas de collision avec une telle mise en page, vous ne paniquez pas et ne passez pas beaucoup de temps sur mesurer des tailles inutiles en pixels ou en pourcentage, et une fois le calcul des ratios de taille des cellules et l'utilisation de CSS modernes, l'avantage de prendre en charge les navigateurs plus anciens dans de tels projets est une rareté.