Bootstrap 3 is not officially released yet, but you can download the latest code from https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip. You could also compile the docs to check for differences, see: Compile Twitter bootstrap 3 docs (How to)?.
Bootstrap 3 RC1 has been release now.
Twitter's Bootstrap 3 will not be backwards compatible with version 2 so migration will always be painful in some way.
Twitter's Bootstrap 3 will have a fluid grid (by default) so it will help to build your version 2 templates with a fluid layout too.
Other important changes are:
- TB3 will be mobile first
- No support for IE7 and Firefox 3.x
- No separate responsive CSS file.
Read also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
I like your idea of making a mixin for migration. Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
Twitter’s Bootstrap 2 defines breakpoints at 480px, 768px, 980px and 1200px. The layout will always be fluid below 768px.
For this reason the 'old' span* will not be the same as col-* or col-lg-*. So replacing the class names in your templates will be give you better results. But when looking to an example like http://examples.getbootstrap.com/jumbotron/index.html you will find the the col-lg-* class in place of the former span* class. This will give you a possibility to create a mixin for span* with the same styles as col-lg-* in this case.
Responsive features
When you start migrate you also have to decide to use the responsive features or not. Bootstrap 3 don't have a separate responsive CSS file any more.
No responive features
Who don't want to have the responive features has to use the “.col-” prefix for your row classes. This grid will never stack. You also will have to set the grid-float-breakpoint to 0. When using Less the @grid-float-breakpoint will be defined in variables.less. Keep in mind other parts like forms and modals also use the @grid-float-breakpoint. See also: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
With responive features
In most cases you will use the responsive features. When migration you have to choose between the “.col-sm-” and “.col-lg-” to replace your old “span“ prefixes. The “col-lg-” as told above will give you most likely the same behavior as before. “col-lg-” will stack below the 768px. Also in this case consider the grid-float-breakpoint. The grid-float-breakpoint is 768px by default.
Note: at the moment TB2.3.2. has been replaced with Bootstrap 3 RC1 on the main site. So consider to start with TB3 from start. See also http://examples.getbootstrap.com/grid/ for more examples of the grids.
Related questions and more:
Also read this https://stackoverflow.com/a/17977432/1596547 answer from @skelly it provide two useful links:
http://bootply.com/bootstrap-3-migration-guide
A Bootstrap migration tool in the works: https://github.com/iatek/bootstrap-migrate
