Pourquoi devriez-vous utiliser CSS Grid • WPShout

CSS Grid est une technologie très cool, et je pense que de plus en plus de développeurs WordPress devraient connaître et utiliser. Bien que je sois à peine un expert en CSS, c’est précisément la raison pour laquelle je me sens bien qualifié pour vous apprendre ceci: si ce non-expert peut trouver cela formidable et utile, c’est sûrement une technologie que vous devez connaître.

Donc, aujourd’hui, c’est notre sujet: c’est quoi la grille CSS et pourquoi vous devriez l’apprendre. Et j'espère que je vous renverrai à quelques ressources très utiles et à des tutoriels CSS Grid pour vous aider à démarrer.

Le rôle de CSS dans WordPress (et mon rôle)

Avant de plonger dans, une note rapide de format. L’un des aspects étranges de WordPress est la façon dont le CSS «orthogonal» est issu du développement WordPress principal. Ce que je veux dire, c’est que CSS est une grande partie de l’expertise dont a besoin un développeur WordPress. Mais la connaissance CSS est aussi une expertise qui n’a presque rien à voir avec WordPress en particulier. Outre le fait de savoir que WordPress a une fonction body_class, vous pouvez principalement apprendre le CSS sans penser à WordPress.

Cela est dû au fait que CSS peut être utilisé et est utilisé partout où le langage HTML est utilisé. Et tout comme HTML n'est pas spécifique à WordPress, CSS non plus. Mais cela ne signifie pas que vous, en tant que développeur WordPress, pouvez ou devriez écrire votre code HTML et CSS comme il l’était il ya 10 ans. Et jusqu'à récemment, j'étais un peu coupable de cela.

Parce que mon intérêt pour WordPress concerne principalement les tâches de publication simples, et pour me permettre de trouver un autre endroit pour écrire du code PHP côté serveur, je n’ai vraiment pas pensé beaucoup à CSS depuis un moment. Cela ne veut pas dire que je n’écris pas de CSS par intermittence pour des projets personnels, mais que je ne me dirais pas expert en CSS.

Qu'est-ce que CSS Grid?

Revenons donc à CSS Grid. Une des choses que j'ai eu du mal à expliquer CSS Grid aux gens, c'est que les gens disent: «Oh, nous utilisons des systèmes de grille en CSS depuis des années.» Et ces personnes (Fred très inclus) ont raison un moyen. Ils utilisent une mise en page basée sur une grille, rendue possible avec CSS depuis deux mille ans.

Mais une mise en page basée sur une grille ne correspond pas vraiment à ce que je veux dire par «CSS Grid». Pour souligner davantage la différence, dans l'ensemble de cet article, je dirai «CSS Grid» lorsque je parle de la (sorte de) nouvelle norme CSS et «dispositions de grille» signifient l’idée générique d’utiliser une grille systématique pour donner à une page Web, une affiche ou un autre modèle un sens de cohésion et une symétrie agréable.

Présentation des grilles dans la conception

Donc, utiliser des grilles pour les mises en page est certainement plus vieux que moi. Parce que je ne suis pas un designer expérimenté ou éduqué, je ne me risquerai pas à en offrir une histoire. Mais il suffit de dire que probablement tant qu'il y a eu des pages, il y a eu des tentatives pour leur appliquer un système de conception.

Et l'un des meilleurs systèmes de conception que les gens ont appliqué aux pages est une grille. Le plus souvent, je pense à une grille de 12 colonnes. Quand je pense à la conception de sites Web comme je l’ai appris pour la première fois il ya 10 ans, je pense au «système de grille de 960 pixels». Cette idée, comme le montre clairement la bannière sur toute la page, était plus ou moins superflue, car les smartphones obligeaient les pages Web à bien paraître pour des appareils autres que les navigateurs Web de bureau et portables.

“Un système de disposition de grille CSS” ou “Framework de grille CSS”

Plus généralement, les personnes qui sont déroutées par mon invocation de «CSS Grid» le confondent avec un «système de mise en page de grille réactif». Fred mentionne le plus souvent et me dit que le système Bootstrap CSS / layout / markup est accompagné d'un 12 – grille de colonnes intégrée. Ces «systèmes de grille réactifs» constituent une amélioration par rapport au système 960 que j'ai mentionné ci-dessus en ce qu'ils sont «réactifs». Grâce au balisage et à leurs pouvoirs cachés, ils savent que la fenêtre du navigateur se rétrécit. C’était le bon tiers de votre système de grille qui voudra naturellement devenir sa propre rangée de grille.

Ce type de système de grille réactif est quelque chose que je connais presque exclusivement grâce à la connaissance de seconde main et à la rumeur. J’ai abandonné mes efforts pour maintenir mon CSS à jour au moment où Fred et moi avons commencé à travailler ensemble en 2013, et je n’ai pas vraiment été bon en CSS depuis lors. (Je n’ai probablement jamais été bon, mais c’est une toute autre conversation.)

Qu'est-ce que la grille CSS (et pas)?

Ce que je veux dire par «grille CSS» n’est pas «un système de grille réactif exploitant le CSS que quelqu'un d’autre a écrit», ni «vous implémentez un système d’agencement de grille utilisant des éléments tels que des flottants».

Au lieu de cela, ce que je veux dire par «CSS Grid» est un système natif CSS par lequel vous pouvez simplement déclarer que votre système de grille comporte autant de colonnes et de lignes et que ce contenu doit couvrir deux de ces colonnes, tandis que celui-ci doit simplement prendre jusqu'à un. Et au lieu d'une grille de 12 colonnes, vous pouvez en faire une grille de 5 colonnes ou une grille de deux colonnes. C’est très puissant.

La puissance d'un système de grille natif CSS peut vous sembler évidente, mais voici ce que je considère comme un avantage considérable:

1. Sans extraire de code tiers, je peux faire des choses de mise en page d'une manière sensée.
2. Une mort complète et finale de flottemises en page basées sur CSS. 🙌
3. Flexibilité loin de ce que tout «cadre de grille» vous a donné auparavant. Vous voulez une colonne de largeur fixe pour quelque chose sur le côté de votre site, puis une distribution flexible de votre page? Oh oui, nous avons ça.

Quelques excellents tutoriels et outils de grille CSS

Mon objectif, comme je l’ai dit, n’est pas d’expliquer en profondeur la grille CSS (niveau 1). Je l’ai utilisé à quelques reprises, mais je me considère à peine comme un expert en la matière. Au lieu de cela, je voudrais simplement vous indiquer certaines des ressources que j’ai trouvées utiles pour maîtriser CSS Grid.

Puis-je utiliser la grille CSS? CSS Grid vs Flexbox

Pouvez-vous en toute sécurité et sans «polyfill» utiliser CSS Grid aujourd'hui? Probablement. Je me réfère généralement à caniuse.com Pour ce type de question, il indique que 92% du trafic ou le trafic mondial prend en charge le niveau 1 de la grille CSS. À titre de comparaison, la technologie la plus récente et la plus pertinente, Flexbox, indique que 98% dans le monde utilisent les mêmes statistiques.

Donc, ni l'un ni l'autre ne sera clairement utilisable sur aucun site pour chaque visiteur de tous les sites imaginables. Mais les deux en arrivent au point où vous devriez les considérer. (Surtout si vous utilisez un site plus technique que la plupart des publics, comme le nôtre.) Et je pense que les statistiques de CSS Grid vs Flexbox montrent que, si vous êtes à l'aise avec l'un, vous devriez probablement vous familiariser avec l'autre. . (En passant, les experts en CSS me disent que discuter du «grid vs flexbox» est un argument de «redingote» qui est une perte de temps car ils ont des finalités et des utilisations très différentes. Je ne suis pas qualifié pour en dire plus. )

CSS Grid Garden: génial

Si vous êtes une vieille école comme moi, vous connaissez peut-être CSS Zen Garden. C’est un endroit (à l’époque ancienne, lorsque CSS était tout nouveau) où les gens ont démontré la puissance de CSS par rapport à HTML avec son style cuit dedans.

CSS Grid Garden n'est pas réellement un CSS Zen Garden mis à jour, comme je le pensais au départ. C’est plutôt un petit jeu génial et amusant qui vous mettra à l'aise avec CSS Grid. Je viens de jouer à nouveau, et en apprendre davantage sur la grille.

C’est la même personne que la grande Flexbox Froggy, mais elle n’est pertinente que d’autant.

Autres excellentes ressources de grille CSS

Voici une courte liste d’autres ressources que j’avais l'habitude d'être meilleures en grille CSS, ou dont je souhaiterais bien l'apprendre.

Si vous avez d'autres tutoriels ou guides sur la grille CSS que vous aimez, laissez-les dans les commentaires pour qu'ils puissent aider les autres à apprendre ce sujet important

CSS Grid: juste le début

Honnêtement, je peux dire que connaître et utiliser CSS Grid a été la première fois que j'étais vraiment excité de devenir meilleur sur le Web. conception dans des années. C'est en partie parce que j'ai finalement dû le faire. Mais l’autre partie est qu’enfin avec CSS Grid, je pense que nous terminons le travail sur lequel le Web Standards Project a commencé il ya de nombreuses années: rendre les sites Web faciles et amusants à créer, et rendre ce système facile et amusant largement disponible largement compatible. Marquez un pour les bonnes personnes!

Créer une mise en page CSS Grid d’une manière que je n’ai jamais vue auparavant est une chose belle et amusante. J'ai d'abord appris le web design à l'ère des tables. J'ai fait le saut en faisant des mises en page avec des flottants CSS, mais cela semblait toujours être une solution à mi-chemin pour résoudre le mauvais problème. (C’était le cas.) Enfin, dans CSS Grid, je vois un moyen de permettre à une personne aussi médiocre en design visuel que moi de créer une présentation fonctionnelle et jolie pour le Web.

J'espère que vous êtes même à moitié aussi excité que moi. Bonne chance et j'espère que vous aurez envie d'apprendre toute la puissance de CSS Grid

Excellent contenu d'apprentissage WordPress