Code comme documentation: nouvelles stratégies avec la grille CSS

SuperCool, une société de conception Web à croissance rapide, crée des sites Web personnalisés pour les clients d'art et utilise des systèmes CMS artisanaux standard; Il propose une conception graphique de haut niveau, ainsi qu'une typographie relativement exigeante et des conseils artistiques. Nous nous tournons vers CSS Grid depuis quelques mois. Nous passons lentement pour nous permettre de découvrir de nouveaux paradigmes et méthodes de conception au lieu de simplement transférer les anciennes habitudes dans une nouvelle syntaxe.

Jusqu'à présent, nous avons développé des stratégies très utiles pour suivre les dispositions. J'ai écrit des mixins très intelligents, en utilisant des régions et des modèles nommés, et nous avons trouvé des conventions de base pour créer du code très lisible. Je pense qu'il serait très précieux de passer à pas dans la mise en œuvre complète de la production d'un seul composant majeur à l'aide de la grille, de fouiller certains des problèmes de conception qu'il soulève et de vous guider pour éviter les pièges que nous rencontrons. CSS Grid est une grande spécification avec de nombreuses façons possibles et de nombreuses façons correctes, mais à un moment donné, vous devez déterminer votre méthode et l'obtenir en ligne.

Je m'attends à ce que vous ayez une certaine connaissance de CSS, SASS, BEM et que vous soyez intéressé par le prototypage des tâches entièrement implémentées, accessibles et personnalisées (avec plus de 50 composants) avec des documents de type Sketch ou Photoshop dans un calendrier serré (comme une semaine).

Tout d'abord, identifions et séparons les différentes tâches de codage dans la conception et planifions comment nous les gérerons:

1. Police: le concepteur a défini un système de polices.
2. Couleur: Tout d'abord, nous construisons un modèle de thème, puis l'incluons dans la section.
3. Contenu: Quels éléments sont inclus dans ce bloc? Quelle est sa variante? C'est là que notre mélange BEM entre en jeu.
4. Disposition: c'est ainsi que le contenu est placé dans ce bloc. Vous voudrez peut-être passer directement à cette étape.
5. Contrat: C'est exactement ainsi que nous avons choisi d'écrire tout ce qui précède. Il y a beaucoup de bonnes réponses dans CSS, il est donc important que nous soyons tous d'accord avec une convention, les règles. Cela devrait en effet être classé en premier, mais pour cet article, nous le résumerons à la fin.

Système de police

Nous utilisons des classes utilitaires (telles que le texte H - h1, H-Text - Badge) pour définir le style de police. Il peut y avoir une centaine de styles de police dans un projet. Nous utilisons Typex pour exporter ces styles directement à partir de Sketch dans notre PatternLab. C'est ce qu'un autre article en soi, alors supposons que la police a été traitée. Nous n'introduirons pas les polices dans nos composants.

Utilisation des couleurs

Les thèmes ajoutent simplement quelques minuscules mixins, donc idéalement, nous ne verrons pas beaucoup de règles de couleur dans la section. Nous les stockons tous dans la section _themer.scss de la bibliothèque "mixin et modèle" afin que nous puissions nous assurer que le système de conception du site Web est suivi. De cette façon, lorsque quelqu'un revient à la construction plus tard, il a une section de référence clé pour décrire les règles de conception et de marque. Lorsque vous construisez et entretiennent de nombreux sites Web sur le même marché - mais chacun a des spécifications de marque différentes - vous devez vous assurer qu'une marque n'est pas confondue avec une autre! Ainsi, comme les polices, nous abstracons les règles de couleur des pièces. Essentiellement, dans notre fichier _header.scss nous nous concentrons en fait uniquement sur la mise en page (autant que possible).

Étant donné que nous acceptons toujours d'utiliser notre mixin pour Thematic, c'est comment l'inclure sur l'élément:

 <code>@include var($property, $value);</code>

Nous allons ensuite configurer un modèle de thème qui illustre comment la couleur fonctionne sur ce site Web particulier et l'appliquer aux composants:

 <code>@include theme;</code>

Voici l'exemple de modèle de thème que nous utiliserons avec ce titre de page. C'est très simple.

Nous associons la couleur avec du noir ou du blanc. Nous comptons sur des règles de contraste et les retournons pour mettre l'accent, probablement sur des événements (tels que le volant) ou des appels à l'action mis en évidence. C'est tout ce que nous devons faire pour y parvenir, et maintenant nous avons une documentation sur la façon dont les couleurs fonctionnent réellement sur ce site Web. Si nous devons déboguer ou étendre l'interface utilisateur, nous pouvons y accéder et le vérifier.

Nous voulons également préparer l'héritage pour nous aider, alors identifions quelques conventions utiles:

• Réglez le remplissage de l'icône SVG sur CurrentColor dans votre pipeline (en passant, la taille par défaut de CSS est width: 1em; height: 1em; font-size: inherit; ).
• Configurer à la base<a></a> pour CurrentColor.
• Écrivez l'abréviation, les frontières héritées (telles que 1px solid ou 1px solid currentColor ).

Avec ce modèle de sujet, nous pouvons générer un certain nombre de sujets, peut-être les stocker en tant que classes d'utilité ou faire une boucle via la liste des modificateurs dans le composant, ou simplement permettre à l'utilisateur de définir des variables directement sur les blocs dans le CMS. Lorsque IE 11 représente moins de 1% de nos statistiques, nous pouvons faire plus avec les variables, mais cela suffit pour notre utilisation actuelle.

Ne dévions pas du sujet. Et la grille? !

Composants de contenu

Grid nous permet de décrire avec précision ce que nous avons dans chaque section d'une manière nouvelle. Cela change vraiment la donne pour l'agence de conception qui construit une nouvelle interface utilisateur pour chaque projet, et comme nous l'explorons, nous en découvrons de nouvelles applications.

Pour fournir un contexte: nous utilisons CRAFT CMS pour personnaliser chaque interface pour nos clients et créer des champs personnalisés pour répondre à leurs besoins spécifiques et à leur modèle de contenu. Nous avons des outils internes qui peuvent extraire des événements de l'API de billetterie et en créer des entrées, qui peuvent ensuite être modifiées et étendues dans le CMS (ou créé complètement). Les clients peuvent remplir ou modifier les champs nommés dans la zone de page permanente et peuvent également ajouter le bloc de marque conçu entier à la disposition de chaque page pendant qu'ils les construisent.

Il y a beaucoup d'UIS. Les clients ont beaucoup de contrôle sur le contenu, et nous avons beaucoup de contrôle sur HTML, nous pouvons donc nous assurer qu'il existe du code sémantique accessible de haute qualité sur la page. Nous développons conjointement des modèles de contenu pendant le processus de découverte, puis les laissons créer librement du contenu. Ils ajoutent ce qu'ils veulent et nous nous assurons que cela fonctionne et a toujours l'air bien. Mieux que bien! super . (Désolé !: P)

Donc, en tant que développeur, je dois peser les priorités concurrentes:

• Accessibilité, disponibilité
• Marque et conception graphique
• performance
• Entretien et santé de base

Regardons-les un par un:

Accessibilité

HTML accessible et logique est mon préféré. À tout le moins, mon projet doit obtenir un score d'accessibilité verte dans le score du phare. (Je plaisante, je veux que ces délicieux chemins et pages de base sont testés à l'aide de certains lecteurs d'écran (onglets de clavier, navigation par clavier), simulateur à basse vision, dasher, accès vocal et commutateurs binaires. (Je travaille également pour les robots et les gâteaux, donc c'est une grande partie de mon travail de développement.) J'ai ajouté encore et encore des numéros de téléphone cliquables et des adresses e-mail à la page. Je veux juste que les gens arrivent là où ils veulent aller.

Je m'inquiète de la façon dont le contenu peut être réorganisé par Grid (et Flexbox). Maintenant que j'ai fait plusieurs versions, je pense en fait que Grid peut nous aider à résoudre ce problème. Avec la grille CSS, il n'y a aucune raison de déplacer HTML pour la mise en page. Nous pouvons revenir à des séquences linéaires qui traitent l'ensemble du document comme une logique comme notre principale préoccupation.

Marque et performance et maintenance

Les lieux d'art nécessitent des conceptions graphiques de haut niveau, unifiées sur les impressions et le Web, et nécessitent des matériaux en constante évolution (tels que des programmes, des manuels, des billets, des affiches, des micro-Websites, etc.) pour distribuer à leur public, y compris les obligations de marketing contractuelles qui doivent être remplies. Comme vous pouvez l'imaginer, nous avons beaucoup de grandes images de haute qualité qui nécessitent un traitement prioritaire et sont souvent livrées avec une marque forte d'impression. Cela signifie que nous devrons peut-être fournir à la page une quinzaine de polices personnalisées (y compris des variations d'épaisseur, des polices d'affichage, etc.) ainsi que du CSS complexe. Nous devons nous garder aussi rationalisés que possible. Nous envoyons actuellement environ 20 kb nano gzipped CSS, mais je travaille à la réduire davantage.

Cependant, nous gardons toute la longueur du nom de la région de la grille en définissant l'identifiant de réduction sur false dans la tâche PostCSS. Avoir les diagrammes de disposition disponibles dans Devtools est plus utile que d'économiser ces petites quantités d'octets. Pour le maintien, l'auto-documentation et votre future auto-renbugage de ce site Web sans accès à références dans un train retardé dans le pont Sowerby: gardez la carte.

Santé du code

La façon d'équilibrer tous ces besoins concurrents est d'articuler et de conclure un accord afin que moins de contenu soit corrigé dans le test et que les problèmes résolus restent résolus . Nous vérifions tous les composants que nous construisons et nous assurons qu'ils commencent toujours par le titre, les liens pointent vers l'emplacement, les boutons déclenchent des actions, les objets dénombrables livrés comme listes et préfixés avec<nav></nav> , le temps est<time></time> , Div Soup est le petit déjeuner - Bases.

Avec la grille CSS, il n'y a aucune raison de déplacer HTML pour la mise en page . Votre contenu peut toujours circuler logiquement, tandis que les changements de mise en page se produisent dans CSS. Et, comme il n'y a pas besoin de marges ou de rembourrage pour créer un espacement, vous pouvez simplement déclarer:

 <code>.o-grid .o-grid { width:100%; }</code>

… Pour garantir que un certain nombre de groupes imbriqués occupent visuellement la même grille. HTML peut guider les choses plus clairement: plus près des documents.

Il y a beaucoup à gérer entre le titre et l'action, et mon défi est de garder une trace de tous ces champs dans tous ces composants tout en m'assurant fidèlement les spécifications de conception afin qu'elles soient traversables, scanables, linéarisables et faciles à lire d'une manière logique et compréhensible.

Présentons mon premier mélange de grille étonnamment utile.

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

Utiliser ce mélange n'importe où signifie:

1. Chaque section de composants commence désormais par sa liste de tous les éléments possibles, qui est une documentation très pratique, en particulier lorsque les twiggings sont réellement des composants frontaux.
2. Le mélange est responsable de l'allocation des zones de grille.
3. Les noms d'élément et de composants restent cohérents dans Sketch, CSS et HTML, et toute incohérence sera très évidente car la mise en page échouera. Je suis ferme, mais juste.
4. La dénomination BEM est automatiquement appliquée, mais ne gâche pas les choses dans la section.

Maintenant, dans la section, nous déclarerons uniquement les alers de la grille, en utilisant des mots anglais simples, nous donnant une série de cartes de mise en page qui correspondent également aux champs de base de données. Super facile à lire!

Voici un exemple de la façon d'utiliser ce mixin:

Nous avons décidé de s'en tenir aux régions nommées pour des grilles internes parce que j'ai lu un excellent article sur ce site expliquant comment l'autopréfixeur gère la grille de 11 si vous vous en tenez aux propriétés prises en charge énumérées - et il le fait dans la plupart des cas. Si vous affichez ce cas de test en utilisant un mode de débogage super utile avec AutopRefixer appliqué dans votre test de navigateur, vous le verrez fonctionner.

Mais il y a des pièges! Vous devez définir les éléments en ligne en tant que blocs pour vous assurer qu'ils fonctionnent toujours comme des unités de grille dans IE 11. Commentez la ligne de marqueur dans l'exemple pour voir ce qui se passerait d'autre:

Aie! Faites attention à ces pièces. Vous constaterez peut-être que certaines versions de IE 11 ne ramasseront même pas ce correctif, auquel cas vous pourriez essayer d'utiliser simplement<div> Tags… soupir.<p> Je n'ai pas inclus <code>display: grid dans ce mixin car dans certains cas, la grille réelle est définie sur le conteneur interne, par exemple, mais nous voulons toujours que la grille correspond à la bonne classe BEM.

donc:

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

Disposons de ces choses.

mise en page

Identifions quelques règles supplémentaires pour vous assurer que ce composant peut facilement glisser dans la disposition de la page. Au moment de la rédaction du moment de la rédaction, il n'y a pas de sous-réseaux disponibles (mais il y en aura!), Donc ce composant ne connaît pas la grille des parents sur laquelle il se trouve. Cela correspond bien à l'approche du composant BEM - car chaque composant est plat et isolé pour limiter l'héritage. Je ne préconise pas BEM ici (ou le Bem- ish que nous utilisons évidemment) - je dis simplement que si vous l'utilisez déjà, c'est un bonus supplémentaire.

Dans cet exemple, le concepteur configure une disposition de page avec 12 colonnes de grilles et un espacement 20px (1.25REM), sans pièces de décalage dans tout le site. Notre composant est une zone de page qui occupera les 12 colonnes de grille. Au cours de cette période de transition, nous utilisons toujours ce type de grille de configuration car nous avons de nombreux systèmes qui sont toujours basés sur cette idée à qui il faut intégrer. Par conséquent, il s'agit de la convention dans cette condition: pour les zones pleine largeur, supprimez l'écart de la grille et écrivez le modèle de grille sur une unité fractionnaire (FR) de 12.

Cela signifie:

1. La vue de cette grille intérieure suit à peu près la grille où elle réside;
2. Afficher facilement les règles de conception sous-jacentes dans le code; et
3. Il est facile d'aligner les choses avec précision si nécessaire.

Notes rapides sur l'alignement

Attendez ... qu'est-ce que je veux dire par «alignement exact»? N'est-il pas déjà aligné avec précision?

Eh bien, non. La méthode d'unité fractionnaire divise parfaitement l'espace , donc vous vous retrouvez dans l'espacement. Deux colonnes même vous mettront au milieu de l'espacement. Deux colonnes dont une colonne est 2/3 et l'autre 1/3 sera divisée à 1/3 de cet espacement, etc.

La fixation de l'alignement n'est pas difficile car nous connaissons la largeur de l'espacement de la grille de page. Par exemple, sur la segmentation uniforme, nous pouvons inclure des lacunes de grille.

Cependant, nous ne pouvons pas le faire avec aucune autre segmentation. Ce que nous pouvons faire, c'est ajouter cet écart comme marge - quelle que soit la taille de la boîte que vous définissez, la marge sera ajoutée en interne. Dans cet exemple, nous avons trois colonnes (deux zones nommées et un espace vide) qui divisent notre espacement en trois parties:

C'est comment calculer ces marges: assurez-vous que la somme des unités FR est 12. Divisez l'écart de la grille par le nombre de colonnes dans la grille parent et multipliez-la comme ceci:

Le multiplicateur de marge droite de n est égal à la somme des unités FR sur le côté droit de n. La marge gauche de n est égale à la somme des unités FR sur le côté gauche de n.

Par conséquent, pour la valeur grid-template-columns est 2fr 3fr 2fr 4fr 1fr :

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

Si vous vous retrouvez à écrire fréquemment calc() , vous pouvez même l'écrire comme un mixin. Par exemple, voici comment aligner la grille intérieure avec la grille des parents:

... et voici comment calculer automatiquement les marges lorsque le nom est spécifié en interne, mais le nombre est spécifié à l'extérieur de la grille:

Je crois que vous pouvez penser à d'autres solutions comme passer à des lignes nommées, ou en ajoutant des colonnes supplémentaires à largeur fixe, ou même en écrivant toutes les cartes avec 12 zones nommées par ligne. Il existe de nombreuses façons de gérer cela, mais je pense que de nombreuses méthodes éliminent les avantages des régions nommées. La zone nous fournit un diagramme de mise en page lisible contenant ce que notre futur moi doit savoir. C'est le code comme documentation.

Pour être clair, le problème de conception que je nous amène à résoudre n'est pas le problème d'alignement. Avec la grille, l'alignement est facile. Le problème n'est pas de résoudre le problème de mise en page direct et trivial, mais de le résoudre d'une manière qui soutient notre objectif, c'est-à-dire pouvoir comprendre en six mois:

1. Quels éléments sont inclus dans le composant.
2. Comment ils sont disposés.
3. Pourquoi le code est-il écrit de cette façon.

La spécification de la grille est énorme et peut facilement se perdre dans les options. Peut-être qu'un meilleur plan serait de réinitialiser une grille de 12 colonnes et d'utiliser une spécification numérique lorsque l'alignement absolu est nécessaire (c'est-à-dire en liant explicitement à notre grille de page, qui utilise une spécification numérique) - mais je pense qu'il y a une solution plus intelligente et plus simple à découvrir. Pour ce site Web, nous avons fini par écrire un objet de grille de page et en ajoutant des cellules de grille internes imbriquées à l'aide de la classe: .o-page-grid\_\_sidebar .

Qu'en penses-tu? Je prévois certainement une vue différente à ce sujet. ? ‍♀️

Real Grid!

Nous pouvons l'utiliser pour créer un titre de page commun:

Alternativement, nous pouvons créer une variation de la page d'accueil:

Alors, qu'en est-il d'un titre de héros qui va au-delà de notre conteneur? certainement! Ou nous pouvons le fournir à l'extérieur du conteneur:

Quelle est la prochaine étape? Un titre d'événement à thème avec une barre d'information complète (Paste) et un bouton interne qui s'aligne sur la barre latérale de la grille parent? C'est exact. J'inclurai une grille parent afin qu'il soit plus facile à afficher:

Qu'en est-il des recherches avec un alignement centré? Utilisons la technique de la colonne de pliage:

Voici une démonstration de toutes ces variations en une seule section. Oui, c'est une carte! C'est un emballage!

Accepter

Wow, nous couvrons beaucoup! Mais vous pouvez voir à quel point un système comme celui-ci est flexible et auto-documenté comme celui-ci?

1. Les polices sont traitées par des systèmes de polices séparés.
2. Les couleurs sont traitées par une section de thème qui décrit les règles de couleur sous-jacentes de la conception plutôt que de simplement ombrer temporairement les éléments.
3. Les éléments sont appelés ce qu'ils sont, en anglais, et sont inclus avec le mélange de modèle en haut de la section. Cette liste peut être incluse en tant que référence dans Twig ou dans un modèle.
4. Utilisez toujours le HTML correct et la nidification ne casse pas la grille. Cela signifie que vous pouvez appliquer n'importe quel nombre de grilles imbriquées au même espace de mise en page en définissant les conventions.
5. L'alignement précis se fait dans la spécification numérique, pas la spécification du nom (mais notez que vous pouvez utiliser la spécification du nom pour l'alignement).
6. Prend en charge IE 11.

J'ai également une description rapide et un autre exemple de composants construits à l'aide de régions nommées. Dans cet exemple, la carte n'est pas une zone, mais un composant placé dans la grille, il n'y a donc aucune raison d'utiliser la convention FR de 12. La section d'objet multimédia que vous pouvez vous attendre est la suivante:

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!