Code Smoothie

How to Integrate Bootstrap CSS/Less into a blogging platform

I’ve always loved the Twitter Bootstrap framework, and have always wanted to use it within an existing app.

Today, I came across a simple problem: my images were not responsive because Bootstrap applies its image styling to .img-responsive, not img.

I thought it would be as simple as including the CSS and JavaScript files. Of course, I was mistaken.

In this article, I’m going to teach you the CSS/Less, with the Ghost blogging platform. The idea applies to other styling frameworks, too.

Think about it: how are you supposed to mess with the HTML when it is generated with Markdown?

Bad Method:

Write it in HTML. Markdown supports HTML, right?

Think of the implications for a moment..

  • What if you wanted to switch to another framework, say Zurb Foundation or Pure?
  • Ruins the principle of markdown. Isn’t it just ugly?

You really want to write this:


<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>

Instead of this?

First name | Last Name
-----------|-----------
John       | Doe
Jane       | Doe

(Technically not “official” markdown, but you get the point.)

If you do, then feel free to stop reading this article, because you would rather write in HTML than Markdown (ugh!)

Of course, there are other implications, but that’s up to you to think of.

Good Method:

Mixins! This is possible with Less or Sass.

In Less, to make images responsive:

img {
  .img-responsive();
}

Easy, right?

For those that need a touchup on CSS preprocessors, mixins allow you to copy existing rules of a selector just by calling the selector. The parentheses are technically not required, but I like them.

A Note about Optimization (Optional extension)

You need to @import the bootstrap files, but if you want to conserve bandwidth, there’s something else to pay attention to. You can only output the needed CSS. You can do so importing by reference.

@import (reference) "file.less";

Basically, if you don’t need it for the base styling and stuff outside the post, such as navs, then import it by reference.

Here is what I have. Yours will be different.

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

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import (reference) "component-animations.less";
@import (reference) "dropdowns.less";
@import (reference) "button-groups.less";
@import (reference) "input-groups.less";
@import "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) "responsive-embed.less";
@import (reference) "wells.less";
@import (reference) "close.less";

// Components w/ JavaScript
@import (reference) "modals.less";
@import (reference) "tooltip.less";
@import (reference) "popovers.less";
@import (reference) "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

Conclusion

Markdown is good for writing, due to its simplicity. We should avoid HTML whenever possible (I will now admit that even in this article I used a tiny bit of HTML). We can thank Mixins for facilitating this.

As always, look forward to reading your comments!