adamwintle · December 31, 2011 06:20
diff --git a/percentage_grid.css b/percentage_grid.css
 /*

 How I would approach a fluid grid:

 [1] Let the name reflect the % width,
     eliminating "1 of 12" guesswork.

 [2] Also, put 10px of padding to either
     side, to stack and make a 20px gutter.

 [3] Make the box-sizing = border-box, so that
     50% + 20px total side padding = 50%, etc.

 [5] Have a class of "is_parent" to kill off
     the padding on units with nested children.

 [*] Note: Because the gutters are done via padding,
     this means there's no prefix_XX or suffix_XX.
 */

 /*  !Container */

 .container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 1200px;
 }

 /* !Clear floated elements. */

 /* http://sonspring.com/journal/clearing-floats */

 .clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
 }

 /*  http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

 .clearfix:before,
 .clearfix:after,
 .container:before,
 .container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
 }

 .clearfix:after,
 .container:after {
  clear: both;
 }

 /* !Percentage based widths. */

 .width_5,
 .width_10,
 .width_15,
 .width_20,
 .width_25,
 .width_30,
 .width_33,
 .width_35,
 .width_40,
 .width_45,
 .width_50,
 .width_55,
 .width_60,
 .width_65,
 .width_66,
 .width_70,
 .width_75,
 .width_80,
 .width_85,
 .width_90,
 .width_95,
 .width_100 {
  box-sizing: border-box;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
 }

 .is_parent {
  padding-left: 0;
  padding-right: 0;
 }

 .width_5 {
  width: 5%;
 }

 .width_10 {
  width: 10%;
 }

 .width_15 {
  width: 15%;
 }

 .width_20 {
  width: 20%;
 }

 .width_25 {
  width: 25%;
 }

 .width_30 {
  width: 30%;
 }

 .width_33 {
  width: 33.33333%;
 }

 .width_35 {
  width: 35%;
 }

 .width_40 {
  width: 40%;
 }

 .width_45 {
  width: 45%;
 }

 .width_50 {
  width: 50%;
 }

 .width_55 {
  width: 55%;
 }

 .width_60 {
  width: 60%;
 }

 .width_65 {
  width: 65%;
 }

 .width_66 {
  width: 66.66666%;
 }

 .width_70 {
  width: 70%;
 }

 .width_75 {
  width: 75%;
 }

 .width_80 {
  width: 80%;
 }

 .width_85 {
  width: 85%;
 }

 .width_90 {
  width: 90%;
 }

 .width_95 {
  width: 95%;
 }

 .width_100 {
  width: 100%;
 }

 /* Push & Pull, to rearrange column order (for potential "SEO"). */

 .push_5,
 .push_10,
 .push_15,
 .push_20,
 .push_25,
 .push_30,
 .push_33,
 .push_35,
 .push_40,
 .push_45,
 .push_50,
 .push_55,
 .push_60,
 .push_65,
 .push_66,
 .push_70,
 .push_75,
 .push_80,
 .push_85,
 .push_90,
 .push_95,
 .pull_5,
 .pull_10,
 .pull_15,
 .pull_20,
 .pull_25,
 .pull_30,
 .pull_33,
 .pull_35,
 .pull_40,
 .pull_45,
 .pull_50,
 .pull_55,
 .pull_60,
 .pull_65,
 .pull_66,
 .pull_70,
 .pull_75,
 .pull_80,
 .pull_85,
 .pull_90,
 .pull_95 {
  position: relative;
 }

 /* !Push: */

 .push_5 {
  left: 5%;
 }

 .push_10 {
  left: 10%;
 }

 .push_15 {
  left: 15%;
 }

 .push_20 {
  left: 20%;
 }

 .push_25 {
  left: 25%;
 }

 .push_30 {
  left: 30%;
 }

 .push_33 {
  left: 33.33333%;
 }

 .push_35 {
  left: 35%;
 }

 .push_40 {
  left: 40%;
 }

 .push_45 {
  left: 45%;
 }

 .push_50 {
  left: 50%;
 }

 .push_55 {
  left: 55%;
 }

 .push_60 {
  left: 60%;
 }

 .push_65 {
  left: 65%;
 }

 .push_66 {
  left: 66.66666%;
 }

 .push_70 {
  left: 70%;
 }

 .push_75 {
  left: 75%;
 }

 .push_80 {
  left: 80%;
 }

 .push_85 {
  left: 85%;
 }

 .push_90 {
  left: 90%;
 }

 .push_95 {
  left: 95%;
 }

 /* !Pull: */

 .pull_5 {
  left: -5%;
 }

 .pull_10 {
  left: -10%;
 }

 .pull_15 {
  left: -15%;
 }

 .pull_20 {
  left: -20%;
 }

 .pull_25 {
  left: -25%;
 }

 .pull_30 {
  left: -30%;
 }

 .pull_33 {
  left: -33.33333%;
 }

 .pull_35 {
  left: -35%;
 }

 .pull_40 {
  left: -40%;
 }

 .pull_45 {
  left: -45%;
 }

 .pull_50 {
  left: -50%;
 }

 .pull_55 {
  left: -55%;
 }

 .pull_60 {
  left: -60%;
 }

 .pull_65 {
  left: -65%;
 }

 .pull_66 {
  left: -66.66666%;
 }

 .pull_70 {
  left: -70%;
 }

 .pull_75 {
  left: -75%;
 }

 .pull_80 {
  left: -80%;
 }

 .pull_85 {
  left: -85%;
 }

 .pull_90 {
  left: -90%;
 }

 .pull_95 {
  left: -95%;
 }
	/*

	How I would approach a fluid grid:

	[1] Let the name reflect the % width,
	eliminating "1 of 12" guesswork.

	[2] Also, put 10px of padding to either
	side, to stack and make a 20px gutter.

	[3] Make the box-sizing = border-box, so that
	50% + 20px total side padding = 50%, etc.

	[5] Have a class of "is_parent" to kill off
	the padding on units with nested children.

	[*] Note: Because the gutters are done via padding,
	this means there's no prefix_XX or suffix_XX.
	*/

	/* !Container */

	.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1200px;
	}

	/* !Clear floated elements. */

	/* http://sonspring.com/journal/clearing-floats */

	.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}

	/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

	.clearfix:before,
	.clearfix:after,
	.container:before,
	.container:after {
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
	}

	.clearfix:after,
	.container:after {
	clear: both;
	}

	/* !Percentage based widths. */

	.width_5,
	.width_10,
	.width_15,
	.width_20,
	.width_25,
	.width_30,
	.width_33,
	.width_35,
	.width_40,
	.width_45,
	.width_50,
	.width_55,
	.width_60,
	.width_65,
	.width_66,
	.width_70,
	.width_75,
	.width_80,
	.width_85,
	.width_90,
	.width_95,
	.width_100 {
	box-sizing: border-box;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	}

	.is_parent {
	padding-left: 0;
	padding-right: 0;
	}

	.width_5 {
	width: 5%;
	}

	.width_10 {
	width: 10%;
	}

	.width_15 {
	width: 15%;
	}

	.width_20 {
	width: 20%;
	}

	.width_25 {
	width: 25%;
	}

	.width_30 {
	width: 30%;
	}

	.width_33 {
	width: 33.33333%;
	}

	.width_35 {
	width: 35%;
	}

	.width_40 {
	width: 40%;
	}

	.width_45 {
	width: 45%;
	}

	.width_50 {
	width: 50%;
	}

	.width_55 {
	width: 55%;
	}

	.width_60 {
	width: 60%;
	}

	.width_65 {
	width: 65%;
	}

	.width_66 {
	width: 66.66666%;
	}

	.width_70 {
	width: 70%;
	}

	.width_75 {
	width: 75%;
	}

	.width_80 {
	width: 80%;
	}

	.width_85 {
	width: 85%;
	}

	.width_90 {
	width: 90%;
	}

	.width_95 {
	width: 95%;
	}

	.width_100 {
	width: 100%;
	}

	/* Push & Pull, to rearrange column order (for potential "SEO"). */

	.push_5,
	.push_10,
	.push_15,
	.push_20,
	.push_25,
	.push_30,
	.push_33,
	.push_35,
	.push_40,
	.push_45,
	.push_50,
	.push_55,
	.push_60,
	.push_65,
	.push_66,
	.push_70,
	.push_75,
	.push_80,
	.push_85,
	.push_90,
	.push_95,
	.pull_5,
	.pull_10,
	.pull_15,
	.pull_20,
	.pull_25,
	.pull_30,
	.pull_33,
	.pull_35,
	.pull_40,
	.pull_45,
	.pull_50,
	.pull_55,
	.pull_60,
	.pull_65,
	.pull_66,
	.pull_70,
	.pull_75,
	.pull_80,
	.pull_85,
	.pull_90,
	.pull_95 {
	position: relative;
	}

	/* !Push: */

	.push_5 {
	left: 5%;
	}

	.push_10 {
	left: 10%;
	}

	.push_15 {
	left: 15%;
	}

	.push_20 {
	left: 20%;
	}

	.push_25 {
	left: 25%;
	}

	.push_30 {
	left: 30%;
	}

	.push_33 {
	left: 33.33333%;
	}

	.push_35 {
	left: 35%;
	}

	.push_40 {
	left: 40%;
	}

	.push_45 {
	left: 45%;
	}

	.push_50 {
	left: 50%;
	}

	.push_55 {
	left: 55%;
	}

	.push_60 {
	left: 60%;
	}

	.push_65 {
	left: 65%;
	}

	.push_66 {
	left: 66.66666%;
	}

	.push_70 {
	left: 70%;
	}

	.push_75 {
	left: 75%;
	}

	.push_80 {
	left: 80%;
	}

	.push_85 {
	left: 85%;
	}

	.push_90 {
	left: 90%;
	}

	.push_95 {
	left: 95%;
	}

	/* !Pull: */

	.pull_5 {
	left: -5%;
	}

	.pull_10 {
	left: -10%;
	}

	.pull_15 {
	left: -15%;
	}

	.pull_20 {
	left: -20%;
	}

	.pull_25 {
	left: -25%;
	}

	.pull_30 {
	left: -30%;
	}

	.pull_33 {
	left: -33.33333%;
	}

	.pull_35 {
	left: -35%;
	}

	.pull_40 {
	left: -40%;
	}

	.pull_45 {
	left: -45%;
	}

	.pull_50 {
	left: -50%;
	}

	.pull_55 {
	left: -55%;
	}

	.pull_60 {
	left: -60%;
	}

	.pull_65 {
	left: -65%;
	}

	.pull_66 {
	left: -66.66666%;
	}

	.pull_70 {
	left: -70%;
	}

	.pull_75 {
	left: -75%;
	}

	.pull_80 {
	left: -80%;
	}

	.pull_85 {
	left: -85%;
	}

	.pull_90 {
	left: -90%;
	}

	.pull_95 {
	left: -95%;
	}
No results found