Foldy: simplified mobile first responsive grid based on the 960 Grid.

index.html

<section id="content">
		<div class="container">
			<section id="introp" class="cf">
				<div class="grid-full">
					<h1 class="heading">Foldy</h1>
				</div>
				<div class="grid-2 grid-flow-opposite">
					<figure>
						<img src="http://placekitten.com/600/400" alt="kittens brought to you by kittens" />
						<figcaption>Use <code>.grid-flow-opposite</code> for <a href="">Content Choreography</a>.</figcaption>
					</figure>
				</div>

				<div class="grid-4">
					<div class="content-pad-right">
						<p>Foldy is a simplified mobile first responsive grid. It's based on the <a href="http://960.gs">960 Grid</a>, and is designed for people (like us at <a href="http://paravelinc.com">Paravel</a>) who are transitioning into Responsive Web Design.</p>
						<p> It's ugly on purpose. It's not a framework or a drop-in solution, it's a starting point. It's a <del>learning tool</del> <ins>launch pad</ins> that is made to be customzied.</p>
					</div>
				</div>
			</section>

			<section id="grid" class="clearfix">
				<div class="grid-full">
					<h2 class="sub-heading">Grid</h2>
				</div>
				<div class="cf show-grid">
				  <div class="row">
	 			    <div class="grid-1">.grid-1</div>
				    <div class="grid-1">.grid-1</div>
				    <div class="grid-1">.grid-1</div>
				    <div class="grid-1">.grid-1</div>
				    <div class="grid-1">.grid-1</div>
				    <div class="grid-1">.grid-1</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-2">.grid-2</div>
				    <div class="grid-2">.grid-2</div>
				    <div class="grid-2">.grid-2</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-3">.grid-3</div>
				    <div class="grid-3">.grid-3</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-half">.grid-half</div>
				    <div class="grid-half">.grid-half</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-4">.grid-4</div>
				    <div class="grid-2">.grid-2</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-1">.grid-1</div>
	 			    <div class="grid-4">.grid-4</div>
				    <div class="grid-1">.grid-1</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-5">.grid-5</div>
				    <div class="grid-1">.grid-1</div>
				 	</div>
				 	<div class="row">
	 			    <div class="grid-6">.grid-6 or .grid-full</div>
				 	</div>
				</div>
			</section>

			<section id="gallery" class="cf">
			  <div class="grid-full">
  				<h2 class="sub-heading">Gallery</h2>
  				<p>One common task in responsive web design is making a grid of thumbs collapse into a 2-column grid. Foldy makes this easy. 6 is the magic number. And it should be easy enough to understand how the simplified grid works that you could modify it yourself.</p>
  			</div>
			 	<div class="gallery cf">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	  <img src="http://placekitten.com/400/300" class="grid-unit">
			 	</div>

			</section>

			<footer class="grid-full">
			  <p>&hearts; 20X6 <a href="http://paravelinc.com">Paravel, inc</a> &mdash; Have fun tell us about the awesome stuff you use it on.</p>
			</footer>
		</div>
	</section>

style.css

/*------------------------------------------------------------

	Style.css

	Created by:	Dave Rupert
	Contact:		http://github.com/davatron5000/foldy960

	Copyright 2012
	License:	  WTFPL + "Not going to maintain this because
              the rent is too damn high licence."

--------------------------------------------------------------*/

/* Responsive Resets
-------------------------------------------------------------- */
@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img,
audio,
video,
canvas {
  max-width: 100%;
}

/* Grid > 6 Column Mobile First
-------------------------------------------------------------- */
.container {
  /*
    The `max-width` property is the width governer. I dare you to experiment
    with setting this larger, something like 1280px.
  */
	max-width: 1280px;
	width:92%;
	margin:0px auto;
	position: relative;
}

.row {
  clear: both;
}

@media screen and (min-width: 480px) {
  .container {
    width: 98%;
  }

  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-half,
  .grid-full,
  .grid-unit {
    float: left;
    width:96.969696969697%;
    margin:0 1.515151515152% 1em;
  }

  .gallery .grid-unit,
  .grid-half {
    width:46.969696969697%;
    margin: 0 1.515151515152% 1em;
  }

  .grid-flow-opposite{
    float:right
  }

}

@media screen and (min-width: 640px) {
  .grid-1     { width: 13.636363636364%; }
  .grid-2     { width: 30.30303030303%; }
  .grid-3,
  .grid-half  { width: 46.969696969697%; }
  .grid-4     { width: 63.636363636364%; }
  .grid-5     { width: 80.30303030303%; }
  .grid-6,
  .grid-full  { width: 96.969696969697%; }

  .gallery .grid-unit {
    width: 30.30303030303%;
  }

  .content-pad-right {
    padding-right: 4%; /* Use (or don't) as necessary. */
  }

  .content-pad-left {
    padding-left: 4%;
  }

}

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
For best results, use your favorite clearfix here.
-------------------------------------------------------------- */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */

/* Layout
-------------------------------------------------------------- */
body {
  font: 100%/1.5 sans-serif;
}

section {
  margin-bottom: 2em;
}

footer {
  font-size: 0.9em;
  border-top: 1px solid #ccc;
  padding: 0.5em 0 2.5em;
}

/* Typography
-------------------------------------------------------------- */
.heading {
  font-size: 3em;
  margin: 0;
}

.sub-heading {
  font-size: 2em;
  margin-bottom: 0.5em;
}

a {
  color: #0066cc;
}

a:focus,
a:hover {
  color: #003399;
}

/* Elements
-------------------------------------------------------------- */
figure {
  margin: 0;
  background: #f8f8f8;
}

figcaption {
  padding: 0.5em 1em 1em;
  font-size: 0.875em;
}

code {
  padding: 0.5em;
  background: #efefef;
}

/* Helpers
-------------------------------------------------------------- */
.show-grid div[class*='grid-'] {
  background-color: #eee;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  text-align: center;
}