From 2a164729fe0184851fb37679ebf08e99b98341c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pierre-Andr=C3=A9=20Vullioud?= <pa@inetis.ch>
Date: Wed, 27 Mar 2024 08:02:33 +0100
Subject: [PATCH] Add variables

---
 12.unite_mesure.md | 22 ++++++++++-
 12bis.variables.md | 93 ++++++++++++++++++++++++++++++++++++++++++++++
 README.md          |  3 ++
 SUMMARY.md         |  1 +
 4 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 12bis.variables.md

diff --git a/12.unite_mesure.md b/12.unite_mesure.md
index ae8177d..6e07abb 100644
--- a/12.unite_mesure.md
+++ b/12.unite_mesure.md
@@ -1,4 +1,4 @@
-# 12. Unités de mesure CSS
+# 12. Unités de mesure et variable
 
 Dans un outil de conception graphique, nous travaillons généralement avec des valeurs de pixels ou de points, car le format de la sortie peut être fixe, par exemple 1920×1080 pixels ou A4, A3 etc.
 
@@ -144,3 +144,23 @@ https://codepen.io/chriscoyier/pen/CiwFD/
 
 [Understandingcss units](https://webplatform.github.io/docs/tutorials/understanding-css-units/)\
 [The Lengths of CSS](https://css-tricks.com/the-lengths-of-css/)
+
+## Variables CSS
+
+Les variables CSS sont des entités définies pour contenir des valeurs pouvant être utilisées dans tout le document. Elles sont créées en initiant des propriétés personnalisées telles que `--main-color: noir`; et sont accessibles en utilisant la syntaxe `var()` tel que color: `var(--main-color)`;. Ces propriétés permettent de réduire la répétition de la valeur et simplifient la maintenance du code.
+
+Exemple :
+
+```css
+    :root {
+        --main-color: black;
+        --main-bg-color: white;
+    }
+
+    body {
+        color: var(--main-color);
+        background-color: var(--main-bg-color);
+    }
+```
+:hand: Tâches Remplacer les couleurs de votre site web par des variables CSS.
+
diff --git a/12bis.variables.md b/12bis.variables.md
new file mode 100644
index 0000000..896618a
--- /dev/null
+++ b/12bis.variables.md
@@ -0,0 +1,93 @@
+# 12 bis. Variables CSS
+
+Les variables CSS sont des entités définies pour contenir des valeurs pouvant être utilisées dans tout le document. Elles sont créées en initiant des propriétés personnalisées telles que `--main-color: noir`; et sont accessibles en utilisant la syntaxe `var()` tel que color: `var(--main-color)`;. Ces propriétés permettent de réduire la répétition de la valeur et simplifient la maintenance du code.
+
+```css
+    :root {
+        --main-color: black;
+        --main-bg-color: white;
+    }
+
+    body {
+        color: var(--main-color);
+        background-color: var(--main-bg-color);
+    }
+```
+
+Design system
+Dans les frameworks CSS tels que Bootstrap, les variables facilitent le partage d'un design de base à travers les éléments. Prenez la classe .bg-danger, qui change la couleur d'arrière-plan d'un élément en rouge et sa propre couleur en blanc. Dans ce premier projet, vous allez construire quelque chose de similaire.
+
+```css
+    :root {
+        --primary: #007bff;
+        --secondary: #6c757d;
+        --success: #28a745;
+        --error: #dc3545;
+        --link: #007bff;
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border-radius: 0.25rem;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .btn-primary {
+        color: white;
+        background-color: var(--primary);
+    }
+
+    .btn-secondary {
+        color: white;
+        background-color: var(--secondary);
+    }
+
+    .btn-success {
+        color: white;
+        background-color: var(--success);
+    }
+
+    .btn-error {
+        color: white;
+        background-color: var(--error);
+    }
+
+    .btn-link {
+        color: var(--link);
+        background-color: transparent;
+    }
+```
+La classe `btn` contient les styles de base pour tous les boutons. Les variations de couleurs sont définies au niveau `:root` du document. 
+
+Par exemple, si demain vous décidez que la valeur de la propriété personnalisée `--error` est trop terne pour une couleur rouge, vous pouvez facilement la changer en #f00000. Une fois que vous l'avez fait tous les éléments utilisant cette propriété personnalisée sont mis à jour
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>CSS Variables - Button Variations</title>
+  </head>
+  <body>
+    <section>
+      <div class="container">
+        <h1 class="title">CSS Color Variations</h1>
+        <div class="btn-group">
+          <button class="btn btn-primary">Primary</button>
+          <button class="btn btn-secondary">Secondary</button>
+          <button class="btn btn-link">Link</button>
+          <button class="btn btn-success">Success</button>
+          <button class="btn btn-error">Error</button>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
+```
+
+
+:hand: Tâches Remplacer les couleurs de votre site web par des variables CSS.
+
diff --git a/README.md b/README.md
index ad7806f..18c81a7 100644
--- a/README.md
+++ b/README.md
@@ -62,3 +62,6 @@ Ce guide présente le code d'une manière visuellement différente du texte ordi
 Nous utilisons cette icône dans le texte pour distinguer les informations des tâches. De cette façon, vous pouvez toujours voir immédiatement pour chaque chapitre quelles parties sont nécessaires pour créer le portfolio.
 
 :hammer\_pick: Une action a effectuer
+
+Dernière mise à jour le 27.03.2024
+
diff --git a/SUMMARY.md b/SUMMARY.md
index 9863825..cbb1ff1 100644
--- a/SUMMARY.md
+++ b/SUMMARY.md
@@ -12,6 +12,7 @@
 * [10. Mise en page CSS](10.mise\_en\_page.md)
 * [11. Absolu & Relatif](11.absolut\_relatif.md)
 * [12. Unités de mesure CSS](12.unite\_mesure.md)
+* [12bis. Les variables](12bis.variables.md)
 * [13. Section Expertise](13.expertise.md)
 * [14. Position & Transformation](14.postion\_transformation.md)
 * [15. Travail](15.experience.md)