excuse my french.dev

veille front-end & ux (avec un accent)

Retour vers la liste des articles

Excuse My French Dev #4: to grid or not to grid, oublier les styles d'impression et créer sa propre police de caractères

un dessin avec deux personnages se regardant et se saluant, chacun entouré d'une bordure rectangulaire bleue et tous les deux reliés par une ligne bleue en pointillés
source: Manuel Matuzovic

Beaucoup de CSS cette semaine ! On se focalise sur le module Grid (grille) de CSS avec quelques outils pour créer des designs facilement et coder de manière plus intuitive. Puisque l'on est dans le thème des grilles, j'ai dégoté un chouette manifeste en faveur de l'abandon de la grille en webdesign. Une longue lecture, mais très didactique et qui donne envie d'expérimenter qu'on soit designer ou développeur.se. Ensuite, j'ai dû mettre ma fierté de côté en lisant un article sur les styles d'impression en CSS. J'ai complètement zappé cette partie-là dans mon code ! Enfin, pour terminer sur une note légère (mais qui fait tout aussi mal pour l'ego), un outil rigolo pour réaliser sa propre police de caractère. On ne se rappellera pas de moi pour mon écriture gracieuse...

Voilà les cinq liens "coup de coeur" de la semaine :

  1. Layoutit!Un outil très pratique pour construire la mise en page d'une application ou d'un site web rapidement. On entre le nombre de colonnes, de rangées et on nomme directement les zones la grille. Je n'utilise pas forcément le code tel quel, mais c'est plutôt pratique pour établir un design de base. De plus, même dans les transports en commun, quand je n'ai accès qu'à mon téléphone, je peux continuer à mettre mes idées en place grâce à cette petite application !
  2. Simple named grid areas ("zones de grille [CSS grid] simplement nommées"). Je rebondis sur le lien précédent avec un article qui a révolutionné ma manière d'appréhender la grille (grid) en CSS. Lorsque j'ai commencé à apprendre le module Grid en CSS, j'utilisais "grid-row", "grid-column" et "grid-area" avec son schéma pas facile à saisir de prime abord ("grid-area: 1 / 1 / 2 / 3" par exemple). Un jour, je suis tombée sur cet article de 2018 sur la manière de nommer les zones de la grille CSS à l'aide de "grid-template-areas" et je me suis réconciliée avec les grilles CSS grâce à cette propriété plus intuitive. Les mises en page sont devenues plus faciles à dessiner, à coder et à corriger !
  3. Gridless.design ("Design sans grille"). L'utilisation d'une grille dans le webdesign est-elle vraiment efficace ? On ne parle pas du module Grid CSS dans ce manifeste (ou alors je me tire une balle dans le pied après l'avoir vendu dans les deux liens précédents !). Ici, l'auteur Donnie D'Amato nous raconte l'histoire de la grille comme support dans l'élaboration des designs ensuite imprimés. Le web n'est pas forcément imprimé et le design doit prendre en compte le caractère modulable des écrans et de tout ce qu'ils contiennent. D'où le fait de se débarasser de la grille ! Une lecture didactique qui s'adresse aussi bien aux designers qu'aux développeur.se.s.. Dans la partie développement, l'auteur aborde l'utilisation de l'unité de mesure rem, des marges automatiques, de flexbox et l'abandon des points de rupture (breakpoints) en responsivité. De quoi gagner également en accessibilité.
  4. I totally forgot about print style sheets ("J'ai complètement oublié les feuilles de style print [pour impression]"). Le jour où je suis tombée sur cet article, j'ai exporté un aperçu PDF de mon portfolio et je me suis dit "oups". Il est judicieux de prendre en compte les impressions ou les simples enregistrements sous PDF que peuvent faire vos utilisateur.rice.s (d'ailleurs, sortez des aperçus PDF plutôt que des impressions quand vous faites vos tests, sinon ça revient cher et je ne parle même pas de l'empreinte carbone...). On retiendra de cet article "@media print" pour gérer les déclarations CSS liées à l'impression, et quelques subtilités telles que les déclarations des marges en centimètres (pas d'unités absolues) ou la révélation des adresses des liens sur le site.
  5. Pretend Foundry Font Builder ("Constructeur de fonte (ou police de caractères)"). Une application vraiment amusante pour transformer son écriture manuscrite en une police de caractère à télécharger, utilisable dans nos projets les plus fous.

And that's it! A la semaine prochaine !