Aller au contenu principal

04 Framework CSS

Objectifs

Utiliser un framework CSS.

  • Estimer son temps de travail
  • Utiliser l'outil de développement de son navigateur
  • Utiliser le framework CSS Bootstrap

Rendu​

Mise en place​

  • Cloner le nouveau dépôt Git dans le répertoire du cours.
  • Ouvrir le répertoire du dépôt Git dans Visual Studio Code.

Estimation​

  • Estimer le temps nécessaire pour réaliser ce travail.
    • Découper le travail en tâches pour faciliter l'estimation.
  • Une fois terminé, comparer le temps estimé avec le temps réellement passé.
TâcheTemps estiméTemps passéCommentaire
Estimation10m15m...
............
Total2h1h30...

Visual Studio Code​

  • Installer l'extension Prettier - Code formatter :
    • Extensions (dans la barre latérale) > Rechercher Prettier > Installer
  • Configurer Prettier comme formateur par défaut :
    • (en bas à gauche) > Settings > Rechercher Default Formatter > Choisir Prettier
Configuration

Pour faciliter le développement :

  • Sauvegarde automatique
    • (en bas à gauche) > Settings > Rechercher Auto Save > Choisir afterDelay
  • Formatage automatique du code
    • (en bas à gauche) > Settings > Rechercher Format On Save > Activer
Raccourcis
  • Commenter/décommenter du code :
    • Sélectionner le code à commenter
    • Cmd + / (macOS) ou Ctrl + / (Windows)
    • Répéter pour décommenter
  • Sélectionner plusieurs occurrences d'un texte :
    • Sélectionner du texte
    • Cmd + D (macOS) ou Ctrl + D (Windows)
    • Répéter pour sélectionner les occurrences suivantes
    • Vous pouvez maintenant modifier toutes les occurrences en même temps
  • Rechercher et remplacer :
    • Cmd + F (macOS) ou Ctrl + F (Windows)
      • Ajouter Shift pour rechercher dans tout le projet
      • Cliquer sur pour remplacer
Le raccourci unique

Un raccourci pour les gouverner tous. Un raccourci pour les trouver.

  • macOS : Cmd + Shift + P
  • Windows : Ctrl + Shift + P
  • Permet de rechercher des commandes (ouvrir le rendu Markdown, formater le document, ouvrir le terminal, etc.)
  • Sans le Shift pour rechercher des fichiers (ou sans le >)

Outils de développement​

  • Découvrir les outils de développement. Plusieurs façons d'y accéder :
    • Aller sur une page web.
    • Clic-droit > Inspecter
    • F12
  • Se documenter sur L'inspecteur : explorateur du DOM et éditeur de CSS
  • Utiliser les outils de développement pour :
    • Observer les styles appliqués à un élément
      • Clic-droit sur un élément > Inspecter > Sous-onglet Styles
    • Modifier le style d'un élément :
      • Clic-droit sur un élément > Inspecter > Changer la couleur de fond en rouge par exemple
    • Observer les éléments de la page :
      • Survoler les éléments HTML dans le panneau Inspecteur/Éléments pour les mettre en surbrillance
    • Modifier le contenu d'un élément :
      • Supprimer un élément HTML de la page
    • Tester le responsive design :
      • (en haut à droite de la fenêtre des outils de développement) > Choisir un appareil ou personnaliser les dimensions
        • Comment réagit la page sur un écran plus petit ?

Grille Bootstrap​

  • Lire la documentation de Bootstrap.
  • Faire les exercices sur Grille Bootstrap.
    • CodePen est un IDE en ligne pour écrire du code HTML, CSS et JavaScript.
    • Faire au moins deux étapes.

Étape 1​

Indice 1

Tout mettre dans un container.

Indice 2

Utiliser des row et des col.

Solution
<div class="container">
  <div class="row">
    <div class="col">
      <div class="block red"></div>
    </div>
    <div class="col">
      <div class="block blue"></div>
    </div>
    <div class="col">
      <div class="block green"></div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="block yellow"></div>
    </div>
    <div class="col">
      <div class="block purple"></div>
    </div>
    <div class="col">
      <div class="block teal"></div>
    </div>
  </div>
</div>

Étape 2​

Indice 1

Utiliser les col-xl-* avec les classes col-*.

Indice 2

Utiliser qu'une seule row.

Indice 3

Les breakpoints s'appliquent à partir (plus grand) de la largeur spécifiée.

Solution
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="block red"></div>
    </div>
    <div class="col-12 col-xl-4">
      <div class="block blue"></div>
    </div>
    <div class="col-12 col-xl-4">
      <div class="block green"></div>
    </div>
    <div class="col-12 col-xl-4">
      <div class="block yellow"></div>
    </div>
    <div class="col-12 col-xl-6">
      <div class="block purple"></div>
    </div>
    <div class="col-12 col-xl-6">
      <div class="block teal"></div>
    </div>
  </div>
</div>

Étape 5​

Utiliser Horizontal alignment

Aventure​

  • Copier votre aventure de la semaine passée dans le répertoire Git.
  • Utiliser Bootstrap pour améliorer le style de votre aventure.
    • Utiliser un CDN pour inclure Bootstrap dans votre projet.
      • Un CDN est un réseau de serveurs qui stockent des fichiers (bibliothèques, frameworks, etc.) pour les rendre accessibles à tous. Votre page HTML va donc chercher ces fichiers sur un serveur distant.
      • Ajouter les lignes suivantes dans le head de vos fichiers HTML : 
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
          crossorigin="anonymous"
        ></script>
  • Le résultat final devrait ressembler à cette page (code).
    • Renommer index.html en aventure.html.
      • S'inspirer du CDN Starter dans les exemples.
        • Regarder le code source de la page pour voir comment elle est construite : de manière statique sur GitHub ou interactive sur StackBlitz.
      • Ajouter une NavBar qui contient :
        • Un logo (par exemple Bootstrap)
        • Le nom de votre aventure
        • Un lien vers la page d'accueil
        • Un lien vers votre aventure
        • Un lien vers une page de contact (contact.html)
      • Mettre le contenu dans un Container dans une Grid et dans une Card.
      • Mettre les choix dans un Button group
    • Créer un nouveau fichier index.html pour votre votre page d'accueil.
      • Contient un titre, un lorem ipsum et deux boutons.
      • Utiliser Text pour aligner le titre au centre.
      • Utiliser Flex pour aligner les boutons au centre.
    • Créer le fichier contact.html pour la page de contact.
  • Personnaliser les variables CSS
    • Créer un fichier custom.css pour ajouter des règles CSS personnalisées. 
      :root {
        --bs-primary: #0d6efd;
        --bs-secondary: #6c757d;
        --bs-body-color: #212529;
      }
    • Ajouter le fichier custom.css après le fichier Bootstrap dans le head de vos fichiers HTML. 
      <link href="custom.css" rel="stylesheet" />
    • Modifier les couleurs (avec color picker sur Google ou sur Codes Couleur HTML par exemple).
    • Liste complète des variables disponibles.
  • Publier votre aventure sur GitHub Pages.
info

Adapter au moins complètement une page avec Bootstrap ainsi que les pages d'accueil et de contact.

Gitignore​

Créer un fichier .gitignore dans le dépôt Git pour ignorer les fichiers et dossiers inutiles :

.gitignore
__pycache__/
.pytest_cache/

.DS_Store

Test​

Pour tester votre projet, ajouter un fichier test_web.py contenant :

test_web.py
from glob import glob
from os import path
from subprocess import check_output


def test_index():
    assert path.isfile("index.html"), "Il faut le fichier 'index.html'."


def test_html():
    for file in glob("**/*.html", recursive=True):
        output = check_output(
            [
                "curl",
                "-s",
                "-H",
                "Content-Type: text/html",
                "--data-binary",
                f"@{file}",
                "https://validator.w3.org/nu/?out=gnu&level=error",
            ],
        ).decode()
        assert "" == output, f"{file} {output}"


def test_css():
    count: int = 0
    for file in glob("**/*.css", recursive=True):
        count += 1
        output = check_output(
            [
                "curl",
                "-s",
                "-H",
                "Content-Type: text/css",
                "--data-binary",
                f"@{file}",
                "https://validator.w3.org/nu/?out=gnu",
            ],
        ).decode()
        assert "" == output, f"{file} {output}"


def test_filename():
    for file in glob("**/*", recursive=True):
        assert match(
            "^[a-z0-9\\\.\-_/]+$", file
        ), f"{file} ne doit contenir que des lettres minuscules, chiffres, tirets ou underscores. "

Lancer les tests avec pytest --tb=no -vv.

Dernière mise à jour le