ode-bootstrap 1.1.4-feat-produit.202306051650 → 1.1.4-feat-explorer.202306051652

package/README.md

@@ -1,7 +1,7 @@
-# ODE Bootsrap Framework
+# ODE Bootstrap Framework
 
-ODE Bootstrap is a CSS framework contains all UI components used by our ENT.
-This framework is based on bootstrap 4.
+ODE Bootstrap is a CSS framework containing all the UI components used by our ENT.
+This framework is based on bootstrap 5.2.
 
 ## Install
 
@@ -11,76 +11,57 @@ git clone https://github.com/opendigitaleducation/ode-bootstrap.git
 ./build.sh clean init
 ```
 
-### Start dev mode
+## Dev
 
-Launch it using:
-```
-./build.sh watch
-```
-
-A light web server starts and the URL is displayed on console (http://localhost:8080/docs most of the time).
-Livereload is enable, so each changes on source trigger a refresh in the browser.
-
-### Build release
-
-Build a release using:
-```
-./build.sh build
-```
-
-Minified CSS and assets are generated into *dist* folder.
-
-## Create a theme
-
-The framework is full customisable and lets you create themes.
-
-In your theme, install the dependency using:
-
-```
-npm i --save-dev ode-bootstrap
-```
+To use these generic styles, see documentation on `ode-bootstrap-one` or `ode-bootstrap-neo` 
 
-Then import the sass file below:
-```
-@import "node_modules/ode-bootstrap/scss/index";
-```
+## Bootstrap 5.x
 
-And then you can override all variables:
-- defined *node_modules/ode-bootstrap/scss/_variables-ode*
-- defined in bootstrap framework
+If a component already exists in Bootstrap 5.x, we use it and override it if necessary. The same goes for utility classes.
 
+## Components
 
-## Linter SCSS
+Based on Bootstrap 5.2, many components used CSS Variables (CSS Custom Properties). We adhere to this guideline to create our own components or to override Bootstrap components.
 
-Lancer le linter sur les fichers scss du projet
-```
-./build.sh lint
-```
+```scss
+// _form-control.scss
 
-Lancer le linter sur les fichers scss du projet et corriger certains problèmes de mise en forme
-```
-./build.sh lint-fix
-```
+.form-control {
+  --#{$prefix}input-padding-y: #{$input-padding-y};
+  --#{$prefix}input-padding-x: #{$input-padding-x};
+  --#{$prefix}input-padding-y-lg: #{$input-padding-y-lg};
+  --#{$prefix}input-padding-x-lg: #{$input-padding-x-lg};
+  --#{$prefix}input-font-size-lg: #{$input-font-size-lg};
+  --#{$prefix}input-padding-y-sm: #{$input-padding-y-sm};
+  --#{$prefix}input-padding-x-sm: #{$input-padding-x-sm};
+  --#{$prefix}input-font-size-sm: #{$input-font-size-sm};
+  --#{$prefix}input-border-color: #{$input-border-color};
+  --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
+  --#{$prefix}input-disabled-color: #{$input-disabled-color};
+  --#{$prefix}input-disabled-border-color: #{$input-disabled-border-color};
+  --#{$prefix}input-placeholder-color: #{$input-placeholder-color};
+  --#{$prefix}input-focus-border-color: #{$input-focus-border-color};
+  --#{$prefix}input-filled-border-color: #{$input-filled-border-color};
+  --#{$prefix}input-border-radius: #{$input-border-radius-lg};
+  --#{$prefix}input-border-radius-sm: #{$input-border-radius};
+  --#{$prefix}input-border-radius-lg: #{$input-border-radius-lg};
+  padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+  border-color: var(--#{$prefix}input-border-color);
+  font-size: var(--#{$prefix}input-font-size-lg);
+  min-height: inherit;
 
-Pour un affichage des problèmes en temps réel, installer le plugin VSC stylelint.
-Pour une correction du formattage à l'enregistrement, ajouter au ficher de configuration settings.json:
-```
-"editor.codeActionsOnSave": {
-    "source.fixAll.stylelint": true
-},
+...
+}
 ```
 
-## Documentation
-
-TODO
-Regles de nommage
-
-Ajout d'un composant
-
-Surcharge composant
+Structure and generic styling should be done in `ode-bootstrap` when overring style should be done inside `ode-bootstrap-one` or `ode-bootstrap-neo`
 
-Ajout d'une variable
+```scss
+// ode-bootstrap-one > _form-control.scss
 
-Ajout d'une mixin
+$input-focus-border-color: $orange-200;
 
-Ajout d'un icone
+.form-control {
+  --#{$prefix}input-focus-border-color: #{$input-focus-border-color};
+}
+```