0.15.4 • Published 3 years ago
blossom-bootstrap-theme v0.15.4
Blossom Bootstrap Theme
Blossom base branded theme for Bootstrap 4
Getting Started
Prerequisite
Installation
- Clone repo:
git clone git@github.com:blossomfinance/bootstrap-theme.git
cd bootstrap-theme
nvm install
this installs the correct Node.js versionnvm use
(maybe not necessary?)npm install
this installs the dependencies
View Style Guide
Launch the styleguide with live-reload enabled:
npm start
Your changes to the .scss
will automatically reload the browser.
Theming Bootstrap Workflow
- Review Bootstrap 4 Docs to identify components needed / relevant to include
- Create a new stylesheet for that module under
scss/[module-name].scss
(example:scss/buttons.scss
) - Import the bootstrap module at the top of the files
@import @import "../node_modules/bootstrap/scss/[module-name]";
(example:@import @import "../node_modules/bootstrap/scss/buttons.scss";
) - Modify (as needed) the component's relevant variables in
scss/variables.scss
. You can find these easily by searching the module name, since they are prefixed accordingly, e.g.$btn-
- Add docblock examples in the stylesheet with at least
@page
@section
and@example
@import "../node_modules/bootstrap/scss/buttons";
/**
* Example
*
* Default button styles
*
* @page Buttons
* @section
*
* @example
* <button type="button" class="btn btn-primary">Primary</button>
* <button type="button" class="btn btn-secondary">Secondary</button>
* <button type="button" class="btn btn-success">Success</button>
* <button type="button" class="btn btn-danger">Danger</button>
* <button type="button" class="btn btn-warning">Warning</button>
* <button type="button" class="btn btn-info">Info</button>
* <button type="button" class="btn btn-light">Light</button>
* <button type="button" class="btn btn-dark">Dark</button>
* <button type="button" class="btn btn-link">Link</button>
*/
/**
* Outline buttons
*
* In need of a button, but not the hefty background colors they bring?
* Replace the default modifier classes with the `.btn-outline-*` ones
* to remove all background images and colors on any button.
*
* @section
* @page Buttons
*
* @example
* <button type="button" class="btn btn-outline-primary">Primary</button>
* <button type="button" class="btn btn-outline-secondary">Secondary</button>
* <button type="button" class="btn btn-outline-success">Success</button>
* <button type="button" class="btn btn-outline-danger">Danger</button>
* <button type="button" class="btn btn-outline-warning">Warning</button>
* <button type="button" class="btn btn-outline-info">Info</button>
* <button type="button" class="btn btn-outline-light">Light</button>
* <button type="button" class="btn btn-outline-dark">Dark</button>
*/
Custom Module Workflow
- Create a new scss file
scss/new-module-name.scss
- As you build, add docblock style comment with
@section
and@example
INSIDE your module file. - Don't forget to inport by adding
@import scss/new-module-name.scss
in thescss/custom.scss
0.15.4
3 years ago
0.15.3
3 years ago
0.15.1
3 years ago
0.15.2
3 years ago
0.15.0
3 years ago
0.14.2
3 years ago
0.14.1
3 years ago
0.14.0
3 years ago
0.13.0
4 years ago
0.13.1
4 years ago
0.13.2
4 years ago
0.12.0
4 years ago
0.11.0
4 years ago
0.10.0
4 years ago
0.9.0
4 years ago
0.8.0
4 years ago
0.7.0
4 years ago
0.6.3
4 years ago
0.6.5
4 years ago
0.6.4
4 years ago
0.6.2
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.5.1
4 years ago
0.3.0
4 years ago
0.1.0
4 years ago
0.2.0
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago