Add variables

inetis-ch · Mar 27, 2024 · 2a16472 · 2a16472
1 parent f64c149
commit 2a16472
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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)