Using Bootstrap as a Mixin Library
by Adam Wathan on June 6, 2014If 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!
Adam Wathan
Latest posts by Adam Wathan (see all)
- Testing Eloquent Models with Faktory - September 26, 2014
- Using Bootstrap as a Mixin Library - June 6, 2014
- The Virtual Proxy Pattern - May 13, 2014