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.
# 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.
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: