When I started developing
WaterOnMars, the fashionable toolkit for web GUI work was
the version 2 of Twitter Bootstrap. Of course, by the time
my project reached a truly usable state, the version 3 of bootstrap was released and the version 2 stopped being maintained. Another example of the perpetual obsolescence developers have had to face since the dawn of time (e.g the 70's).
Version 3's major feature being its first class support for mobile platform and my main usage of WaterOnMars being via a tablet, migrating was really tempting but I had no idea how much work I'd have to put into it.
I did it a few weeks a go though and the good news was that it's been much much easier that I thought.
Thanks to
the Bootstrap's migration page I could put up the following regular expressions to help me find out the code that needed to be changed in the CSS, Javascript and Django template files.
# Changed/Renamed
.(row-fluid|span|offset|brand|nav-collapse|nav-toggle|btn-navbar|hero-unit|icon-|btn|btn-mini|btn-small|btn-large|alert-error|visible-phone|visible-tablet|visible-desktop|hidden-phone|hidden-tablet|hidden-desktop|input-block-level|control-group|control-group|checkbox inline|radio inline|input-prepend|input-append|add-on|img-polaroid|unstyled|inline|muted|label|label-important|text-error|table error|bar|bar-|accordion|accordion-group|accordion-heading|accordion-body|accordion-inner)
# New and updated
.(panel|panel-default|panel-body|panel-title|panel-heading|panel-footer|panel-collapse|list-group|list-group-item|list-group-item-text|list-group-item-heading|glyphicon|jumbotron|col-xs-|col-sm-|col-md-|col-lg-|visible-lg|hidden-lg|col-sm-offset-|col-md-offset-|col-lg-offset-|col-sm-push-|col-md-push-|col-lg-push-|col-sm-pull-|col-md-pull-|col-lg-pull-|input-sm|input-lg|input-group|input-group-addon|input-group-btn|form-control|form-group|btn-group-xs|btn-group-sm|btn-group-lg|navbar-text|navbar-header|nav-justified|img-responsive|success|danger|warning|active|info|panel-success|panel-danger|panel-warning|panel-info|modal-dialog|modal-content|img-thumbnail|well-sm|well-lg|alert-link)
# Removed
.(form-actions|form-search|control-group info|input-mini|input-small|input-medium|input-large|input-xlarge|input-xxlarge|input-block-level|btn-inverse|row-fluid|controls|controls-row|navbar-inner|navbar divider-vertical|dropdown-submenu|tabs-left|tabs-right|tabs-below|pill-content|pill-pane|nav-list|nav-header|help-inline)
In the end, the only things that were non-trivial to fix were the ones in the "sieve" view that I had hacked around t
he "collapse" and "carousel" components. But even there, changes ended up being quite simple and mostly related to the change of naming convention for javascript events, which were actually quite well documented in Bootstrap's doc.
So thanks to bootstrap's devs to make my life simpler (again) and all the more since this migration solved a strange bug on my phone (a modal that was appearing/disappearing in half a second without letting me the chance to click on anything in it).
This even let me some time to rework the navigation bar, to make it a little more compliant (I think) with the "spirit" of this component in Twitter bootstrap and to make its look a tad leaner:
