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.