Using LESS CSS with Twitter Bootstrap

Using LESS CSS with Twitter Bootstrap

By Tyler Bruffy
October 5, 2012
Development

In our last post we introduced you to LESS CSS. Now we’re following up on that to talk about how you can integrate Twitter Bootstrap to speed up development even more.

Twitter Bootstrap is many things, but first and foremost it is a CSS Framework. CSS Frameworks are generally a set of CSS files containing a bunch of pre-written styles for developers to use in their websites. The size and scope of these frameworks varies, but in the case of Bootstrap there are pre-written styles for everything from icons to menus, and grids to buttons. If you stay within the confines of what the framework has to offer, you can very quickly end up with a nice looking website without writing a single line of CSS!

While Bootstrap’s built-in styles are visually appealing, Bootstrap is still very useful for those of us that prefer to create fully-custom styles for our websites. At a bare minimum, Bootstrap is an excellent reset stylesheet, making sure that the default style of HTML elements looks and acts the same in every browser. But that’s nothing too special. If you recall from our introductory post, LESS has an incredibly useful feature known as mixins. Mixins are where Bootstrap really shines for developers.

Here’s an example from our last post on the power of mixins:

.rounded-corners(@border-radius) {
	-webkit-border-radius: @border-radius;
	-moz-border-radius: @border-radius;
	border-radius: @border-radius;
}

#sidebar {
	.rounded-corners(5px);
}

#footer {
	.rounded-corners(10px);
}

With Bootstrap, the first .rounded-corners() mixin is already created. Of course it’s just one of many mixins Bootstrap offers. And their mixins are tried and tested to provide backwards compatible CSS fallbacks for older browsers, all the way back to IE7. Bootstrap has built-in mixins for a variety of CSS3 properties, including gradients, one of the hardest properties to create consistently across different browsers.

The Grid System

Bootstrap contains a robust system for building websites on a grid. You’ll often notice that websites are broken up into distinct sections of the page. For instance on this page, this content area is separated from the sidebar to the right. Without CSS, the sidebar would display on top of the content. Even though the layout is simple, keeping things from stacking on top of each other can be like puzzle pieces that just don’t fit together during development.

Bootstrap’s grid system makes it very easy to see where different elements of your site will fit. Every component of the layout can be given a class corresponding to a certain size. The classes are span1 through span12, with 12 being the width of the entire site. Components that add up to 12 or less will be in line with each other.

<!-- These three items will display next to each other -->
<div class="span4</div>
<div class="span4</div>
<div class="span4</div>

<!-- The first two items display inline, but the 3rd is in a new row. -->
<div class="span6</div>
<div class="span6</div>
<div class="span6</div>

<!-- And of course, you can mix and match the sizes -->
<div class="span7</div>
<div class="span2</div>
<div class="span3</div>

Integrating Bootstrap

Want to start using bootstrap and LESS in your projects? Here’s how we set up our sites to speed through development: First, you’ll need to grab the latest copy of Bootstrap from their GitHub Page. Then head over and grab the latest copy of less.js from the LESS CSS website. Next up, create a new less file in your css directory, named something like style.less.

You’ll then need to link the less.js file and your new less stylesheet in your websites header. So in the HTML, you’ll want something that looks like:

<link rel="stylesheet/less" type="text/css</span>" href="/css/style.less
<script src="/js/vendor/less-1.3.0.min.js" type="text/javascript">

You only really need the less folder from the Bootstrap download, so copy that over to your css directory. Go ahead and rename it to just “bootstrap.” Once you’ve done that you can add this to the top of your less file:

@import"boostrap/bootstrap.less";

After that, you’ll have a great reset style sheet and access to all of the mixins from Bootstrap in your less stylesheet. If you’d rather just include the awesome mixins, you can replace bootstrap.less with mixins.less.

Jake Intel