Using Bootstrap as a Mixin Library

If you’re already using Less for your custom stylesheets but importing Bootstrap as plain CSS, you’re missing out.

The Bootstrap website doesn’t do a great job of encouraging you to use their source Less files, but it makes it a lot easier to write clean, semantic markup.

Getting it setup in your project is also really simple, and if you do it right, you can actually get a nice reduction in file size.

Downloading the source

The first step is to head over to the Bootstrap download page and grab the zipped source.

Unzip it and you’ll get this:

bootstrap/
├── dist/
├── docs/
├── fonts/
├── js/
├── less/
├── test-infra/
├── ...

The only thing we really care about here is the less folder.

Rename it to bootstrap and ditch everything else so you’re left with this:

bootstrap/
├── alerts.less
├── badges.less
├── bootstrap.less
├── breadcrumbs.less
├── button-groups.less
├── buttons.less
├── carousel.less
└── ...

Pulling it into your project

Take that folder of Less files you just renamed to bootstrap and stick it in alongside your existing Less assets. You’ll have something like this:

your-project/
└── assets/
    └── less
        ├── bootstrap
        └── style.less

Now head into that bootstrap folder and open up bootstrap.less.

your-project/
└── assets/
    └── less
        └── bootstrap
            ├── ...
            ├── bootstrap.less
            └── ...
        └── style.less

Setting up your imports

Inside that bootstrap.less file, you’ll see that’s where all of the individual Bootstrap Less files get imported.

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";

// etc.

Since we just want to use Bootstrap as a mixin library and we’re not trying to compile it all down to the standard Bootstrap CSS file, we can modify this file to use the import as reference feature introduced in Less 1.5.

Import as reference

By using @import (reference), you’re able to make all of the Bootstrap classes available to your project as mixins without actually spewing all of that stuff into your compiled CSS.

For example, say you have a file with some classes you are using as mixins:

// custom-buttons.less
.custom-button {
    border-radius: 4px;
    background: #33ba3a;
    color: #fff;
}

…and you import that file into another stylesheet and mixin a class like this:

// style.less
@import "custom-buttons.less"

.contact {
    button {
        .custom-button;
    }
}

Using a regular @import, this is the resulting CSS:

// style.css
.custom-button {
    border-radius: 4px;
    background: #33ba3a;
    color: #fff;
}

.contact {
    button {
        border-radius: 4px;
        background: #33ba3a;
        color: #fff;
    }
}

…whereas @import (reference) gives you this:

// style.css
.contact {
    button {
        border-radius: 4px;
        background: #33ba3a;
        color: #fff;
    }
}

So the .custom-button class was made available as a mixin, but not compiled into the resulting CSS. Very useful when you have a bunch of classes that are only being used as mixins that you don’t use directly in your markup!

Bootstrap gotchas

Bootstrap has a few files that target elements directly that still need to be imported the standard way. Luckily for you, I’ve saved you the work of figuring out which ones!

Edit your bootstrap.less file to look like this:

@import "normalize.less";
@import "print.less";
@import "type.less";
@import "code.less";
@import "tables.less";
@import "forms.less";
@import "scaffolding.less";

@import (reference) "variables.less";
@import (reference) "mixins.less";
@import (reference) "grid.less";
@import (reference) "buttons.less";
@import (reference) "component-animations.less";
@import (reference) "glyphicons.less";
@import (reference) "dropdowns.less";
@import (reference) "button-groups.less";
@import (reference) "input-groups.less";
@import (reference) "navs.less";
@import (reference) "navbar.less";
@import (reference) "breadcrumbs.less";
@import (reference) "pagination.less";
@import (reference) "pager.less";
@import (reference) "labels.less";
@import (reference) "badges.less";
@import (reference) "jumbotron.less";
@import (reference) "thumbnails.less";
@import (reference) "alerts.less";
@import (reference) "progress-bars.less";
@import (reference) "media.less";
@import (reference) "list-group.less";
@import (reference) "panels.less";
@import (reference) "wells.less";
@import (reference) "close.less";
@import (reference) "modals.less";
@import (reference) "tooltip.less";
@import (reference) "popovers.less";
@import (reference) "carousel.less";
@import (reference) "utilities.less";
@import (reference) "responsive-utilities.less";

Importing Bootstrap itself

The final step is to actually import bootstrap.less into your own set of assets.

Based on our example folder structure, you would just open up your style.less file and throw this at the top:

@import "bootstrap/bootstrap.less"

Done!

Putting it to work

The main benefit to all of this is being able to remove all of the Bootstrap class names from your HTML and focus on writing more semantic markup.

Using the regular Bootstrap CSS library, you might write some markup like this:

<div class="well well-lg">
    <p>If you'd like to get more information, join our mailing list</p>
    <a href="/sign-up" class="btn btn-success">Sign up now!</a>
</div>

By using Bootstrap as a mixin library, we can do this instead:

// style.less
.sign-up {
    .well;
    .well-lg;
    a {
        .btn;
        .btn-success;
    }
}

<div class="sign-up">
    <p>If you'd like to get more information, join our mailing list</p>
    <a href="/sign-up">Sign up now!</a>
</div>

This lets you focus on writing markup that describes your content itself, instead of how your content is supposed to look.

Next week we’ll talk about how you can use this same approach to really clean up your grid layouts, stay tuned!