How I use Bootstrap with Less

Less by now is nothing new, but with the popularity of Bootstrap there are some good practices to think about.

My general work flow is to sketch out an idea on paper, and really brain storm the idea.

I then take it to HTML and work on the front end layout. At this time I will use all the bootstrap scaffolding classes as they are.

Once a project is solidified I then begin to refine the HTML and the Less using more of the Bootstrap Mixins.

I find it interesting that most small MVC frame works will use a bootstrap file, something that ties everything together but is intended to be the base of a project. It is ment to be extended.

Bootstrap css is ment to accomplish the same thing, Except there is Zero documentation on the Bootstrap site about the included Mixins. The actual structural building block of the framework.

If you consider Bootstrap as a code framework then your Mixins could be compared to helpers, helpers are reusable code.

Leveraging the Mixins will help you to create a bootstrap site that does not look like a bootstrap site.

I recently redesigned a small site and where my initial markup may have looked like this:


<div class="row">
<div class="span8 content">...</div>
<div class="span4 sidebar">...</div>
</div>

Once I got things to where I knew changes would be minimal I moved into more semantic markup.


<article><section>...</section><aside></aside></article>

Where my Less looked something like this:


article {
  .makeRow();

  section {
    .makeColumn(8);
  }

  aside {
    .makeColumn(4);
  }
}

Customizing the print view was simple as well.


article {
  .makeRow();

  section {
    .makeColumn(12);
  }

  aside {
    display: none;
  }
}

Signup for my mailing list

Receive other rambings like this on design, code, and some times food.