GRID

dabblet.css

/**
 * GRID
 *--------------------------------------------------
 * Default 940px grid
 */
.clearfix{*zoom:1}.clearfix:before,
.clearfix:after{display:table;content:""}
.clearfix:after{clear:both}
[class*="span"]{float:left; margin-left:20px}
.span1{width:60px}.offset1{margin-left:100px}.span2{width:140px}.offset2{margin-left:180px}.span3{width:220px}.offset3{margin-left:260px}.span4{width:300px}.offset4{margin-left:340px}.span5{width:380px}.offset5{margin-left:420px}.span6{width:460px}.offset6{margin-left:500px}.span7{width:540px}.offset7{margin-left:580px}.span8{width:620px}.offset8{margin-left:660px}.span9{width:700px}.offset9{margin-left:740px}.span10{width:780px}.offset10{margin-left:820px}.span11{width:860px}.offset11{margin-left:900px}.span12{width:940px}.offset12{margin-left:980px}
.row{margin-left:-20px;*zoom:1}
.row:before,.row:after{display:table;content:""}
.row:after{clear:both}
h2 { width: 960px;margin: 1em auto;text-align: center;}
/**
 * scaffolding
 */
 body { font-family: sans-serif; }
.page {
	margin: 0 auto;
	width: 960px;
	position: relative;
	background-color: rgba(0,0,0,.1);
}
.page:hover {
	background-color: rgba(0,0,0,.1);
	background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,0,0,.3) 20px, rgba(0,0,0,.3) 80px);
	background-position: 10px 0;
}
.page-12 {
	width: 940px;
	padding: 0 10px;
}
.page:hover::before {
  content: '10 ------ 60 ------ 20 ------- 60 ------- 20 ------- 60 -------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------ 60 -------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 -------- 20 ------ 60 ------ 10';
  color: rgba(0,0,0,.3);
  display: block;
  font-size: 10px;
  margin-left: -480px;
  left: 50%;
  top: 48px;
  position: absolute;
  width: 980px;
  z-index: 1;
}
.box, .head, .foot {
	background-color: rgba(200,0,0,.5);
	color: white;
	margin-bottom: 1em;
	padding: 1em 0;
	text-align: center; 
}
.page-12 .box, .head, .foot { 
	background-color: rgba(70,200,0,.5); 
}
.page-12 .stage, .page-12 .head, .page-12 .foot { 
	margin-left: -10px;
	margin-right: -10px; 
}
.stage { 
	background-color: rgba(0, 70, 200, .8);
	padding: 10px;
	margin-bottom: 1em;
 }
 .stage .box { margin-bottom: 0; }
/**
 *  live
 */
.live.page { background-color: transparent; }
.live .box { padding: 0; }
.live .stage { background-color: #141414; }
.live .foot { background-.color: #ccc; }
.mod { 
	background-color: #141414;
	padding: 10px 20px;
}
.mod .img { display: block; }
.mod .inner { text-align: left; }
.mod .hd { margin: .5em 0; font-weight: bold; }

dabblet.html

<!-- Example how 960 grids are working e.g. with bootstrap grid -->
<h2>960px without pre-/suffix spaces</h2>
<div class="page">
	<header class="head">header</header>
	<div class="row">
		<div class="box span4">box</div>		
		<div class="box span4">box</div>		
		<div class="box span4">box</div>
	</div>
	<div class="stage">
		<div class="row">
			<div class="box span4">box</div>		
			<div class="box span4">box</div>		
			<div class="box span4">box</div>
		</div>
	</div>
	<footer class="foot">footer</footer>
</div>
<h2>940px with pre-/suffix spaces</h2>
<div class="page page-12">
	<header class="head">header</header>
	<div class="row">
		<div class="box span4">box</div>
		<div class="box span4">box</div>
		<div class="box span4">box</div>
	</div>
	<div class="stage">
		<div class="row">
			<div class="box span4">box</div>		
			<div class="box span4">box</div>		
			<div class="box span4">box</div>
		</div>
	</div>
	<footer class="foot">footer</footer>
</div>



<h2>Example</h2>
<div class="live page page-12">
	<header class="head">header</header>
	<div class="row body">
		<div class="box span8">
			<article class="mod">
				<img class="img" src="http://placehold.it/580x60">
				<div class="inner">
					<div class="hd">Headline</div>
					<div class="bd">
					One morning, when Gregor Samsa woke from troubled dreams, he found 
	himself transformed in his bed into a horrible vermin.  He lay on his 
	armour-like back, and if he lifted his head a little he could see his 
	brown belly, slightly domed and divided by arches into stiff sections.  
	The bedding was hardly able to cover it and seemed ready to slide off 
	any moment.
					</div>
				</div>
			</article>
		</div>
		<div class="box span4">
			<article class="mod">
				<img class="img" src="http://placehold.it/260x60/C3000C/fff">
				<div class="inner">
					<div class="hd">Headline</div>
					<div class="bd">
					One morning, when Gregor Samsa woke from troubled dreams, he found 
	himself transformed in his bed into a horrible vermin. He lay on his 
	armour-like back.
					</div>
				</div>
			</article>
		</div>
	</div>
	<div class="stage">
		<div class="row">
			<div class="box span8">
				<article class="mod">
					<img class="img" src="http://placehold.it/580x60/C3000C/fff">
					<div class="inner">
						<div class="hd">Headline</div>
						<div class="bd">
						One morning, when Gregor Samsa woke from troubled dreams, he found 
		himself transformed in his bed into a horrible vermin.  He lay on his 
ke back, and if he lifted his head a little he could see his 
		brown belly, slightly domed and divided by arches into stiff sections.  
		The bedding was hardly able to cover it and seemed ready to slide off 
		any moment.
						</div>
					</div>
				</article>
			</div>
			<div class="box span4">
				<article class="mod">
					<img class="img" src="http://placehold.it/260x60">
					<div class="inner">
						<div class="hd">Headline</div>
						<div class="bd">
						One morning, when Gregor Samsa woke from troubled dreams, he found 
		himself transformed in his bed into a horrible vermin.  He lay on his 
		armour-like back.
						</div>
					</div>
				</article>
			</div>
		</div>
	</div>
	<footer class="foot">footer</footer>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

See the result here: http://dabblet.com/gist/2709529