Catégories
Astuces et Design

Layoutit Grid: apprentissage visuel de la grille CSS avec un générateur

Layoutit Grid est un générateur de grille CSS open source interactif. Il vous permet de dessiner vos créations et de voir le code au fur et à mesure. Vous pouvez interagir avec le code, ajouter ou supprimer des lignes de suivi et les faire glisser pour changer le dimensionnement – et vous pouvez voir le changement CSS et HTML en temps réel!

Gif animé de l'outil qui est divisé en trois colonnes: une qui définit le nombre de lignes et de colonnes de la grille, une pour nommer et visualiser la mise en page, et la dernière pour voir le code.
Ajoutez des pistes et voyez comment elles sont créées en CSS

Lorsque vous avez terminé avec une mise en page, vous pouvez créer un CodePen ou récupérer le code pour démarrer votre prochain projet. L'outil met le code au premier plan, vous aidant à apprendre la grille CSS lorsque vous travaillez directement avec elle.

CSS Grid est une toute nouvelle façon de penser les mises en page

Nous pouvons désormais créer des mises en page réactives robustes pour nos expériences Web. Nous pouvons enfin apprendre à concevoir avec un ensemble cohérent d'outils de mise en page au lieu de mémoriser des piles de hacks pour forcer les éléments en position.

Maintenant, je ne dis pas qu'un générateur comme celui-ci nous excuse de connaître le code que nous écrivons. Nous devrions tous apprendre comment fonctionnent CSS Grid et Flexbox. Même si votre forteresse est JavaScript, avoir une base solide en connaissances CSS est un allié puissant pour communiquer vos idées. Lors du partage d'un prototype pour un composant, une interaction UX ou même un algorithme dans un sandbox en ligne, la manière dont votre travail est présenté peut faire une grande différence. La capacité de développer des mises en page appropriées – et de définir les styles qui les créent – est fondamentale.

La création de mises en page en CSS ne devrait pas être une tâche ardue. CSS Grid est en fait assez amusant à utiliser! Par exemple, l'utilisation de zones de grille nommées ressemble à une version artistique ASCII du dessin d'un dessin sur une feuille de papier. Permet de créer la mise en page d'une application de photos, un flux de photos et les personnes qui s'y trouvent côte à côte pour son contenu principal et l'en-tête, le pied de page et une barre latérale de configuration typiques.

.photos-app {
  /* For our app layout, lets place things in a grid */
  display: grid;
  /* We want 3 columns and 3 rows, and these are the responsive
     track sizes using `fr` (fraction of the remaining space) */
  grid-template-columns: 20% 1fr 1fr;
  grid-template-rows: 0.5fr 1.7fr 0.3fr;
  /* Let's separate our tracks a bit */
  gap: 1em;
  /* We now have 3x3 cells, here is where each section is placed */
  grid-template-areas:
    "header header header"  /* a header stretching in the top row */
    "config photos people"  /* a left sidebar, and our app content */
    "footer footer footer"; /* and a footer along the bottom row  */
}

.the-header {
  /* In each section, let's define the name we use to refence the area */
  grid-area: "header";
}

Ceci n'est qu'un petit sous-ensemble de ce que vous pouvez créer avec CSS Grid. La spécification est assez flexible. Les zones peuvent également être placées directement à l'aide de numéros de ligne ou de noms, ou elles peuvent être placées implicitement par le navigateur, le contenu étant distribué automatiquement à l'intérieur de la grille. Et la spécification continue de croître avec des ajouts, comme la sous-grille.

En même temps, travailler avec des grilles peut être difficile, comme tout ce qui nécessite une nouvelle façon de penser. Il faut beaucoup de temps pour comprendre ce genre de choses. Et une façon d’y contribuer est de…

Apprenez en jouant

Lorsque vous apprenez CSS Grid, il est facile de se sentir intimidé par sa notation et sa sémantique. Jusqu'à ce que vous développiez une certaine mémoire musculaire pour cela, relancer le processus d'apprentissage avec des outils visuels et interactifs peut être un excellent moyen de surmonter cette appréhension précoce. Beaucoup d'entre nous ont utilisé des générateurs tout en apprenant à créer des ombres, des dégradés, des tableaux de Markdown, etc. Les générateurs, s'ils sont construits avec soin, sont d'excellents outils d'apprentissage.

Utilisons Layoutit Grid pour recréer le même design dans notre exemple.

Les générateurs comme celui-ci ne sont pas censés être utilisés pour toujours; ils sont un tremplin. Celui-ci vous aide à découvrir la puissance de CSS Grid en matérialisant vos conceptions en quelques clics avec le code pour y arriver. Cela vous donne les premières victoires dont vous avez besoin pour faire avancer le processus d'apprentissage. Pour certains d'entre nous, les générateurs restent en permanence dans nos boîtes à outils. Non pas parce que nous ne savons pas comment créer les mises en page à la main, mais parce que la boucle de rétroaction visuelle nous aide à convertir rapidement nos idées en code. Nous continuons donc à jouer avec eux.

Sarah Drasner a également créé un générateur de grille CSS qui mérite également d'être vérifié.

Apprenez en construisant

Leniolabs a récemment ouvert Layoutit Grid et ajouté de nouvelles fonctionnalités, telles que les vues de code interactives, l'édition de zone, l'historique et le support hors ligne. Et il y en a plusieurs autres en préparation.

Si vous avez des idées pour améliorer l'outil, contactez-nous! Ouvrez un problème et discutons-en sur GitHub. En entrant dans le méta-territoire, vous pouvez également en savoir plus sur la spécification CSS Grid en nous aidant à créer l'outil.

Nous utilisons l'application pour suivre les meilleures pratiques en matière de création performant expériences Web interactives. Il est maintenant alimenté par la nouvelle Vue 3 en utilisant

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *