Custom layout width for blueprint based layouts

jQuery-Blueprint.js

// custom layout width for blueprint based layouts
// Original:    http://www.consulenza-web.com/progetti/jquery_blueprint/


// from http://james.padolsey.com/javascript/regex-selector-for-jquery/
jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}


/*
 	http://www.consulenza-web.com/progetti/jquery_blueprint/
	Set your custom layout width with easy on blueprint based layout!

*/
(function($) {
	$.fn.bluePrint = function() {	
		return $( this ).each( fnBluePrintInit );
};

function fnBluePrintInit() {
	var $this = $(this);
	// It obtain container width.
	var w = $this.width();
	// It calculate width proportion relative to blueprint's standard width.
	var p = Math.round( w*100/950 )/100;
	// It calucate column's width and margin.
	var b = Math.floor( 40*p );
	var c = Math.floor( 30*p );
	var m = b-c;
	
	
	// It sets up grid's columns
	for ( i=1; i<=24; i++ ) {
		colW = ( c*i+m*i-m );
		colM = m;
		
		// Setup grid's general column class.
		$this.find( '.span-'+i ).addClass( 'column' );
		
		// Setup column's width and margin.
		$this.find('.span-'+i).css({
			width: colW,
			marginRight: colM
		});
		
		// Fix last column margin.
		$this.find('.last').css({
			marginRight: 0
		});
		
		if ( i < 23 ) {
			// Setup append class.
			$this.find('.append-'+i).css({
				paddingRight: b*i
			});
			
			// Setup prepend class.
			$this.find('.prepend-'+i).css({
				paddingLeft: b*i
			});
		}
		
		// Setup pull class.
		$this.find('.pull-'+i).css({
			marginLeft: 0-b*i
		});
		
		// Setup push class.
		$this.find('.push-'+i).css({
			marginLeft: b*i,
			marginRight: 0-b*i
		});
		
		// Fix border class.
		$this.find('.border').css({
			paddingRight: Math.floor(4*p),
			marginRight: Math.floor(5*p)
		});
		$this.find('.colborder').css({
			paddingRight: Math.floor(24*p),
			marginRight: Math.floor(25*p)
		});
		
		// Html - debug purpose
		$this.find('.span-'+i).each(function(){
			$(this).html( $(this).attr('class') );
		});
	} // End "for" --
	
	
	/**
	 * Showgrid management
	 * It generate column's background dynamically by appending span under the container.
	 */
	if ( $(this).is('.showgrid') ) {
		$(this).css('background-image','none');
		
		if ( $(this).parent().is('.container-wrapper') == false ) {
				
			$(this).wrap('<div class="container-wrapper"></div>');
			var wrap = $(this).parent();
		
			$(this).before('<div class="container-showgrid"></div>');
			var grid = wrap.find('.container-showgrid');
		
			for(i=0;i<=23;i++){ grid.append('<span>&nbsp;</span>'); }
		
		} else {
			var wrap = $(this).parent();
			grid = wrap.find('.container-showgrid');
		}
		
		$(this).css({
			position:'absolute',
			top:0,
			left:0
		});
			
		wrap.css({
			display:'block',
			width:$(this).width(),
			height:$(this).height(),
			position:'relative',
			margin:'auto'
		});
		
		grid.css({
			display:'block',
			width:$(this).width(),
			height:$(this).height(),
			overflow:'hidden',
			position:'absolute',
			top:0,
			left:0
			
		}).fadeTo('slow',0.3);
		
		grid.find('span').css({
			display:'block',
			height: $(this).height(),
			width:c,
			marginRight:m,
			float:'left',
			backgroundColor:'#a7dfff'
		});
		
		grid.find('span:last').css({
			margin:0
		});
	}	
}
})(jQuery);