1. Introduction
2. Setup
3. Directory structure
4. Don't compile in production
5. Conculsion

Introduction ¶

I discovered Twitter Bootstrap 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. 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. 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 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 ~~~

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.