Menu
How would you write a new application using bootstrap 2.3.2 if you wanted to make the upgrade path as painless as possible?
For example, i know that span- and col- classes are going away, so i would create a custom less class for each of those classes that has a mixin of that definition, or create a macro in my templating language to output the class name instead of using it directly.
Also, is there a bootstrap 3 migration guide? I couldnt find one.
So, what steps would you take to ease the upgrade?
521
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:
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.
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.
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
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
