CSS Grid pratique : ajouter Grid à un design existant
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.
Se lancer dans CSS Grid
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.
Grid et Flexbox, le duo gagnant
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)
Optimiser votre front-end pour le navigateur
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.
Les propriétés CSS background
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.
CSS @supports va vous changer la vie
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.
Utiliser Grid ou Flexbox ?
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.
CSS Grid Layout, guide complet
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.
CSS Grid et le Saint Graal
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!
Jouons avec Flexbox et les Quantity Queries
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!
Quantity Queries pour CSS
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!
Techniques Flexbox, 4: conception d'une page produits
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.
Cacher des éléments avec CSS
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?
Contrôler le modèle de boîte
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.
Comment fonctionne z-index
Ç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!
Techniques Flexbox, 3 : layout sur 2 colonnes
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?
Techniques Flexbox, 2 : centrer verticalement
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.
Techniques Flexbox, 1 : titre aligné et retour à la ligne
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.
Comment fonctionne CSS Float
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.
Transformer un layout avec Flexbox
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.
Combiner CSS clip-path et Shapes
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.
Masquer et détourer en CSS
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.
Découvrir Susy
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
CSS Shapes, une introduction
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.
Des colonnes de même hauteur
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.
Utiliser Flexbox
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?
Le positionnement CSS
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.
CSS Block, Inline et Inline-Block
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.
La chorégraphie du contenu
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 pour les nuls
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.