Dans les deux articles précédents, nous avons vu ce qui se passait lorsque nous créons un conteneur flex et nous avons examiné l'alignement en détail. Cette fois-ci, Rachel Andrew explore le dimensionnement en Flexbox : comment Flexbox décide-t-il de la taille de nos items ?
Rachel Andrew examine les propriétés d'alignement de Flexbox et découvre en chemin quelques règles de base qui nous aideront à nous rappeler comment ces propriétés fonctionnent sur les axes principal et transversal !
Le premier d'une série de trois articles passionnants de Rachel Andrew décomposant en détail Flexbox, ce pour quoi Flexbox a été conçu, ce qu'il fait vraiment bien, ce pourquoi il ne serait pas le meilleur choix.
Le grand Eric Meyer s'amuse avec CSS Grid : il décide de convertir son site personnel, qui doit rester compatible avec les anciens navigateurs, et nous montre la transformation en détail.
Robin Rendle a écrit un tutoriel simple pour s'initier à CSS Grid en commençant par les bases. Une excellente introduction au système de layout qui va nous changer la vie.
CSS Grid et Flexbox sont faits pour fonctionner ensemble. Grid pour l'organisation générale, Flexbox pour les ajustements spécifiques. Chen Hui Jing le démontre avec un exemple magistral (et quelques bonus)
L'optimisation des sites web est à l'ordre du jour. Si nous voulons améliorer l'expérience utilisateur, en particulier sur les mobiles, nous devons comprendre le fonctionnement des navigateurs. Par Sanjay Purswani.
Méthodique et claire comme on la connaît, Ire Aderinokun fait le tour des propriétés background de CSS pour placer, dimensionner, répéter, etc les images d'arrière-plan. Une excellente introduction ou révision.
L'amélioration progressive est un beau principe nous invitant à utiliser des fonctionnalités CSS avancées dès maintenant, la feature-query @support est notre nouvel outil pour cela. Petite intro par Charlotte Jackson.
Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout.
Avec Flexbox, le module CSS Grid Layout représente l'avenir de la mise page CSS. Chris House a conçu un guide complet et plein d'exemples pour enfin comprendre cette spécification complexe.
Un premier article sur la nouvelle spécification CSS Grid Layout. Ire Aderinokun s'attaque au Saint Graal et nous initie aux mystères d'une spécification qui va changer notre façon de travailler!
Ayant lu l’article sur les quantity queries, Aaron Gustafson expérimente leur mise en oeuvre sur son site... avec Flexbox bien sûr, pour aller jusqu’au bout de l’aventure!
Dans cet article déjà fameux, Heydon Pickering démontre comment on peut créer des queries basées sur les quantités en pur CSS en utilisant ingénieusement pseudo-classes et combinateurs. Absolument génial Heydon!
Levin Mejia, adepte de l’apprentissage par la pratique, nous propose de créer un layout flexible et responsif avec Flexbox. On s’amuse à apprendre ses concepts et propriétés fondamentales.
Encore un article d'Ire Aderinokun, qu'on aime beaucoup ici pour ses analyses en profondeur et la clarté de ses explications. Avez-vous bien tout considéré lorsque vous cachez un élément HTML?
Dans cet article simple et complet, Ire Aderinokun rappelle les bases du modèle de boîte CSS et montre pourquoi vous devriez utiliser box-sizing. Super clair comme toujours avec l'étonnante Ire.
Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!
Les applications concrètes de Flexbox, suite : encore une solution simple à un problème compliqué de mise en page, présentée par David Walsh. Mais pourquoi diable a-t-il fallu attendre si longtemps?
Le centrage vertical est depuis toujours un cauchemar pour les développeurs web, et même s'il existe des solutions, aucune n'égale flexbox par sa simplicité. Un article concis de David Walsh.
Premier article d’une série sur les applications pratiques de Flexbox. Chris Coyier résout un problème d'alignement de titre et de sous-titre avec retour à la ligne, compliqué sans flexbox.
On n'utilise plus autant les float aujourd'hui, mais parfois c'est encore incontournable. Dans cette excellente intro (ou révision), Ire Aderinokun revisite float en présentant les règles qui régissent son comportement.
Pour comprendre flexbox en profondeur, Zoe Gillenwater transforme un layout préexistant créé avec table. Grâce aux media queries et aux possibilités d'ordonnancement de flexbox, ce layout devient encore plus responsif.
Comment sortir du modèle de boîte et ouvrir de nouvelles possibilités créatives pour nos mises en page ? Dudley Storey se penche sur clip-path et Shapes et combine les deux modules.
Il est devenu compliqué de s'y retrouver dans le paysage changeant du clipping et du masking. Évolution des syntaxes, technologies, support... Chris Coyier fait le point, explications et illustrations claires.
Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew
L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS.
Question récurrente : comment faire pour avoir des colonnes de même hauteur dans notre mise en page multi-colonnes ? Kezz Bracey propose une solution astucieuse pour résoudre ce problème vieux comme CSS.
Flexbox est une technique simple et puissante, mais elle pose encore quelques problèmes de compatibilité. Sean Fioritto répond ici à la question : quand pourrai-je utiliser Flexbox dans le monde réel?
Une technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété position. Pour apprendre ou bien pour réviser.
Le premier d'une série de 3 articles de Louis Lazaris sur des notions de base de CSS. Nous commençons aujourd'hui avec les notions parfois confuses de Block, Inline et Inline-Block.
Les sites responsifs ou adaptatifs modifient l'architecture de leur contenu afin de s'adapter aux dimensions de l'écran. Avec ces excitantes potentialités surgissent des défis tout aussi passionnants. Par Trent Walton.
Box-sizing est une alternative au modèle de boîte standard, encore trop peu utilisée. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska.