https://github.com/bum/bootstrap-color
Collection of over 40 Bootstrap color themes
https://github.com/bum/bootstrap-color
Last synced: 4 months ago
JSON representation
Collection of over 40 Bootstrap color themes
- Host: GitHub
- URL: https://github.com/bum/bootstrap-color
- Owner: bum
- License: mit
- Created: 2019-11-11T14:49:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-14T04:01:50.000Z (over 5 years ago)
- Last Synced: 2024-04-29T21:16:00.290Z (12 months ago)
- Language: CSS
- Homepage: https://bum.github.io/bootstrap-color/theme-switchable/
- Size: 793 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - bum/bootstrap-color - Collection of over 40 Bootstrap color themes (CSS)
README
# Bootstrap Color
## Gallery of color theme for Bootstrap 4
Each folder under `/dist/` is it's own theme including:
- `bootstrap-color.css` : built CSS
- `bootstrap-color.min.css` : built and minified css
- `_begin.scss` : customize settings
- `_end.scss` : modify structure
## Getting started
You can use the built CSS files under `/dist/`,
or import SASS files `_begin.scss` `_end.scss` directly to your scripts to customize it.
We made a demo using bootstrap-color with Vue at
[bootstrap-color-demo-vue](https://github.com/bum/bootstrap-color-demo-vue.git)
you can checkout and customize on it.
## Build steps
You can also checkout the project to local, modify the themes then build with: `yarn build`
## Usage
There are a few different ways you can integrate Bootswatch into your project.
### Via Pre-compiled Asset
Download the `bootstrap-color.min.css` file associated with a theme and replace
Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript
file to have functional dropdowns, modals, etc.
### Via Sass Imports
If you're using [Sass](https://sass-lang.com/) (SCSS) in your project, you can
import the `_begin.scss` and `_end.scss` files for a given theme.
This method allows you to override theme variables.
```scss
// Your variable overrides go here, e.g.:
// $h1-font-size: 3rem;
@import "~bootstrap-color/dist/[theme]/begin";
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-color/dist/[theme]/end";
```
Make sure to import Bootstrap's `bootstrap.scss` in between `_begin.scss` and `_end.scss`!
### Via NPM/YARN
You can install as a package with the command
`npm install bootstrap-color bootstrap`
or
`yarn add bootstrap-color bootstrap`.
## Copyright
This project rebuilds color themes from
[HackerThemes](https://github.com/HackerThemes/theme-machine),
[Bootswatch](https://github.com/thomaspark/bootswatch),
[BootstrapThemes](https://github.com/utkarshkukreti/bootstrap-themes),
etc. Thanks for your sharings! <3