Synopsis

Creating a customized version of bootstrap using .less. Overriding base bootstrap styles explained! Can also use .sass instead of .less. But the bootstrap peoples support the .less version directly

Background

What is bootstrap: https://getbootstrap.com/

 

We currently use the bootstrap-less NPM Package.  

 

Less is a “precompiler” language used to define css styles in a programmatic way to reduce redundancies and hopefully make css more maintainable.

 

What is LESS: http://lesscss.org/

 

We mainly just want to import only the bootstrap .less files containing only the features we use, into our own custom version of Bootstrap

 

Usually located:  …\client-assets\less\bootstrap-custom.less

*And thus this file acts as a wrapper for bootstrap AND a place to put custom theme style definitions, optionaly.

 

This file starts with the aforementioned import statements.

 

// Core variables and mixins

@import "../../node_modules/bootstrap-less/bootstrap/variables.less";

... blah blah

 

// Core CSS

@import "../../node_modules/bootstrap-less/bootstrap/scaffolding.less";

... blah blah

 

Then below that, we can apply any “overrides” of the bootstrap .less code or, alternatively, regular CSS code definitions that will override the same definitions declared in the final compiled bootstrap-custom.css file.

 

*That way we don’t touch the original bootstrap source code.  Which will make is seamless for us to drop new versions of bootstrap when they become available.

 

Then later in the file we have:

Ex. less overrides

// Navbar links

@navbar-default-color: #fff;

@navbar-default-link-color: #fff;

 

These are actually originally declared in the node_modules\bootstrap.less\bootstrap\variables.less

When both of these files are compiled by a GULP command, they will be regular css.

And our less overrides (since they appear later in this file) will win out.

Also for regular CSS, later css declarations win over prior declarations with the same name

 

Also later in the file:

Ex.

/*Bootstrap Forms Overrides*/

// override .horizontal-form .control-label to be left aligned

.control-label {

   text-align: left !important;

}

When referencing CSS Stylesheet files

 

Ex.  in the our template _layout.cshtml file or index.cshtml you can declare the following css stylesheets in this order.

 

<link href="~/css/bootstrap.css" rel="stylesheet" asp-append-version="true" />

<link href="~/css/bootstrap-custom.css" rel="stylesheet" asp-append-version="true" />

 

Style Definitions in later files (i.e. bootstrap-custom.css) will always win out.

 

But in our case, our gulp command will actually combine all the imported bootstrap .less files and our bootstrap-custom.less file AND output 1 file that we’ll reference in _layout.cshtml

 

So if a developer modifies the bootstrap-custom.less file, when they are done, they should immediately run in the command line: gulp less

 

This will compile the less and output a .css file in the wwwroot\css folder with the same name:  bootstrap-custom.css

 

Then we ensure we have the reference to our 1 compiled .less file in our html code:

 

<link href="~/css/bootstrap-custom.css" rel="stylesheet" asp-append-version="true" />

 

This process could be enhanced further, and be run on a build server for Continuous Integration/Delivery with your Build Software of choice.  We've used Jenkins.  Can have it dynamically inject the css link into your html file at this time as well.