Using bootstrap in-directly

Using bootstrap in your LESS files, instead of directly in your HTML.

HTML files should contain content and not layout so we should use the bootstrap grid system, directly within our LESS files instead of in HTML.

In the following post I use LESS and the bootstrap grid system. If you are not familiar with these you might need to look them up before reading this post.

An example of using bootstrap directly in your HTML could look like this.
We have 4 different sizes and then "our css-class", my-style, where we have our css styles.

<div class="col-xs-10 col-sm-8 col-md-5 col-lg-4 my-style">  
    <!-- content here -->
</div>

The same example after moving the bootstrap responsive layout out of the HTML.

<div class="my-style">  
    <!-- content here -->
</div>

As you can see, it simplifies the HTML.
To set this up you need to do a few things that I will describe in the following section.

In your LESS file, that contains your styles, you would have the following:

@import (reference) "bootstrap-mixins";
.my-style {
  .make-xs-column(10);
  .make-sm-column(8);
  .make-md-column(5);
  .make-lg-column(4);

  /* more css here */
}

For this to work, you must have a file called, bootstrap-mixins.less, where you import the relevant parts of bootstrap. Here is mine (you will have to change the paths):

/* Import needed parts of bootstrap */
@import (reference) "../bower_components/bootstrap/less/variables.less";
@import (reference) "../bower_components/bootstrap/less/grid.less";
@import (reference) "../bower_components/bootstrap/less/mixins.less";

That's it! Now you can use bootstrap's mixins. If you need other parts of bootstrap make sure you include the relevant bootstrap LESS files in the file, bootstrap-mixins.less.

If you prefer writing less you could create your own shortcuts to replace .make-xs-column(10) and all the other mixins.
I created a file, called grid-shortcuts.less, with the following:

@import (reference) "bootstrap-mixins";
.x1 {
  .make-xs-column(1);
}
.x2 {
  .make-xs-column(2);
}
/* create one for each viewport and size */

After creating this file, I can import it into my less files, like this:

@import (reference) "grid-shortcuts";
.my-style2 {
  .x10; /* x for xtra small */
  .s8; /* s for small */
  .m5; /* m for medium */
  .l4; /* l for large */
}

And now I can use bootstrap's grid system with a very short syntax.

See the attached project for the complete code example. https://github.com/ckirschberg/BootstrapAsMixin

Menu

Using bootstrap in your LESS files, instead of directly in your HTML.