Formation Liquid Layout CSS
| € HT / personne |
| 3 jours (21 heures) |
Présentation
Notre formation Liquid Layout CSS vous présente une approche de mise en page fluide où la structure s’adapte au contenant et à la taille d’écran, sans dépendre de frameworks.
En combinant unités relatives, fonctions modernes, CSS Grid, Flexbox et media/container queries, vous concevez des interfaces réactives, accessibles et performantes.
Cette formation Liquid Layout CSS vous donne une méthode claire pour concevoir, documenter et industrialiser des layouts liquides : de la grille à la typographie fluide, du composant réutilisable au design system.
Vous apprendrez à auditer un existant, définir des tokens CSS, maîtriser l’accessibilité et livrer des écrans de qualité production.
À l’issue, vous serez en mesure de livrer des mises en page élégantes, scalables et conformes aux bonnes pratiques W3C/MDN.
Comme toutes nos formations, celle-ci s’appuie sur les dernières règles W3C en vigueur.
Objectifs
- Concevoir des layouts fluides (Grid, Flexbox)
- Maîtriser les unités relatives
- Industrialiser via design tokens et CSS Custom Properties
- Garantir accessibilité et performances
- Migrer d’un écran fixed vers un écran liquid responsive
Public visé
- Développeurs front-end
- Intégrateurs web
- UX/UI designers
Pré-requis
- Bases en HTML/CSS
- Notions de Flexbox et Grid
Programme de notre formation Liquid Layout CSS
[Jour 1 – Matin]
Conception « Liquid » : principes et vocabulaire
- Différences fixed, fluid/liquid, responsive
- Unités relatives : %, em/rem, vw/vh, vmin/vmax
- Typographie fluide avec clamp()
- Règles d’or d’accessibilité et de lisibilité
- Limites classiques des mises en page liquides
- Atelier pratique : Transformer une maquette fixe en squelette « liquid ».
[Jour 1 – Après-midi]
Grille fluide avec CSS Grid
- Grilles implicites/explicites
- grid-template-areas pour un layout sémantique
- Gérer les gouttières et les breakpoints
- Patron « carte de produit » responsive
- Atelier pratique : Grille fluide 12 colonnes sans framework.
Flexbox pour les composants liquides
- Flexbox vs Grid
- Alignements, wrap, gap et order
- Composants liquides (cards, navbars, footers)
- Ratios avec aspect-ratio
- Min/max-content : pièges courants
- Atelier pratique : Barre d’en-tête fluide et menu adaptable.
[Jour 2 – Matin]
Media Queries & Container Queries
- @media : breakpoints mobiles-d’abord
- Container Queries : adapter au contenant
- Scales typographiques fluides
- Architecture (ITCSS/BEM) pour le responsive
- Atelier pratique : Composant responsive via container queries.
[Jour 2 – Après-midi]
Unités, valeurs et fonctions utiles
- Panorama CSS Values & Units
- Fonctions min()/max()/clamp()
- Fluid spacing : échelles adaptatives
- Médias fluides : max-width, object-fit
- Grilles fluides sans media queries
- Atelier pratique : Système d’espacements fluide.
Patterns de layout liquides
- Holy Grail, sidebar sticky, mosaïques
- Masonry progressif (Grid + auto-placement)
- Layouts éditoriaux multi-colonnes
- Densité et bornes min/max
- Dégradations élégantes
- Atelier pratique : Création d’une page éditoriale fluide.
[Jour 3 – Matin]
Performance & accessibilité d’un layout fluide
- Budget Core Web Vitals
- Images réactives : srcset, sizes
- Focus, ordre de lecture et tabindex
- Contrastes et lisibilité multi-écrans
- Tests de zoom/agrandissement
[Jour 3 – Après-midi]
Design system & tokens fluides
- Design tokens (tailles, espacements, typo)
- CSS Custom Properties & CSS Layers
- Librairie de composants liquides
- Atelier pratique : Starter tokens + composants.
Industrialisation & intégration
- Organisation CSS (BEM, Layers, PostCSS)
- CI/CD : lint, tests visuels, non régression
- Stratégies de migration
- Audit et refactor progressif
- Transmission efficace des maquettes UX vers les développeurs
- Atelier pratique : Refactor « liquid layout » d’une page legacy.
Pour aller plus loin
Formation React
Formation Angular
Formation Vite.js
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| € HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
