Simply easy Grid System using the same brain as ScrathFramework. http://github.com/tuxlinski/ScrathFramework

gistfile1.css

/* 
	Debugger 
	-- Uncoment this lines for layout Debug
		Debuging code is very important

 */
.container, .container-rwd  { outline: 1px solid #ff00ff; }
.row { outline: 2px solid #0000ff; }
.block1, .block2, .block3, .block2-2 { outline: 2px solid #ffff00; }

.header, .footer { outline: 2px solid #00ff00; }
.nav ul.menu { outline: 2px solid #006400; }
.nav ul.menu > li  { outline: 5px solid #FF7F00; }



/* 
	Reset 
	-- Clear all default brower alignments
*/
* {
	margin: 0;
	padding: 0;
}



/* 
	Simply Grid system
	-- 3 column grid system
*/
/* ======================================================================================== */


/* Basic container for non-responsive layouts */
.container { 
	width: 1028px; 
	height: auto; 
	min-height: 30px; 
	margin: 0 auto; 
	position: relative; 
}

/* Basic container for responsive layouts */
.container-rwd {
	width: 100%; 
	height: auto; 
	min-height: 30px; 
	margin: 0 auto; 
	position: relative; 
}

/* ======================================================================================== */

/*
	ROW
	-- A line to use blocks[*]
	Use in Responsive and Non-Responsive
*/
.row { 
	width: 100%; 
	height: auto; 
	min-height: 30px; 
}

/* ======================================================================================== */

/*
	Block[*]
	-- Create blocks with 3 different type of sizes
*/

/* Responsive Blocks, using Mobile First */
.container-rwd .block1,
.container-rwd .block2,
.container-rwd .block2-2,
.container-rwd .block3 {
	width: 100%; 
	min-height: 30px; 
	display: inline-block; 
	vertical-align: top;
}

/* NON-Responsive Blocks, for fixed websites */
.container .block1 { 
	width: 293px; 
	min-height: 30px; 
	display: inline-block; 
	vertical-align: top;
}

.container .block2 { 
	width: 660px; 
	min-height: 30px; 
	display: inline-block; 
	vertical-align: top;
}

.container .block3 { 
	width: 1028px; 
	min-height: 30px; 
	display: inline-block; 
	vertical-align: top;
}

.container .block2-2 {
	width: 477px; 
	min-height: 30px; 
	display: inline-block; 
	vertical-align: top;
}

/* ======================================================================================== */

/*
	Block[*]:nth-child([*]n+[*])
	-- Generate spacing between Blocks[*]
*/
.container .block1:nth-child(1n+2), 
.container .block2-2:nth-child(1n+2), 
.container .block2:nth-child(2n+2) { 
	margin-left: 70px; 
}



/* 
	Begin a new Block for nesting 
	-- MUST use when you begin a new block to reset the spacing between blocks!
*/
.container .begin  { 
	margin-left: 0 !important; 
}

/* ======================================================================================== */

/* Media Queries for Responsive Web Design */
@media(min-width: 48em) {
	/* 
	
		Only one Break-point was needed for this grid system.
	
	*/
	.container-rwd .block1 {
		width: 29.666666%; 
	}
	.container-rwd .block2 {
		width: 64.788888%; 
	}
	.container-rwd .block2-2 {
		width: 47.222222%; 
	}
	.container-rwd .block3 {
		width: 100%; 
	}
	
	/* Spacing between blocks */
	.container-rwd .block1:nth-child(1n+2), 
	.container-rwd .block2-2:nth-child(1n+2), 
	.container-rwd .block2:nth-child(2n+2) { 
		margin-left: 5.12233%; 
	}
}

/* ======================================================================================== */
/*

	TRICK !!!
	Little hack to work perfect on any device :)

*/
@media(max-width: 65.938em) and (min-width: 48em) {

	.container-rwd .block1:nth-child(1n+2), 
	.container-rwd .block2-2:nth-child(1n+2), 
	.container-rwd .block2:nth-child(2n+2) { 
		margin-left: 4.88888%; 
	}
}


/* ======================================================================================== */
/* 
	Base CSS System 
	-- Basic CSS system for default base html alignments
*/
/* 
	Font Smoothing 
	-- Only works on recent web browsers who uses WebKit enginee.
		Theres a fallback hack with text-shadow
*/
html, 
html a { 
	-webkit-font-smoothing: antialiased; 
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
}




/* 
	Basic component for HEADER and FOOTER 
	-- To create a Header and Footer easily
*/
.header, 
.footer { 
	width: 100%; 
	height: auto; 
	min-height: 30px; 
	position: relative; 
}




/* 
	Image height alignment
	-- Aligmnet for images to middle, top and Baseline(Default)
*/
img.top-image { /* Align images to top height */
	vertical-align: top; 
} 

img.middle-image { /* Align images to middle height */
	vertical-align: middle; 
} 

img.base-image { /* Align images to baseline */
	vertical-align: baseline; 
} 




/* 
	Text alignment 
	-- Simply aligment for texts everywhere, independent tag
*/
.txt-left { /* Align text to left */
	text-align: left !important;
} 

.txt-right { /* Align text to Right */
	text-align: right !important;
}
 
.txt-justify { /* Align text Justify */
	text-align: justify !important;
} 




/*
	Simply inline menu 
	-- Create a nav menu using <ul> list simply and easy with 25px default space between menu itens
*/
.nav ul.menu > li { 
	display: inline-block; 
}

.nav ul.menu > li:nth-child(1n+2) { 
	margin-left: 25px; 
}

.nav ul.menu > li a { 
	text-decoration: none; 
}