How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Question

I am working on a Rails project that is just starting. We want to use twitter bootstrap as a base for our styles, at the beginning we would simply use bootstrap\'s class names d

Answer 1

When you rename .btn to .button, you also should rename .form-search to .form-searchnew etc? In that case your sass code in the example above should be something like:

.form-searchnew .input-appendnew .button {
  extend(.form-search .input-append .btn);
}

Which make sense (i don't know sass) and results in the css you expect.

I think bootstrap is not about css only. Bootstrap is about css, html(structure) and javascript. Even when you separate css from html i would not easy to migrate to an other framework. Beside the css you will have to change the html structure and javascript call too.

Example migrate from Twitter's Bootstrap 2 to 3 (see: Updating Bootstrap to version 3 - what do I have to do?). I also wondered if you could migrate by extending the old classes to the new css (see: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/). After reading the migration guide, i think you couldn't.

Other solutions. Angular JS decouples Twitter's Bootstrap from javascript. Also in this case migrations does not seem to be painless see: Angular Dialog directives with Bootstrap 3

Maybe also read this post: http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to. It refers to Bourdon and Neat.

Example from their website:

  
What is it about?
  
Neat is an open source semantic grid framework built on top of Sass and Bourbon…


// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

As they say: "it relies entirely on Sass mixins and does not pollute your HTML" which seems the way you're looking for.