Get Started!

Using Built-in Bootstrap LessCSS

Canvas has twitter's Bootstrap framework built-in, here's a quick look at how to best use the LessCSS with an Application or Site

The built-in Bootstrap LessCSS sources are located within the application path :

<app-root>/__Less__/less/

This folder contains the same content as bootstrap's less source folder.

There are a number of additional / modified files :

  • bootstrap-head.less
  • bootstrap-tail.less
  • bootstrap-head-no-vars.less

We can use @import in a LessCSS file, within a DynAss, you can control and create your own version of the Bootstrap CSS.

Simple

The simplest form would be :

// CSS for MySite

// Include the standard Bootstrap head
@import "../../../__Less__/less/bootstrap-head.less";

// Bespoke css

.my-site {
  .home-link {
    color:@brand-primary;
  }
}


// Include the tail less files
@import "../../../__Less__/less/bootstrap-tail.less";

This assumes the LessCSS file is found in css/ of the DynAss.

My css folder p-r

Custom Variables

To take control of the variables.less we can create another LessCSS file add the bootstrap variables source and use the bootstrap-head-no-vars in place of bootstrap-head for example :

 

// CSS for MySite

// Import local copy of Boostrap variables 
@import "variables.less";

// Include the standard Bootstrap head
@import "../../../__Less__/less/bootstrap-head-no-vars.less";

// Bespoke css

.my-site {
  .home-link {
    color:@brand-primary;
  }
}


// Include the tail less files
@import "../../../__Less__/less/bootstrap-tail.less";

This assumes the LessCSS file is found in css/ of the DynAss.

Use bootstrap-live-customizer.com

You can use tools suchas http://bootstrap-live-customizer.com/ to create an alternative variables.less.