WaterOnMars now runs on Bootstrap3

wom-logo-128When 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)

Beware: these expressions caused a fair number of false positive, this was perfectly ok in my small code base, but it would be wise not to convert them to, say, sed commands too quickly.

In the end, the only things that were non-trivial to fix were the ones in the “sieve” view that I had hacked around tbootstrap_logohe “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:

wom_navbar_old

navbar_wom