Custom Bootstrap Themes Using Clarion
Bootstrap is the most popular the world's most popular front-end component library. It provides you with an incredible responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Creating sites with is is fast and easy. Combining it with the Clarion Style Architecture will make customizing your site scalable and easy to maintain.
Starting Your Project
Before you get started, make sure Clarion is installed:
npm install -g clarion
Create a new project using the Clarion CLI:
clarion new BootstrapProject cd BootstrapProject
Install Bootstrap (we will be using version 4 for this example):
npm install bootstrap --save
Adding Bootstrap to Your Project
In order to add Bootstrap so it does not clash with the rest of your styles, add the following import statement to your manifest (
index.scss) file in the
Now, any styles that are added will override the default Bootstrap styles so you can easily customize the library to fit your needs.
One of the great things about Bootstrap 4 is that all of the variables used in their
SASS files use the
!default attribute. This means that if you set a value to a variable with the same name Bootstrap will automatically take your value over the value defined in the framework. Now customizing things like colors is incredibly easy!
For example, the variables for colors in Bootstrap 4 look like this:
$blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; $theme-colors: ( primary: $blue, secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800 ) !default;
Now you can easily override this by creating a colors file in your Abstracts directory (
clarion add abstract colors), pasting in this code, and changing the color values (make sure you remove the
!default attribute in your code). The entire framework will now adopt your new color scheme.
The new Bootstrap 4 framework is incredible flexible and Clarion allows you to take advantage in a way that helps you stay organized and with minimal effort.