I have to admit, I have a love/hate relationship with Twitter Bootstrap. It was a turning point in my life when I first discovered the famed framework; my websites started looking like every other start up website out there (that was exciting, really!) and less like websites built from 1997 for Netscape Navigator. God, I was still using tables to establish my layouts :(

But as time went on and I went from a total n00b to a more intermediate developer, I’ve become more and more opinionated about how I write code. I don’t enjoy having such a bloated framework anymore. I haven’t used modals since 2012. I don’t even use the glyphicons it comes with, instead link up with Font Awesome (note: there’s also Ionicons). If anything, the only thing I really want out of Bootstrap is it’s layout engine. But that’s where I really flip the table…

For every Bootstrap-involved project I’ve done and taken on, everyone’s code looks like this:

<div class="container" id="services">
   <div class="row">
       <div class="col-xs-12 col-sm-4 col-md-4" id="design">
            <p>Distillery forage farm-to-table biodiesel. Godard    jean shorts butcher, heirloom pickled put a bird on it kale chips fixie. Man bun ramps sartorial church-key 90's, tacos plaid.</p>
        </div>
        ...
    </div>
</div>

Don’t be shy, I’m totally guilty of this, too! Sure, it may not matter to many people as long as the finished product looks fine. It probably doesn’t even feel wrong to you. But as you mature and grow more, you start to think about long-term goals of a project which includes maintainability and readability (and HTML semantics!). What if you need to pass off your project to somebody else? How much time would they need to take to figure out your code before scrapping what you wrote and re-writing it from scratch? That’s a bit over-dramatic, but check out this article from ZenDesk (Really enjoyed this, Stephany Varga!).

In any case, if you must use Bootstrap, I propose you layout your pages like so:

# page.html
<div class="services">
   <div class="design">
        <p>Distillery forage farm-to-table biodiesel. Godard jean shorts butcher, heirloom pickled put a bird on it kale chips fixie. Man bun ramps sartorial church-key 90's, tacos plaid.</p>
    </div>
        ...
</div>
# stylesheet.sass
.services
  @extend .container
.design
  @extend .col-xs-12, .col-sm-4, .col-md-4

By using the @extend property from SCSS/Sass, you can move the Bootstrap classes out of your HTML file and into your sections inside your stylesheets. This leads to a more readable HTML code and a more modular stylesheet, IMO.

FWIW: we use Susy for layouts, which uses similar tactics.

As you dive deeper into your profession, I hope that you think more about your craftsmanship and that this inspires you to always better yourself.

Holler any time — angelo@avividvisual.com