├── scss ├── style.scss └── _custom.scss ├── .gitignore ├── package.json ├── README.md ├── theming-kit.html └── assets └── css └── style.css.map /scss/style.scss: -------------------------------------------------------------------------------- 1 | @use "custom" as *; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | .idea/workspace.xml 4 | .idea/tasks.xml 5 | .idea/ 6 | dist/ -------------------------------------------------------------------------------- /scss/_custom.scss: -------------------------------------------------------------------------------- 1 | // ######################################################### 2 | // COPY BOOTSTRAP VARIABLES YOU NEED TO OVERIDE INTO THIS FILE 3 | // WE HAVE AFEW OVERIDES ALREADY 4 | // ######################################################### 5 | 6 | // COPY VARIABLES YOU WANT TO OVRIDE HERE 7 | 8 | @import "../node_modules/bootstrap/scss/bootstrap.scss"; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-v5", 3 | "version": "1.0.0", 4 | "description": "learning bootstrap v5 from scratch", 5 | "main": "index.js", 6 | "scripts": { 7 | "compile:sass": "sass --watch scss:assets/css" 8 | }, 9 | "keywords": [ 10 | "bootstrap", 11 | "bootstrap", 12 | "v5", 13 | "learn", 14 | "bootstrap" 15 | ], 16 | "author": "patrick muriungi", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "sass": "^1.42.1" 20 | }, 21 | "dependencies": { 22 | "autoprefixer": "^10.2.4", 23 | "bootstrap": "^5.1.1", 24 | "postcss-cli": "^8.3.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap v5 Theme Kit 2 | A starter project for making Bootstrap 5 themes with Sass 3 | 4 | *** This is simple starter project to help you get started quickly when making a custom Bootstrap theme. 5 | 6 |  7 | 8 | 9 | 10 | ## Prerequisites 11 | 12 | This works on Windows, macOS and Linux. 13 | Node Package Manager are required. Make sure you can `run node --v.` 14 | You can get Node at `nodejs.org`, then install dart-sass using `npm install sass --save-dev` 15 | 16 | ## Getting started 17 | 18 | # NOTE: 19 | 20 | 1. If you have bootstrap 5 already installed just copy theming-kit.html to your project and then link the stylesheet which has bootstrap 5 to the head section. 21 | 22 | #### for stand alone use follow below instructions 23 | 24 | 1. Clone this repo 25 | 2. Then cd into to the clone project which will be (Bootstrap-5-Theming-Kit) 26 | 3. Run npm install 27 | 4. Then on your terminal run ``npm run compile:sass`` to Compile ```style.scss``` and then make sure you link the ``style.css`` stylesheet to the head section of the theming-kit.html ( check inside ``assets/css`` folder ) . 28 | 5. Look at theming-kit.html (ideally with a local development webserver if possible) 29 | 6. Add any Bootstrap 5 Sass variables you want to override into `scss/_custom.scss`by copying them from bootstrap ```_variables.scss file``` check inside ```node_modules/bootstrap/scss/_variables.scss``` 30 | 7. enjoy :-). -------------------------------------------------------------------------------- /theming-kit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |Hello this is body text, Documentation and examples for common text utilities to control 55 | alignment, wrapping, weight, and more.
56 |.fs-1 text
81 |.fs-2 text
82 |.fs-3 text
83 |.fs-4 text
84 |.fs-5 text
85 |.fs-6 text
86 || # | 140 |First | 141 |Last | 142 |Handle | 143 |
|---|---|---|---|
| 1 | 148 |Mark | 149 |Otto | 150 |@mdo | 151 |
| 2 | 154 |Jacob | 155 |Thornton | 156 |@fat | 157 |
| 3 | 160 |Larry the Bird | 161 |||
.accordion-body, though the transition does limit overflow.
215 | .accordion-body, though the transition does limit overflow.
227 | .accordion-body, though the transition does limit overflow.
239 | Some quick example text to build on the card title and make up the bulk of the card's content.
296 |Some quick example text to build on the card title and make up the bulk of the card's content.
303 |Some quick example text to build on the card title and make up the bulk of the card's content.
310 |Some quick example text to build on the card title and make up the bulk of the card's content.
317 |Some quick example text to build on the card title and make up the bulk of the card's content.
324 |Some quick example text to build on the card title and make up the bulk of the card's content.
331 |Some quick example text to build on the card title and make up the bulk of the card's content.
338 |Some quick example text to build on the card title and make up the bulk of the card's content.
345 |