Decouple Twitter Bootstrap from your html

gistfile1.txt

"Just make it with Boostrap & we'll put something better behind it later"

How many times have you heard that? Then "later" - if it comes - means going through all of your layouts and views and changing all class names. Of course it's possible that your designer will reuse css framework class names for you, but unlikely and not at all if they are just switching to a different css framework. What to do? 

My thought is - aliasing. I've always felt (as have others, I've seen) that css frameworks really "do things wrong" in how they force you to tightly couple your elements to their framework. It really defeats the purpose of a separate stylesheet to begin with. So, playing around a little I came up with this experiment. I'm not a designer first - my focus is on the backend stuff - so I'd really appreciate any feedback on the idea. Is this actually practicable?   Does it stir the juices and give you a better idea? Please let me know!

------

I'm using Sass, but I'm sure you can do something similar with LESS.

// A simple example for a first test. This is style.scss

/*
Unfortunately, at this time you cannot import a css file, only scss. I've read this is to change in upcoming versions.
To make this work, download boostrap.css & rename as _bootstrap.scss (but then import without the underscore - I'm sure Sass people can clear up any mistake I'm making with this)

Then we will use @extend on all of the classes from bootstrap we want to use in our app. We will set them up as variables at the top of the sheet to make substitution easier. Notice the syntax for variables of calss names: #{$form-group} 

*/


@import 'bootstrap.scss';

$form-group: '.form-group';

.my-form-group {
	@extend #{$form-group};
	margin-top: 234px;
}

/*
Once you've run Sass, you will see in your style.css:
*/

.form-group, .my-form-group {
  margin-bottom: 15px; }

/*# sourceMappingURL=bootstrap.css.map */
.my-form-group {
  margin-top: 234px; }

/*
So you'll always use .my-form-group in your actual views/html

When it comes time to remove boostrap, just change $form-group: '.form-group'; to link to your new class name & extend to make any tweaks.

That's it!

Would this actually work on a full-fledged bootstrap setup? I don't know yet. Is it a lot of work to set up the first time? Yes, the first time, but then it should be reusable (and you can build as you go, you don't need to alias every single class in Boostrap.) Will it work with bootstrap classes that extend multiple parent classes? Still to see.

*/