jQuery: automatic Bootstrap CSS classes

The major problem with Bootstrap is the number of its CSS classes. Manually adding those classes to the HTML elements of our pages is really expensive in terms of time. Further, such classes make our HTML semantics really troublesome to be handled over the entire life span of a web project. Fortunately, we can use jQuery to mitigate the side effects of this extended use of CSS classes.

We can create the following plugin to automate the process of adding Bootstrap classes:

(function($) {
	$.fn.bootstrapper = function(options) {
	
	    var settings = {
	    	span: 1,
	    	role: 'row'
	    };
	    
	    
	    options = $.extend(settings, options);
		
		return this.each(function() {
			var element = $(this);
			var cls = '';
			switch(options.role) {
				case 'row':
					cls = 'row-fluid';
					break;
				case 'span':
					cls = 'span' + options.span.toString();
					break;
				default:
					cls = 'span' + options.span.toString();
					break;
					
			}
			
			element.addClass(cls);
		});
	};

})(jQuery);

You can further extend this base plugin to add more classes, for example those related to the UI or other application components. Some examples:

$(function() {
	$('#content, #site-info, #additional-info, #sub-site-info').bootstrapper();
	$('#main, #content-sub').bootstrapper({role: 'span', span: 6});
	$('.info', '#site-info').bootstrapper({role: 'span', span: 3});
	$('.info', '#additional-info').bootstrapper({role: 'span', span: 6});
	
	// cell span calculations
	
	var subinfo = $('.info', '#sub-site-info');
	var items = subinfo.length;
	// 12 is the total number of available grid cells
	var span = 12 / items;
	subinfo.bootstrapper({role: 'span', span: span});
});

[view-example url="http://cdpn.io/uhqrd"]