— En partenariat avec Penpot —

Depuis mon dernier article sur Penpot et ses fonctionnalités de Flex Layout, l’outil n’a cessé d’évoluer pour offrir encore plus de possibilités aux designers et développeurs. Aujourd’hui, je souhaite vous présenter en détail une fonctionnalité très attendue : les CSS Grid Layout.

Pour rappel, Penpot est un outil libre et open source de conception d’interfaces pour applications web et mobiles. Intuitif et puissant, il permet de créer rapidement des prototypes et maquettes interactives, tout en générant le code CSS correspondant, prêt à être intégré dans vos projets.

Si les Flex Layout permettaient déjà de créer des designs responsives en adaptant les éléments à la taille de l’écran, les CSS Grid Layout vont encore plus loin en offrant un contrôle total sur le positionnement et le dimensionnement des composants. Concrètement, les CSS Grid Layout vous permettent de définir une grille sur laquelle placer vos éléments. Vous pouvez spécifier le nombre de lignes et de colonnes, leur taille, les gouttières entre elles. Chaque élément peut alors occuper une ou plusieurs cases de cette grille, s’étendre sur plusieurs lignes ou colonnes.

Cette approche offre une grande flexibilité pour créer des mises en page complexes et adaptatives. Vous pouvez par exemple concevoir facilement une page avec un header sur toute la largeur, une sidebar sur la gauche, un contenu principal au centre et un footer en bas, le tout en quelques clics et sans une ligne de CSS.

Autre atout des CSS Grid Layout : la possibilité de nommer chaque zone de votre grille. Fini les .col-md-4 ou .row-2 peu parlants, vous pouvez utiliser des noms comme « header », « main-content » ou « sidebar » pour structurer votre design de façon sémantique.

Pour vous aider à prendre en main cette fonctionnalité, je vous ai préparé une nouvelle vidéo tuto dédiée aux CSS Grid Layout. Je vous y montre comment créer vos premières grilles, les configurer, placer vos éléments et profiter de la puissance des CSS Grid Layout dans vos conceptions. Même si vous n’êtes pas familier avec le CSS Grid, vous verrez que Penpot rend son utilisation très intuitive.

Découvrez la vidéo ici ! Et pour vous inscrire sur Penpot, c’est par ici !

On n’a pas tous la chance d’être suffisamment en souffrance dans nos vies pour aimer faire de la CSS. Sauf que voilà, à un moment, y’en a forcément besoin. Surtout quand on veut mettre en place des éléments d’interfaces sympas et compatibles avec tous les navigateurs.

Que ce soit en CSS pure ou en Tailwind, sachez que vous trouverez forcement votre bonheur sur Uiverse (jeu de moooots), un site qui regroupe des milliers d’éléments d’interface que vous n’aurez plus qu’à copier coller, et éventuellement modifier un peu, avant de les mettre sur votre site web.

On y retrouve donc des boutons, des checkbox, des champs de saisie, des boutons radio, des éléments de formulaires, des animations de chargement et j’en passe. Et le plus beau là-dedans, c’est que tout ça est filtrable / triable par type de techno (CSS / Tailwind) mais également par thème ou nombre de téléchargements…etc.

Une fois que vous cliquez sur un élément UI qui vous intéresse, vous pouvez alors récupérer son code, la mettre en favoris pour plus tard ou carrément le balancer dans un de vos projets Figma.

Elle n’est pas belle la vie ?

Bref, si vous cherchez de quoi agrémenter vos interfaces gratuitement, ça se passe par ici.

Y’a pas si longtemps, je vous ai présenté la police de caractères Luciole qui permet de donner beaucoup de lisibilités aux personnes mal voyantes.

Et bien dans le même esprit, je vous fais découvrir aujourd’hui Hack. Cette police de caractère libre au nom dénué d’originalité a été conçue pour soulager les petits neuneuils des développeurs qui aiment coder jusqu’au bout de la nuit. Hack intègre des versions gras, italique, regular…etc. avec un support de toutes les langues et tous les glyphes possibles y compris le cyrillique, le grec…etc.

Son design améliore la lisibilité du code, avec du contraste, une bonne hauteur des lettres, un zéro rempli pour ne pas le confondre avec le 0 majuscule, un bon espacement…etc. Tout est dans la subtilité, ça se touche beaucoup la nouille typographique, mais vous devriez quand même l’essayer, car ça ne peut être que plus confortable que ce bon vieil Arial que vous collez partout.

Vous pouvez la télécharger ici et même la tester dans le playground ici selon votre langage de dev préféré et le style de votre IDE (mode sombre, clair…etc.)