Untitled

dabblet.css

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{
	font:81.25%/2 sans-serif;
	color:#666;
	background:#fff;
}
.wrapper{
	width:97.5%;
	padding:0 24px;
	margin:0 auto;
}
@media only screen and (min-width:984px){
	.wrapper{
		max-width:77.538em; /* 960px */	
	}
}
.grid-wrap{
	margin-left:-24px;
	margin-bottom:0;
	position:relative;
	list-style:none;
}
.grid{
	float:left;
	padding-left:1.846em; /* 24px */
}
.demo{
	background-color:rgba(0,0,0,.02);
}

.mobile--one-whole            { width:100%; }
.mobile--one-half		      { width:50%; }
@media only screen and (min-width:584px){
	.mobile-big--one-whole    { width:100%; }
	.mobile-big--one-half     { width:50%; }
	.mobile-big--one-third    { width:33.333%; }
}
@media only screen and (min-width:764px){
	.tablet-small--one-whole  { width:100%; }
	.tablet-small--one-half   { width:50%; }
	.tablet-small--one-third  { width:33.333%: }
	.tablet-small--one-quarter{ width:25%; }
}
@media only screen and (min-width:983px){
	.tablet-big--one-whole    { width:100%; }
	.tablet-big--one-half     { width:50%: }
	.tablet-big--one-third    { width:33.333%; }
	.tablet-big--one-quarter  { width:25%; }
}

.island{
	display:block;
	padding:12px;
}
.island > :last-child{
	margin-bottom:0;
}

dabblet.html

<meta name=viewport content="width=device-width,initial-scale=1">

<div class="wrapper">
	<div class="grid-wrap">
		<div class="grid mobile--one-whole tablet-small--one-half tablet-big--one-third">
			<div class="demo island">Find A Dealer
			</div>
		</div>
		<div class="grid mobile--one-whole tablet-small--one-half tablet-big--one-third">
			<div class="demo island">Book A Service
			</div>
		</div>
		<div class="grid mobile--one-whole tablet-small--one-half tablet-big--one-third">
			<div class="demo island">
				Contract Hire &amp; Leasing Offers
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}