Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:themes [2025/10/01 10:01] – [Définir un thème] paolofront:themes [2025/10/01 10:07] (Version actuelle) – [Faire un fichier thème] paolo
Ligne 11: Ligne 11:
 ### Organiser les principaux fichiers CSS ### Organiser les principaux fichiers CSS
  
-Les principaux fichiers **CSS** sont stockés dans ''assets/styles''. Ils seront "la base" de notre stylisation (variables **CSS**, classes, éléments, règle générale, ..., par défaut). Quant aux thèmes, ils rajoutent une couche à ces fichiers et les modifient. +Les principaux fichiers css sont stockés dans ''assets/styles''. Ils seront "la base" de notre stylisation (variables css, classes, éléments, règle générale, ..., par défaut). Quant aux thèmes, ils rajoutent une couche à ces fichiers et les modifient. 
  
-Nous pourrions avoir dans le dossier style un seul fichier **CSS** mais il vaut mieux organiser tout ça, comme ci-dessous par exemple:+Nous pourrions avoir dans le dossier style un seul fichier css mais il vaut mieux organiser tout ça, comme ci-dessous par exemple:
  
-  * ''theme.css'' dans lequel les variables **CSS** sont définies.+  * ''theme.css'' dans lequel les variables css sont définies.
  
 ``` ```
-/* assets/styles/theme.css */+/* src/assets/styles/theme.css */
  
 @theme { @theme {
Ligne 26: Ligne 26:
 ``` ```
  
-  * ''base.css'' où les règles **CSS** générales de notre application sont définies.+  * ''base.css'' où les règles css générales de notre application sont définies.
  
 ``` ```
-/* assets/styles/base.css */+/* src/assets/styles/base.css */
  
 @layer base { @layer base {
Ligne 45: Ligne 45:
 ``` ```
  
-  * ''style.css'' qui joue le rôle de point d'entrée de tous les fichiers **CSS**.+  * ''style.css'' qui joue le rôle de point d'entrée de tous les fichiers css.
  
 ``` ```
-/* assets/styles/style.css */+/* src/assets/styles/style.css */
  
 @import "tailwindcss"; @import "tailwindcss";
Ligne 62: Ligne 62:
 ### Faire un fichier thème ### Faire un fichier thème
  
-Les thèmes sont rangés dans ''assets/themes''. De la même manière que la "base" **CSS**, un "thème" peut se décliner en plusieurs fichiers ou en un seul.+Les thèmes sont rangés dans ''assets/themes''. De la même manière que la "base" css, un "thème" peut se décliner en plusieurs fichiers ou en un seul.
  
 ``` ```
-/* assets/themes/smart-maker.theme.css */+/* src/assets/themes/smart-maker.theme.css */
  
 @import "tailwindcss"; @import "tailwindcss";
Ligne 80: Ligne 80:
 } }
 ``` ```
 +
 ### Importer les fichiers CSS ### Importer les fichiers CSS
  
Ligne 85: Ligne 86:
  
 ``` ```
 +// src/main.jsx
 +
 import { StrictMode } from "react"; import { StrictMode } from "react";
 import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";