46 liens privés
L'article aborde le problème de la gestion des espacements entre les éléments dans un conteneur utilisant Flexbox ou Grid. L'auteur se demande comment contrôler l'espacement entre certains éléments sans recourir à des solutions peu élégantes. Il propose plusieurs méthodes, comme ajuster les marges verticales, encapsuler les éléments dans un nouveau conteneur, ou utiliser le flux par défaut avec des marges CSS. Chaque méthode a ses avantages et inconvénients, notamment en termes de maintenance du code et de modification du HTML. L'auteur suggère finalement une approche utilisant des variables CSS pour gérer les espacements de manière plus flexible. Il propose également une idée pour une future propriété CSS qui permettrait de définir des espacements personnalisés pour certains éléments au sein d'un conteneur Flexbox ou Grid.
Je cite le sous titre : "une exploration des problèmes résolus par la propriété CSS gap"
L'auteur présente 5 classes CSS utilitaires avec l'utilisation des "cascade layers" :
- classe "repeating grid" - pour un nombre de colonnes fixes avec le module grid
- classe "repeating flex" - idem mais avec le module flex (et possibilité de remplir l'espace restant si le nombre de colonnes réels n'est pas un multiple de celui voulu)
- classe "fluid grid" - avec une adaptation de la taille des colonnes selon l'espace disponible (utilisation du module gird)
- classe "fluid flex" - même principe mais avec utilisation du module flex
- classe "subgrid" pour utiliser les "subgrids"
Tout est dans le titre
Tout est dans le titre
L'autrice montre la réalisation de ces layouts avec l'aide de Grid ou de Flexbox
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
La liste :
- React Bits
- Vue.js Complete API Cheat Sheet
- CSS Grid Cheat Sheet
- Flexbox Cheatsheet
- Inclusive Components
- A11y Style Guide
- Front-end tooling recipes
- ES6 Features
- A Complete Guide to CSS Grid
- HTML Reference
- The HTML5 Robot
- CSS Triggers
- CSS property syntax cheatsheet
- HTML5 Pattern
- 2016 JavaScript Rising Stars
- What Web Can Do Today
- Moving to HTTPS Guide
- WAI-ARIA Authoring Practices 1.1
- Grid “fallbacks” and overrides
- Flexible Boxes
Tout plein de ressources pour apprendre Flexbox (jeux, antisèches, liste de problèmes résolus par flexbox, etc.)
Plein de notions CSS sont abordées dans cet article : sélecteurs, contenu généré, utf8, flexbox, etc.
Tout est dans le titre
Tout est dans le titre (via https://stephaniewalter.design/fr/blog/semaine-pixels-27-janvier-2017/ )
Tout est dans le titre (via https://stephaniewalter.design/fr/blog/semaine-pixels-10-fevrier-2017/ )
L'article date... mais les exemples sont toujours d'actualité
Tout est dans le titre
Tout est dans le titre