royalsflush/demo.html

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

            .level2 {
                margin-top: 10px;
                margin-bottom: 10px;
                height: 60px;
            }

            .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="l2-col-3 green level2">
                        </div>

                        <div class="l2-col-2 green level2">
                        </div>
                    </div>
                </div>
                <div class="col-md-3 blue level1"></div>
                <div class="col-md-4 blue level1"></div>
            </div>
        </div>
    </body>
</html>

## two_level_grid.scss
// Two Level Grid SCSS
// SCSS script to make a grid that doesn't depend on the parent element, but on
// the container element. After it, it uses bootstrap's standard 12 column grid.

$num_cols: 12;
$gutter_width: 30px;

// Algorithm details:
// parent_width = $p*(100./12), in percentage related to the container width.
// child_width has to be $c*(100./12), again related to container width. We need
// to put child_width in terms of parent_width percentage.

// parent_width = $p*(100./12)*CONTAINER_WIDTH;
// (12*parent_width)/($p*100) = CONTAINER_WIDTH;

// child_width = $c*(100./12)*CONTAINER_WIDTH;
// child_width = $c*(100./12)*(12*parent_width)/($p*100);
// child_width = ($c/$p)*parent_width;


@for $p from 1 through $num_cols {
    .l2-col-#{$p} {
        padding-left: $gutter-width/2;
        padding-right: $gutter-width/2;
        float: left;
    }
}

@for $p from 1 through $num_cols {
    @for $c from 1 through $p {
        .col-sm-#{$p} .l2-col-#{$c} {
            width: 100% * ($c/$p);
        }

        .col-md-#{$p} .l2-col-#{$c} {
            width: 100% * ($c/$p);
        }

        .col-xs-#{$p} .l2-col-#{$c} {
            width: 100% * ($c/$p);
        }

        .col-lg-#{$p} .l2-col-#{$c} {
            width: 100% * ($c/$p);
        }
    }
}
	<html>
	<head>
	<title>Two Level Grid DEMO</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<link rel="stylesheet" href="two_level_grid.css">
	<style>
	.level1 {
	height: 80px;
	}

	.level2 {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 60px;
	}

	.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="l2-col-3 green level2">
	</div>

	<div class="l2-col-2 green level2">
	</div>
	</div>
	</div>
	<div class="col-md-3 blue level1"></div>
	<div class="col-md-4 blue level1"></div>
	</div>
	</div>
	</body>
	</html>
	// Two Level Grid SCSS
	// SCSS script to make a grid that doesn't depend on the parent element, but on
	// the container element. After it, it uses bootstrap's standard 12 column grid.

	$num_cols: 12;
	$gutter_width: 30px;

	// Algorithm details:
	// parent_width = $p*(100./12), in percentage related to the container width.
	// child_width has to be $c*(100./12), again related to container width. We need
	// to put child_width in terms of parent_width percentage.

	// parent_width = $p(100./12)CONTAINER_WIDTH;
	// (12parent_width)/($p100) = CONTAINER_WIDTH;

	// child_width = $c(100./12)CONTAINER_WIDTH;
	// child_width = $c(100./12)(12parent_width)/($p100);
	// child_width = ($c/$p)*parent_width;


	@for $p from 1 through $num_cols {
	.l2-col-#{$p} {
	padding-left: $gutter-width/2;
	padding-right: $gutter-width/2;
	float: left;
	}
	}

	@for $p from 1 through $num_cols {
	@for $c from 1 through $p {
	.col-sm-#{$p} .l2-col-#{$c} {
	width: 100% * ($c/$p);
	}

	.col-md-#{$p} .l2-col-#{$c} {
	width: 100% * ($c/$p);
	}

	.col-xs-#{$p} .l2-col-#{$c} {
	width: 100% * ($c/$p);
	}

	.col-lg-#{$p} .l2-col-#{$c} {
	width: 100% * ($c/$p);
	}
	}
	}