To Bootstrap, or not to Bootstrap?

Front end frameworks are great time savers for getting your project up and running quickly, but is the time you save setting up the project wasted when it comes to customizing the design?

At a conference earlier this year, I got the opportunity to meet Brad Frost, which was super awesome. I told him at the time I used Bootstrap in my front end development and he said something that got me thinking. He said that in his experience, front end frameworks (like Bootstrap, Foundation, etc) get you about 80% of the way, then you spend the last 20% fighting them while you customize it to not look like Bootstrap.

I could certainly relate to this. Where I work, there’s usually a designer on projects who drives what the website will look like. Very very often, the designer would come up with a very doable design, but it couldn’t be replicated in Bootstrap without heavy customization. I could get a quick prototype up, but it would take a considerable amount of customization before it was production ready in the eyes of the designer. By the time we were done, very little of Bootstrap’s styles were even visible, but they were still there in the code.

I saw this and it made me think about what Brad said. I was essentially using Bootstrap as a base, then customizing it so much that you couldn’t really tell it was Bootstrap. I might as well be writing it my way from the start, instead of hacking Bootstrap’s styles. So instead of hacking Bootstrap’s styles, I started compiling my own stylesheet only using the Bootstrap LESS files I need. Now, there is less of me fighting with Bootstrap and overriding styles. I only use their utility classes, vendor prefixes, grid, and scaffolding LESS files now and it gives me the quick start I want when doing a project, but allows for massive customizations without fighting against Bootstrap’s styles.

This is currently working pretty nicely for me. I could see myself in the future having my own grid system, mixins, etc that I take with my from project to project, but right now the Bootstrap ones are working great.

Using only Bootstrap 3’s grid system using LESS

Import the following files into your main LESS file, replacing “../components/” with the appropriate path to where Bootstrap is located:

@import "../components/bootstrap/less/scaffolding.less";
@import "../components/bootstrap/less/variables.less";

@import "variables.less"; // Put your custom variables in here

@import "../components/bootstrap/less/mixins.less";
@import "../components/bootstrap/less/forms.less";

// Delete next 2 lines if you don't want the navbar styles
@import "../components/bootstrap/less/navs.less";
@import "../components/bootstrap/less/navbar.less";

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

// Import Font Awesome
@import "../components/font-awesome/less/font-awesome.less";
// Font path to be printed in CSS
@fa-font-path: "../src/components/font-awesome/fonts";

//Put custom files here
@import 'custom.less';
@import 'header.less';

That’s all you really need to get up and running with the Bootstrap grid system. The benefits to doing this are that your compiled CSS file will be super light-weight because you’re only taking in the parts that you need.