royalsflush/demo.html

## demo.html
<html>
    <head>
        <title>No Reset Grid DEMO</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <style>
            .level1 {
                height: 80px;
                border: 1px solid;
            }

            .level2 {
                padding-top: 10px;
                padding-bottom: 10px;
                height: 60px;
                border: 1px solid;
            }

            .blue {
                background-color: blue;
            }

            .red {
                background-color: red;
            }

            .green {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-5 blue level1">
                    <div class="row">
                        <div class="col-md-3 green level2">3
                        </div>

                        <div class="col-md-2 red level2">2
                        </div>
                    </div>
                </div>
                <div class="col-md-3 blue level1">
                    <div class="row">
                        <div class="col-md-1 green level2">1
                        </div>
                        <div class="col-md-1 red level2">1
                        </div>
                    </div>
                </div>
                <div class="col-md-4 blue level1">
                    <div class="row">
                        <div class="col-md-2 red level2">
                            <div class="row">
                                <div class="col-md-1 blue">1</div>
                                <div class="col-md-1 green">1</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="no_reset_grid.js"></script>
</html>

## no_reset_grid.js
// No reset grid JS
// This bootstrap plugin makes the bootstrap grid not reset when it goes down
// levels - it behaves exactly like the fixed grid in 2.3.2: the column divs
// inside a column div span-x should sum to x, not to 12 as it is in the
// current version.

// Wrong example (sums to 12):
// <div class="col-xs-4">
//     <div class="col-xs-10"></div>
//     <div class="col-xs-2"></div>
// </div>

// Correct example (sums to 4):
// <div class="col-xs-4">
//     <div class="col-xs-2"></div>
//     <div class="col-xs-2"></div>
// </div>

// The reason is that sometimes you want to use a global grid and have
// everything align with it, which is not possible using bootstrap.

// Dependencies: Bootstrap v3, jQuery v? (need to check this).

// Constants for bootstrap.
var bs_num_cols = 12;
var bs_col_types = ['.col-xs-', '.col-sm-', '.col-md-', '.col-lg-'];

// Global variables.
var bs_selector_arr;
var bs_selector_offset_arr;

// Generate cols selector.
// (Description missing).
function genColSelector() {
    var bs_cols = '';

    for (var i=0; i<4; i++) {
        for (var j=0; j<12; j++) {
            if (i || j) bs_cols += ',';
            bs_cols += bs_col_types[i].concat(j+1);
        }
    }

    return bs_cols;
}

// Generate offset selector.
// (Description missing).
function genOffsetSelector() {
    var bs_cols = '';

    for (var i=0; i<4; i++) {
        for (var j=0; j<12; j++) {
            if (i || j) bs_cols += ',';
            bs_cols += bs_col_types[i].concat('offset-' + (j+1));
        }
    }

    console.log(bs_cols);
    return bs_cols;
}

// Filling the bootstrap selector array.
bs_selector_arr = genColSelector();
bs_selector_offset_arr = genOffsetSelector();

// Resize col.
// Description missing.
function resizeCol(element, grid_fraction) {
    // From http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery.

    var class_list = $(element).attr('class').split(/\s+/);
    var col_size = -1;

    for (var i = 0; i < class_list.length; i++)
        if (class_list[i].match(/col-(xs|sm|md|lg)-\d\d?/)) {
            col_size = parseInt(class_list[i].replace( /^\D+/g, ''));
            break;
        }

    n_width = (100*col_size)/grid_fraction;
    $(element).css('width', n_width.toString()+'%');
    return col_size;
}

// Resize margin-left.
// Description missing.
function resizeMarginLeft(element, grid_fraction) {
    var class_list = $(element).attr('class').split(/\s+/);
    var col_size = -1;

    for (var i = 0; i < class_list.length; i++)
        if (class_list[i].match(/col-(xs|sm|md|lg)-offset-\d\d?/)) {
            col_size = parseInt(class_list[i].replace( /^\D+/g, ''));
            break;
        }

    console.log(col_size);
    n_margin = (100*col_size)/grid_fraction;
    $(element).css('margin-left', n_margin.toString()+'%');
}

// Traverse DOM.
// Description missing.
function traverseDOM(element, grid_fraction) {
    if ($(element).is(bs_selector_offset_arr))
        resizeMarginLeft(element, grid_fraction);
    if ($(element).is(bs_selector_arr))
        grid_fraction = resizeCol(element, grid_fraction);

    var children_array = $(element).children();
    for (var i=0; i<children_array.length; i++)
        traverseDOM(children_array[i], grid_fraction);
}

// The tree traversal.
traverseDOM($('body'), 12);
	<html>
	<head>
	<title>No Reset Grid DEMO</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<style>
	.level1 {
	height: 80px;
	border: 1px solid;
	}

	.level2 {
	padding-top: 10px;
	padding-bottom: 10px;
	height: 60px;
	border: 1px solid;
	}

	.blue {
	background-color: blue;
	}

	.red {
	background-color: red;
	}

	.green {
	background-color: green;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-5 blue level1">
	<div class="row">
	<div class="col-md-3 green level2">3
	</div>

	<div class="col-md-2 red level2">2
	</div>
	</div>
	</div>
	<div class="col-md-3 blue level1">
	<div class="row">
	<div class="col-md-1 green level2">1
	</div>
	<div class="col-md-1 red level2">1
	</div>
	</div>
	</div>
	<div class="col-md-4 blue level1">
	<div class="row">
	<div class="col-md-2 red level2">
	<div class="row">
	<div class="col-md-1 blue">1</div>
	<div class="col-md-1 green">1</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="no_reset_grid.js"></script>
	</html>
	// No reset grid JS
	// This bootstrap plugin makes the bootstrap grid not reset when it goes down
	// levels - it behaves exactly like the fixed grid in 2.3.2: the column divs
	// inside a column div span-x should sum to x, not to 12 as it is in the
	// current version.

	// Wrong example (sums to 12):
	// <div class="col-xs-4">
	// <div class="col-xs-10"></div>
	// <div class="col-xs-2"></div>
	// </div>

	// Correct example (sums to 4):
	// <div class="col-xs-4">
	// <div class="col-xs-2"></div>
	// <div class="col-xs-2"></div>
	// </div>

	// The reason is that sometimes you want to use a global grid and have
	// everything align with it, which is not possible using bootstrap.

	// Dependencies: Bootstrap v3, jQuery v? (need to check this).

	// Constants for bootstrap.
	var bs_num_cols = 12;
	var bs_col_types = ['.col-xs-', '.col-sm-', '.col-md-', '.col-lg-'];

	// Global variables.
	var bs_selector_arr;
	var bs_selector_offset_arr;

	// Generate cols selector.
	// (Description missing).
	function genColSelector() {
	var bs_cols = '';

	for (var i=0; i<4; i++) {
	for (var j=0; j<12; j++) {
	if (i \|\| j) bs_cols += ',';
	bs_cols += bs_col_types[i].concat(j+1);
	}
	}

	return bs_cols;
	}

	// Generate offset selector.
	// (Description missing).
	function genOffsetSelector() {
	var bs_cols = '';

	for (var i=0; i<4; i++) {
	for (var j=0; j<12; j++) {
	if (i \|\| j) bs_cols += ',';
	bs_cols += bs_col_types[i].concat('offset-' + (j+1));
	}
	}

	console.log(bs_cols);
	return bs_cols;
	}

	// Filling the bootstrap selector array.
	bs_selector_arr = genColSelector();
	bs_selector_offset_arr = genOffsetSelector();

	// Resize col.
	// Description missing.
	function resizeCol(element, grid_fraction) {
	// From http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery.

	var class_list = $(element).attr('class').split(/\s+/);
	var col_size = -1;

	for (var i = 0; i < class_list.length; i++)
	if (class_list[i].match(/col-(xs\|sm\|md\|lg)-\d\d?/)) {
	col_size = parseInt(class_list[i].replace( /^\D+/g, ''));
	break;
	}

	n_width = (100*col_size)/grid_fraction;
	$(element).css('width', n_width.toString()+'%');
	return col_size;
	}

	// Resize margin-left.
	// Description missing.
	function resizeMarginLeft(element, grid_fraction) {
	var class_list = $(element).attr('class').split(/\s+/);
	var col_size = -1;

	for (var i = 0; i < class_list.length; i++)
	if (class_list[i].match(/col-(xs\|sm\|md\|lg)-offset-\d\d?/)) {
	col_size = parseInt(class_list[i].replace( /^\D+/g, ''));
	break;
	}

	console.log(col_size);
	n_margin = (100*col_size)/grid_fraction;
	$(element).css('margin-left', n_margin.toString()+'%');
	}

	// Traverse DOM.
	// Description missing.
	function traverseDOM(element, grid_fraction) {
	if ($(element).is(bs_selector_offset_arr))
	resizeMarginLeft(element, grid_fraction);
	if ($(element).is(bs_selector_arr))
	grid_fraction = resizeCol(element, grid_fraction);

	var children_array = $(element).children();
	for (var i=0; i<children_array.length; i++)
	traverseDOM(children_array[i], grid_fraction);
	}

	// The tree traversal.
	traverseDOM($('body'), 12);