📱 Partie 1

Responsive Design

Adapter votre site à tous les écrans

Qu'est-ce que le Responsive Design ? 📱

3 types d'écrans :

• 📱 Mobile : 0-767px
• 📲 Tablette : 768-1023px
• 💻 Desktop : 1024px+

Pourquoi c'est crucial ? 🎯

• 📊 60%+ du trafic = mobiles
• 🔍 Google favorise le mobile
• 😊 Meilleure expérience

L'approche Mobile First 📱

Les Media Queries 🔍

/* MOBILE : Styles de base */
.header { font-size: 1.5em; padding: 10px; }

/* TABLETTE : 768px+ */
@media (min-width: 768px) {
    .header { font-size: 2em; padding: 20px; }
}

/* DESKTOP : 1024px+ */
@media (min-width: 1024px) {
    .header { font-size: 3em; padding: 40px; }
}

Décrypter une Media Query 🔬

/* Explication détaillée */
@media (min-width: 768px) {
    /* Styles ici */
}

/* Traduction : "À partir de 768px de large" */

Breakpoints standards 📏

Meta viewport : Ne pas oublier ! ⚠️

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Exemple pratique : Navigation responsive 📱

/* MOBILE : Navigation verticale (empilée) */
.nav {
    display: flex;
    flex-direction: column;  /* Une colonne = items empilés */
    gap: 10px;
}

.nav a {
    padding: 15px;
    background: #333;
    text-align: center;
}

/* TABLETTE+ : Navigation horizontale */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;  /* Maintenant horizontal ! */
        justify-content: space-around;
    }
}

📦 Partie 2

Flexbox

Les layouts en une dimension

Qu'est-ce que Flexbox ? 🤔

Activer Flexbox : display: flex

/* Avant */
.container { /* Rien */ }

/* Après : activation ! */
.container { display: flex; }

flex-direction : Choisir la direction 🧭

/* Horizontal (défaut) */
.container { flex-direction: row; }  /* ➡️ */

/* Vertical */
.container { flex-direction: column; }  /* ⬇️ */

justify-content : Alignement axe principal 🎯

Contrôle la position des items sur l'axe principal

.container {
    display: flex;
    justify-content: flex-start;     /* Au début */
    justify-content: center;         /* Au centre */
    justify-content: space-between;  /* Espace entre */
    justify-content: space-evenly;   /* Espace égal */
}

justify-content : Cas d'usage 💡

/* Menu de navigation */
.nav {
    display: flex;
    justify-content: space-between;
}

align-items : Alignement axe secondaire ⬆️

Contrôle sur l'axe perpendiculaire

.container {
    display: flex;
    height: 200px;
    
    align-items: stretch;      /* Défaut: items s'étirent */
    align-items: flex-start;   /* En haut */
    align-items: center;       /* Au milieu */
}

Le centrage parfait ! 🎯

/* LA technique de centrage ultime */
.container {
    display: flex;
    justify-content: center;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement */
    height: 100vh;
}

gap : L'espace entre les items 📏

.container {
    display: flex;
    gap: 20px;  /* 20px entre CHAQUE item */
}

/* Ou séparé : */
.container {
    row-gap: 20px;
    column-gap: 30px;
}

flex-wrap : Retour à la ligne 🔄

/* Par défaut : tout sur une ligne */
.container {
    display: flex;
    flex-wrap: nowrap;  /* Défaut */
}

/* Permettre le retour à la ligne */
.container {
    display: flex;
    flex-wrap: wrap;  /* Items passent à la ligne */
    gap: 20px;
}

Propriétés sur les items : flex 🎚️

/* Contrôler comment UN item spécifique se comporte */

.item {
    flex-grow: 1;    /* Peut grandir (prend l'espace disponible) */
    flex-shrink: 1;  /* Peut rétrécir si besoin */
    flex-basis: 200px;  /* Taille de base (avant grow/shrink) */
}

/* Raccourci : */
.item {
    flex: 1;  /* = flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

.container {
    display: flex;
}

.sidebar { flex: 0 0 250px; }  /* Largeur fixe 250px */
.main { flex: 1; }  /* Prend tout l'espace restant */
.aside { flex: 0 0 200px; }  /* Largeur fixe 200px */

flex: décryptage complet 🔬

/* Exemples commentés : */

flex: 0 0 200px;
/* grow: 0 = Ne grandit pas
   shrink: 0 = Ne rétrécit pas  
   basis: 200px = Taille fixe de 200px */

flex: 1;
/* grow: 1 = Prend l'espace disponible
   shrink: 1 = Peut rétrécir
   basis: 0 = Part de zéro */

flex: 0 1 auto;
/* grow: 0 = Ne grandit pas
   shrink: 1 = Peut rétrécir
   basis: auto = Taille naturelle du contenu */

Exemple : Header responsive 📱

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    gap: 20px;
}

/* Mobile : vertical */
@media (max-width: 767px) {
    .header { flex-direction: column; }
    .nav { flex-direction: column; }
}

Cas d'usage Flexbox 💼

🎨 Partie 3

CSS Grid

Les layouts en deux dimensions

Qu'est-ce que CSS Grid ? 🤔

Flexbox vs Grid : La différence clé 🎯

Activer Grid : display: grid

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
    gap: 20px;
}

grid-template-columns : Définir colonnes 📏

/* Pixels (fixes) */
grid-template-columns: 200px 300px 200px;

/* fr (parts égales) */
grid-template-columns: 1fr 1fr 1fr;

/* Mixte */
grid-template-columns: 250px 1fr 1fr;

/* Répéter */
grid-template-columns: repeat(3, 1fr);

L'unité fr : Le super-pouvoir de Grid ⚡

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
}

grid-template-rows : Définir lignes 📐

/* Pixels */
grid-template-rows: 100px 200px 100px;

/* Auto (selon contenu) */
grid-template-rows: auto auto auto;

/* fr */
grid-template-rows: 1fr 2fr 1fr;

gap : L'espacement (gouttières) 📏

/* Même espace partout */
.grid { gap: 20px; }

/* Espaces différents */
.grid {
    row-gap: 30px;
    column-gap: 20px;
}

Placer les items dans la grille 🎯

/* Placement automatique (défaut) */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Placement manuel */
.item1 {
    grid-column: 1 / 3;  /* Colonnes 1 et 2 */
    grid-row: 1 / 3;     /* Lignes 1 et 2 */
}

grid-column et grid-row expliqués 🔬

/* Image en vedette (2x2) */
.featured {
    grid-column: 1 / 3;  /* 2 colonnes */
    grid-row: 1 / 3;     /* 2 lignes */
}

/* Alternative avec span */
.featured {
    grid-column: span 2;
    grid-row: span 2;
}

grid-template-areas : Nommer les zones 🏷️

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

grid-template-areas : Exemple visuel 👁️

grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";

Grilles responsives automatiques ✨

/* Formule magique responsive */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Aucune media query nécessaire ! */

auto-fit vs auto-fill : La nuance 🤓

/* auto-fit : Étire les items */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* auto-fill : Garde colonnes vides */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

minmax() : Contrôler min et max 📏

.grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* minmax(minimum, maximum) */

Alignement dans Grid 🎯

.container {
    display: grid;
    
    /* Aligner les items dans leurs cellules */
    justify-items: center;
    align-items: center;
    
    /* Aligner la grille dans le container */
    justify-content: center;
    align-content: center;
}

/* Sur un item spécifique : */
.item { justify-self: end; }

Exemple : Galerie responsive 🖼️

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

Exemple : Layout de page 📄

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
}

@media (max-width: 767px) {
    .page {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main" "sidebar" "footer";
    }
}

Grid : Cas d'usage 💼

Flexbox vs Grid : Quand utiliser quoi ? 🤔

Utilisez Flexbox pour : 📦

• 🧭 Navigation (horizontale ou verticale)
• 🎯 Centrage d'éléments
• 📱 Listes de cartes qui wrap
• ⚖️ Distribution d'espace
• 🎨 Barres d'outils et boutons

Utilisez Grid pour : 🎨

• 📐 Layouts de page complets
• 🖼️ Galeries d'images en grille
• 📊 Dashboards et tableaux
• 🎨 Designs complexes avec zones
• 📱 Grilles responsive auto

La question à se poser 💭

Combinez les deux ! 🎯

/* Grid pour la page */
.page { display: grid; }

/* Flexbox pour la nav */
.nav { display: flex; }

/* Grid pour les cartes */
.cards { display: grid; }

/* Flexbox dans chaque carte */
.card { display: flex; }

Exemple : Blog responsive 📝

/* Structure Grid */
.blog { display: grid; grid-template-areas: "h h" "m s" "f f"; }

/* Nav Flexbox */
.nav { display: flex; gap: 20px; }

/* Articles Grid */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

Récapitulatif 🎯

• ✅ Responsive : Media queries + Mobile First
• ✅ Flexbox : Layouts 1D
• ✅ Grid : Layouts 2D
• ✅ Combinaison : Grid + Flexbox = 💪

Points clés à retenir 💡

Le pense-bête ultime 📋

/* Centrage Flexbox */
.container { display: flex; justify-content: center; align-items: center; }

/* Galerie responsive Grid */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }

/* Layout page Grid */
.page { display: grid; grid-template-areas: "h h" "s m" "f f"; }

Ressources pour pratiquer 🎮

Flexbox

• 🐸 Flexbox Froggy : flexboxfroggy.com
• ⚔️ Flexbox Defense : flexboxdefense.com
• 📖 CSS Tricks Guide : css-tricks.com/snippets/css/a-guide-to-flexbox/

Ressources pour pratiquer 🎮

CSS Grid

• 🌱 Grid Garden : cssgridgarden.com
• 🎨 Grid by Example : gridbyexample.com
• 📖 CSS Tricks Guide : css-tricks.com/snippets/css/complete-guide-grid/

Ressources pour pratiquer 🎮

Général

• 📱 MDN Web Docs : developer.mozilla.org
• 🔧 Can I Use : caniuse.com (compatibilité navigateurs)
• 🎯 DevTools : F12 dans votre navigateur !