Twitter Bootstrap v2 RTL Edition

Twitter Bootstrap

Recently, I've been playing around with Twitter Bootstrap and it's pretty amazing.

It is pretty full featured and contains a lot of useful components in addition to the basic grid and styling. It even comes with a spiffy icon set.

The Need for Right to Left

A site I've been working on requires the display to be right-to-left instead of left-to-right. Who knew there were people who read things backwards?

The original method for handling this, was to create an rtl.css file and mirror all of the CSS that required flipping...manually.

For example:

.some-class {
  padding: 10px 5px 7px;
  float: right;
  text-align: left;
}

Would have to become:

.some-class {
  padding: 10px 5px 7px 5px;
  float: left;
  text-align: right;
}

Multiply that by...a lot of random stuff. That was a huge pain. Especially since the CSS I was working with was huge, filled with hacks and ever-growing.

Open Source FTW

I saw this issue and learned of a tool called R2.

I already had node.js installed, previously, so all I had to do was:

sudo npm install R2 -g

Then:

r2 bootstrap.css bootstrap-rtl.min.css
r2 bootstrap.responsive bootstrap-responsive-rtl.min.css

I had to use the unminified version of bootstrap.css because the r2 didn't convert the minified version correctly, at least when I tried it. The bootstrap.responsive seemed to also be missing the file extension of .css but r2 looked like it converted it fine.

I downloaded the Bootstrap v2 zip file from their main page on github.

The last thing that needs to be done is include this css somewhere:

body {
  direction: rtl;
}

My Gift to You

I have run those few commands and created a github repo that you can clone and tinker with:

https://github.com/donaldducky/bootstrap-rtl

I have also put a demo of it up on github pages:

View Demo

And there are a few screenshots below.

Normal Layout

Responsive Layout

Thanks

Many thanks to Mark Otto, Jacob Thornton, and Dustin Diaz for creating such useful tools for the consumption of everyone. We really appreciate it!