diff --git a/README.md b/README.md index 773c8c0..eee01ff 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Alyra Bootstrap Challenge - Custom Bootstrap5 CSS build +## Prérequis : `node` et `npm` sont installés + ## Step 0 Créer un dossier `custom` dans la racine du projet `alyra-challenge-custom-b5` @@ -18,9 +20,59 @@ touch custom/mybootstrap.scss ## Step 1 -DCopier le dossier scss depuis les fichiers source de [Bootstrap 5](https://www.dropbox.com/s/q3hj2vzhkm6kkwl/Screenshot%202020-06-30%2012.46.45.png?dl=0) et coller-le dans la racine du projet `alyra-challenge-custom-b5` +Dans le terminal lancer la commande `npm init` + +```bash +npm init +``` + +La ligne de commande posera quelques questions, les réponses seront intégrées dans un nouveau fichier qui va se créer (tout seul) - `package.json` -![](https://wptemplates.pehaa.com/assets/alyra/b5source.png) +Pour l'instant les valeurs par défaut sont tout à fait ok, attention au "name" de votre projet - il doit être en minuscules, sans espaces, peut contenir "-" ou "\_". + +Le fichier `package.json` est un fichier très important, une sorte d'identifiant de projet et de son manifeste. Plus d'info [ici](https://docs.npmjs.com/creating-a-package-json-file) + +Avant que nous passons à l'installation du bootstrap depuis npm, on devrait s'assurer d'avoir `node_modules` dans le fichier `.gitignore`. `.gitignore` spécifie les fichiers et/ou repertoires qui devraient pas être trackés par git. + +Si votre projet ne contient pas de fichier `.gitignore` vous pouvez le créer dans la racine du projet + +```bash +touch .gitignore +``` + +Passons maintenant à l'installation de bootstrap + +```bash +npm install --save-dev bootstrap@next +``` + +```bash +├── node_modules +│ ├── bootstrap +│ │ ├── LICENSE +│ │ ├── README.md +│ │ ├── dist +│ │ │ ├── css +│ │ │ └── js +│ │ ├── js +│ │ │ ├── dist +│ │ │ └── src +│ │ ├── package.json +│ │ └── scss +│ │ ├── _alert.scss +│ │ ├── _badge.scss +│ │ ├── ... +│ │ ├── _variables.scss +│ │ ├── bootstrap-grid.scss +│ │ ├── bootstrap-reboot.scss +│ │ ├── bootstrap-utilities.scss +│ │ ├── bootstrap.scss +│ │ ├── forms +│ │ ├── helpers +│ │ ├── mixins +│ │ ├── utilities +│ │ └── vendor +``` --- @@ -31,7 +83,7 @@ Configurer Sass Live Compiler - créer un dossier `.vscode` (dans la racine du projet `alyra-challenge-custom-b5` ) - dedans créer un fichier `settings.json` - reprendre l'exemple de config depuis [la FAQ de plugin Live Sass Compiler](https://ritwickdey.github.io/vscode-live-sass-compiler/docs/faqs.html) -- ajouter `"scss/**"` dans `"liveSassCompile.settings.excludeList"` (comme ci-dessus) +- rien à ajouter, `node_modules` où se trouvent fichiers scss de bootstrap sont déjà exclus ``` { @@ -49,8 +101,7 @@ Configurer Sass Live Compiler ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", - ".vscode/**", - "scss/**" + ".vscode/**" ], "liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ @@ -88,9 +139,10 @@ On devrait appercevoir des nouveaux dossiers et fichiers comme dans l'aborescenc │ ├── mybootstrap.min.css │ └── mybootstrap.min.css.map ├── images +├── node_modules ├── index.html +├── package.json ├── screenshots -├── scss └── style.css ``` @@ -127,19 +179,17 @@ Il nous restera à corriger les chemins vers les fichiers partials. ```scss // custom/mybootstrap.scss -@import "../scss/functions"; -@import "../scss/variables"; -@import "../scss/mixins"; -@import "../scss/utilities"; +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/utilities"; ... ``` Astuce: vous pouvez vous servir de la fonctionnalité "Replace" de VSCode Alt+Cmd/Ctrl+F cherche : @import " -replace with : @import "../scss/ - -![](https://wptemplates.pehaa.com/assets/alyra/replace.png) +replace with : @import "../node_modules/bootstrap/scss/ ## Step 6 @@ -148,12 +198,12 @@ Commentez les partials dont vous vous ne servez pas. ```scss // custom/mybootstrap.scss ... -// @import "../scss/toasts"; -// @import "../scss/modal"; -// @import "../scss/tooltip"; -// @import "../scss/popover"; -@import "../scss/carousel"; -// @import "../scss/spinners"; +// @import "../node_modules/bootstrap/scss/toasts"; +// @import "../node_modules/bootstrap/scss/modal"; +// @import "../node_modules/bootstrap/scss/tooltip"; +// @import "../node_modules/bootstrap/scss/popover"; +@import "../node_modules/bootstrap/scss/scss/carousel"; +// @import "../node_modules/bootstrap/scss/spinners"; ... ```