Aller au contenu principal

Module 4.4 – Frameworks CSS

Objectif​

Comprendre les frameworks CSS, maîtriser Bootstrap et Tailwind CSS, et savoir choisir le bon outil selon le projet.

Théorie​

Qu'est-ce qu'un framework CSS ?​

Un framework CSS est une collection de styles pré-écrits et de composants réutilisables qui accélèrent le développement.

Avantages :

  • Développement plus rapide
  • Design cohérent
  • Responsive par défaut
  • Composants prêts à l'emploi

Inconvénients :

  • Peut être lourd (taille du fichier)
  • Moins de personnalisation
  • Courbe d'apprentissage

Bootstrap​

Bootstrap est un framework CSS populaire développé par Twitter.

Installation​

Via CDN (rapide pour tester) :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Via npm :

npm install bootstrap

Système de grille​

Bootstrap utilise un système de 12 colonnes.

<div class="container">
    <div class="row">
        <div class="col-md-6">Colonne 1 (50%)</div>
        <div class="col-md-6">Colonne 2 (50%)</div>
    </div>
</div>

Breakpoints :

  • col-sm-* : ≥576px
  • col-md-* : ≥768px
  • col-lg-* : ≥992px
  • col-xl-* : ≥1200px

Composants Bootstrap​

Boutons :

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Cartes :

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Titre</h5>
        <p class="card-text">Contenu</p>
        <a href="#" class="btn btn-primary">Action</a>
    </div>
</div>

Navigation :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <div class="navbar-nav">
            <a class="nav-link" href="#">Accueil</a>
            <a class="nav-link" href="#">À propos</a>
        </div>
    </div>
</nav>

Formulaires :

<div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
</div>

Utilitaires Bootstrap​

Classes utilitaires pour des styles rapides :

<div class="d-flex justify-content-between align-items-center p-4">
    <span class="text-primary fw-bold">Texte</span>
    <button class="btn btn-sm btn-outline-secondary">Action</button>
</div>

Tailwind CSS​

Tailwind CSS est un framework "utility-first" : au lieu de classes prédéfinies, on compose avec des classes utilitaires.

Installation​

Via CDN (pour tester) :

<script src="https://cdn.tailwindcss.com"></script>

Via npm (recommandé) :

npm install -D tailwindcss
npx tailwindcss init

Philosophie utility-first​

Au lieu de créer des classes CSS personnalisées, on utilise des classes utilitaires :

<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg">
    <h2 class="text-2xl font-bold">Titre</h2>
    <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-gray-100">
        Cliquer
    </button>
</div>

Classes principales​

Layout :

  • flex, grid, container
  • items-center, justify-between
  • gap-4, space-x-2

Espacement :

  • p-4 : padding
  • m-2 : margin
  • px-4 py-2 : padding horizontal/vertical

Typographie :

  • text-xl, text-2xl : tailles
  • font-bold, font-semibold : poids
  • text-center, text-left : alignement

Couleurs :

  • bg-blue-500 : fond bleu
  • text-red-600 : texte rouge
  • border-gray-300 : bordure grise

Responsive :

  • md:flex : flex à partir de md
  • lg:text-2xl : texte 2xl à partir de lg

Variantes​

Tailwind permet d'appliquer des styles selon l'état :

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:outline-none focus:ring-2">
    Bouton
</button>

Variantes disponibles :

  • hover: : au survol
  • focus: : au focus
  • active: : au clic
  • disabled: : désactivé

Configuration​

Personnaliser Tailwind via tailwind.config.js :

module.exports = {
    theme: {
        extend: {
            colors: {
                'custom-blue': '#1e40af',
            }
        }
    }
}

Comparaison Bootstrap vs Tailwind​

Bootstrap​

Avantages :

  • Composants prêts à l'emploi
  • Documentation complète
  • Grande communauté
  • Facile pour débuter

Inconvénients :

  • Moins flexible
  • Taille importante
  • Design "Bootstrap" reconnaissable

Quand l'utiliser :

  • Prototypage rapide
  • Applications internes
  • Besoin de composants complexes rapidement

Tailwind​

Avantages :

  • Très flexible
  • Design unique
  • Taille optimisée (purge CSS)
  • Workflow rapide

Inconvénients :

  • Courbe d'apprentissage
  • Beaucoup de classes dans le HTML
  • Nécessite compilation

Quand l'utiliser :

  • Design sur mesure
  • Projets modernes
  • Développeurs expérimentés

Exercice​

  1. Installer Bootstrap

    • Ajoutez Bootstrap via CDN
    • Créez une page avec la grille Bootstrap
    • Testez les composants (boutons, cartes)

  2. Créer un layout Bootstrap

    • Header avec navbar
    • Contenu avec grille (2 colonnes sur desktop, 1 sur mobile)
    • Footer
    • Utilisez les classes utilitaires

  3. Installer Tailwind

    • Installez Tailwind via npm
    • Configurez le fichier tailwind.config.js
    • Créez un fichier CSS avec les directives Tailwind

  4. Créer un composant Tailwind

    • Créez une carte avec Tailwind
    • Utilisez les classes utilitaires
    • Ajoutez des variantes (hover, focus)

  5. Comparer les deux

    • Recréez le même composant avec Bootstrap et Tailwind
    • Comparez le code HTML
    • Identifiez les différences

Quiz​

  1. Qu'est-ce qu'un framework CSS ?

    • Un langage de programmation
    • Une collection de styles et composants pré-écrits
    • Un éditeur de code

  2. Combien de colonnes dans le système de grille Bootstrap ?

    • 10
    • 12
    • 16

  3. Quelle est la philosophie de Tailwind ?

    • Component-first
    • Utility-first
    • Framework-first

  4. Comment appliquer un style au survol avec Tailwind ?

    • hover:bg-blue-500
    • hover:bg-blue-500
    • onHover:bg-blue-500

  5. Quand utiliser Bootstrap plutôt que Tailwind ?

    • Toujours
    • Pour un prototypage rapide avec composants prêts
    • Jamais

Mini défi​

Mission : Créer une page avec les deux frameworks

Créez deux versions d'une même page : une avec Bootstrap, une avec Tailwind.

Page à créer : Dashboard simple

Éléments requis :

  1. Header

    • Logo à gauche
    • Navigation à droite
    • Responsive (menu hamburger sur mobile)

  2. Contenu principal

    • Grille avec 3 cartes
    • Chaque carte : titre, texte, bouton
    • Responsive (3 colonnes desktop, 1 mobile)

  3. Sidebar (optionnel)

    • Menu vertical
    • Liens de navigation

  4. Footer

    • Informations de contact
    • Liens sociaux

Version Bootstrap :

  • Utilisez les composants Bootstrap
  • Grille Bootstrap
  • Classes utilitaires Bootstrap

Version Tailwind :

  • Classes utilitaires uniquement
  • Même design que Bootstrap
  • Configuration personnalisée si nécessaire

Critères :

  • ✅ Les deux versions ont le même design
  • ✅ Responsive sur tous les écrans
  • ✅ Code propre et bien organisé
  • ✅ Utilisation correcte de chaque framework
  • ✅ Comparaison documentée (avantages/inconvénients)

Objectif : Maîtriser les deux frameworks et savoir choisir selon le contexte.

Validation : Vous pouvez passer au Parcours 5 quand vous maîtrisez au moins un framework CSS et comprenez leurs différences.

Félicitations ! Vous avez terminé le Parcours 4 - Développement web HTML/CSS. Vous pouvez maintenant créer des pages web modernes et responsives !