https://github.com/muriungipatrick/bootstrap-5-theming-kit

A Theming kit to Customize Bootstrap 5 with Sass
https://github.com/muriungipatrick/bootstrap-5-theming-kit

bolerplate bootstrap bootstrap-5-one-page bootstrap-5-tutorial css sass scss theming

Last synced: about 9 hours ago
JSON representation

A Theming kit to Customize Bootstrap 5 with Sass

• Host: GitHub
• URL: https://github.com/muriungipatrick/bootstrap-5-theming-kit
• Owner: MuriungiPatrick
• Created: 2021-02-04T13:06:52.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-29T06:01:43.000Z (about 3 years ago)
• Last Synced: 2024-08-13T07:03:03.425Z (3 months ago)
• Topics: bolerplate, bootstrap, bootstrap-5-one-page, bootstrap-5-tutorial, css, sass, scss, theming
• Language: CSS
• Homepage:
• Size: 134 KB
• Stars: 163
• Watchers: 5
• Forks: 287
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bootstrap v5 Theme Kit

A starter project for making Bootstrap 5 themes with Sass

*** This is simple starter project to help you get started quickly when making a custom Bootstrap theme.

![theming-kit html](https://user-images.githubusercontent.com/11283502/116907735-a58d7280-ac4a-11eb-8dbd-b905648593f8.png)

## Prerequisites

This works on Windows, macOS and Linux.

Node Package Manager are required. Make sure you can `run node --v.`

You can get Node at `nodejs.org`, then install dart-sass using `npm install sass --save-dev`

## Getting started

# NOTE: 

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.

#### for stand alone use follow below instructions

1. Clone this repo 

2. Then cd into to the clone project which will be (Bootstrap-5-Theming-Kit)

3. Run npm install

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 ) .

5. Look at theming-kit.html (ideally with a local development webserver if possible)  

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```

7. enjoy :-).