This is a simple and clean bootstrap framework to help you kickstart your web application in minutes.

It features a simple and intuitive semantic grid system, designed for both fixed and fluid layouts. It offers support for column substitution (more on that below) and responsive designs, all to help you create a basic layout in no time. A collection of components come in handy when you need to add buttons and forms. And, because it's a LESS framework, all of this is combined and compiled into one single .css file.

The framework is divided into logical parts separated by scope:

/css
	/grid
		system.less
		structure-large.less
		structure-normal.less
		structure-netbook.less
		structure-tablet.less
		structure-mobile.less
	/styles
		/buttons
			generic-buttons.less
			super-awesome.less
		/forms
			default.less
		/typography
			google-webfonts.less
			styles.less
		/layout
			default.less
	/utils
		/reset
			yui.less
            h5bp-normalize.less
            h5bp-main.less
            vanilla-css.less
		/variables
			colors.less
			dimensions.less
			images.less
		/mixins
			common.less
			helpers.less
	merged.less
/js
	/ie
		html5.js
		ie9.js
	/jquery
index.html

Too much? You'll see how very simple it actually is. Let's get into it!

Thanks to LESS and inspired by semantic.gs, the grid engine lets you draw your grid layout without adding .spanX or .grid_Y classes to your markup. It comes with mixins to easily define sections, wrappers, columns and blocks of content directly inside your LESS declarations.

<div id="wrapper">
	<header>
		...
	</header>
	<article>
		<h1>...</h1>
		<p>...</p>
	</article>
	<aside>
		<div id="archive">...</div>
		<div class="banner">...</div>
	</aside>
	<footer>
		...
	</footer>
</div>

... and the LESS declarations

@gridLayoutWidth:	960px;
@gridGutter:		20px;
@gridColumns:		12;

#wrapper {
	.gridWrapper();
}
header {
	.gridColumn(12);
}
article {
	.gridColumn(9);

	h1, p {
		.gridBox(9);
	}
}
aside {
	.gridColumn(3, right);

	#archive, .banner {
		.gridBox(3);
	}
}
footer {
	.gridColumn(12);
}

Clean markup and intuitive declarations.

Sometimes, a design needs to break from the overall layout. For example, we have a 9 columns <article> on the left and a 3 columns <aside> floated to the right. But inside the <article> we have a section that need to be separated in half. Of course, on the standard grid system we cannot do that, unless we change the grid to 24 columns, with a much smaller column size. But that means we have to rewrite all the other declarations we have so far. Which is dumb! The column substitution engine does exactly that. And it's very easy too. We just have to define a normal .gridBox() (that spans across grid columns), but with a different width ratio.

<article>
	<h1>...</h1>
	<p>...</p>

	<div id="comments">...</div>
	<div id="related">...</div>
</article>

And the grid declarations:

article {
	.gridColumn(9);

	h1, p {
		.gridBox(9);
	}

	#comments, #related {
		.gridBox(1, @columns, left, 2/9);
	}
}

Here, the ratio is 2/9, meaning that for the #comments and #related we transform the 9 columns of the <article> into just 2. Each of these two boxes span across one of this new columns. The @columns parameter is a reference number used in the calculations of the new columns width. For fixed layouts, this is always the number of columns of the full grid (here 12), whereas for fluid layouts (because of nested percentages) we have to send the number of columns of the containing element. Like so:

article {
	@columns: 9

	.gridColumn(@columns);

	h1, p {
		.gridBox(@columns);
	}

	#comments, #related {
		.gridBox(1, @columns, left, 2/9);
	}
}