Difference between #14 and #13 of Using Bootstrap with LESS

unchanged
Title
Using Bootstrap with LESS
unchanged
Category
How-tos
unchanged
Tags
bootstrap, less, responsive
changed
Content
## Introduction

I discovered [Twitter Bootstrap](http://www.getbootstrap.com) almost two years
ago. After trying it out for a while I fell in love with it. It didn't take long
before I realized that it would be great to write an extension that allowed
developers to start using Bootstrap in their Yii projects. One night I sat down
and started writing what later became my now popular [bootstrap
extension](http://www.yiiframework.com/extension/bootstrap). Now that the
extension is quite widely used in the community I felt that it was time to write
about how to use Bootstrap to its full potential. If you use the Bootstrap CSS
files you're really missing out on some great features. After reading this
article you'll be able to take full advantage of Bootstrap using LESS.

## Setup

In order to use LESS you need a LESS compiler and the fastest way to get one is
to install my [less extension](http://www.yiiframework.com/extension/less). Once
you have your LESS compiler ready you can start writing some less files. Create
a *less* directory in the root of your project and add a *styles.less* file in
that directory. Next create a *bootstrap* directory in the same folder and add
the Bootstrap LESS files there. You can download the files from the [GitHub
page](https://github.com/twitter/bootstrap) or copy them from the bootstrap
extension (they can be found in the *assets/less* directory).

Next you need to create a bootstrap file which imports the less files in the
correct order to be able to override Bootstrap's variables properly. Create a
*bootstrap.less* file in your *less* directory and copy the code below into that
file.

**bootstrap.less**
~~~
[css]
/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "bootstrap/variables.less";
@import "variables.less"; // import our own variables here
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

// Base CSS
@import "bootstrap/type.less";
@import "bootstrap/code.less";
@import "bootstrap/forms.less";
@import "bootstrap/tables.less";

// Components: common
@import "bootstrap/sprites.less";
@import "bootstrap/dropdowns.less";
@import "bootstrap/wells.less";
@import "bootstrap/component-animations.less";
@import "bootstrap/close.less";

// Components: Buttons & Alerts
@import "bootstrap/buttons.less";
@import "bootstrap/button-groups.less";
@import "bootstrap/alerts.less"; // Note: alerts share common CSS with
buttons and thus have styles in buttons.less

// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";
@import "bootstrap/breadcrumbs.less";
@import "bootstrap/pagination.less";
@import "bootstrap/pager.less";

// Components: Popovers
@import "bootstrap/modals.less";
@import "bootstrap/tooltip.less";
@import "bootstrap/popovers.less";

// Components: Misc
@import "bootstrap/thumbnails.less";
@import "bootstrap/media.less";
@import "bootstrap/labels-badges.less";
@import "bootstrap/progress-bars.less";
@import "bootstrap/accordion.less";
@import "bootstrap/carousel.less";
@import "bootstrap/hero-unit.less";

// Utility classes
@import "bootstrap/utilities.less"; // Has to be last to override when
necessary
~~~

If you wish to use the responsive styles you need to do the same for
*responsive.less*. This is because Bootstrap compiles the normal and responsive
styles separately (this will change in version 3.0.0).

**responsive.less**
~~~
[css]
/*!
 * Bootstrap Responsive v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------

// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport{
  width: device-width;
}

// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately

@import "bootstrap/variables.less";
@import "variables.less"; // import our own variables here
@import "bootstrap/mixins.less";

// RESPONSIVE CLASSES
// ------------------

@import "bootstrap/responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "bootstrap/responsive-1200px-min.less";

// Tablets to regular desktops
@import "bootstrap/responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "bootstrap/responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "bootstrap/responsive-navbar.less";
~~~

Now import *bootstrap.less* (and *responsive.less* if necessary) in your
*styles.less* file.

**styles.less**
~~~
[css]
@import "bootstrap.less";
@import "responsive.less";

// add your style here
~~~

Here's## Directory structure

Below is an example of the complete directory structure:

~~~
webapp/
  assets/
  css/
  images/
  less/
    bootstrap/
      accordion.less
      .....
    bootstrap.less
    styles.less
    responsive.less
    variables.less
  protected/
  .htaccess
  index.php
  index-test.php
~~~

## Don't compile in production

You shouldn't compile your LESS files on the production server. Instead you
should compile it to CSS using *Node.js* and the *less* module and use the CSS
files in production.

## Conculsion

That's it, now you're all setup to use Bootstrap using LESS. Let's take a look
at the benefits.

 * You can override variables used by Bootstrap so you don't need to write rules
that override the default styles. Bootstrap will instead be compiled using your
variables
 * You can use Bootstrap's mixins in your own style, there are a lot of useful
mixins for css3 styles, gradients and other miscellaneous methods such as
.size(), .clearfix(), etc.
 * You can customize the responsive breaking points and even styles if you copy
the *responsive-*.less* files into your *less* directory
 * You can minify and optimize your styles using the *yui-compressor* which is
supported by the *lessc* command before moving to production

Thank you for reading. I hope you learned a thing or two about Bootstrap.