ode-bootstrap 1.1.4-dev.202306051725 → 1.1.4-feat-produit.202306051650

package/README.md

@@ -1,7 +1,7 @@
-# ODE Bootstrap Framework
+# ODE Bootsrap Framework
 
-ODE Bootstrap is a CSS framework containing all the UI components used by our ENT.
-This framework is based on bootstrap 5.2.
+ODE Bootstrap is a CSS framework contains all UI components used by our ENT.
+This framework is based on bootstrap 4.
 
 ## Install
 
@@ -11,57 +11,76 @@ git clone https://github.com/opendigitaleducation/ode-bootstrap.git
 ./build.sh clean init
 ```
 
-## Dev
+### Start dev mode
 
-To use these generic styles, see documentation on `ode-bootstrap-one` or `ode-bootstrap-neo` 
+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
+```
 
-## Bootstrap 5.x
+Then import the sass file below:
+```
+@import "node_modules/ode-bootstrap/scss/index";
+```
 
-If a component already exists in Bootstrap 5.x, we use it and override it if necessary. The same goes for utility classes.
+And then you can override all variables:
+- defined *node_modules/ode-bootstrap/scss/_variables-ode*
+- defined in bootstrap framework
 
-## Components
 
-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.
+## Linter SCSS
 
-```scss
-// _form-control.scss
+Lancer le linter sur les fichers scss du projet
+```
+./build.sh lint
+```
 
-.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;
+Lancer le linter sur les fichers scss du projet et corriger certains problèmes de mise en forme
+```
+./build.sh lint-fix
+```
 
-...
-}
+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
+},
 ```
 
-Structure and generic styling should be done in `ode-bootstrap` when overring style should be done inside `ode-bootstrap-one` or `ode-bootstrap-neo`
+## Documentation
+
+TODO
+Regles de nommage
+
+Ajout d'un composant
+
+Surcharge composant
 
-```scss
-// ode-bootstrap-one > _form-control.scss
+Ajout d'une variable
 
-$input-focus-border-color: $orange-200;
+Ajout d'une mixin
 
-.form-control {
-  --#{$prefix}input-focus-border-color: #{$input-focus-border-color};
-}
-```
+Ajout d'un icone