VIP core styles:

dabblet.css

/*	
	VIP core styles:
		http://veryimportantpenguin.com
		
	CSS contents:
		$Base - base styles for page styles
		$Layout - styles for page layout
		$Modules - styles for components throughout the site
		$Themes - styles for buttons, tabs and other non browser default UI
		$States - styles for different states, media queries etc.
*/
/*-- 
$Base
	--*/
*{
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
}
body{
	font:100%/1.75 sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:sub-pixelaliased;
}

/* vertical rhythm */
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
.img{
	margin-bottom:1.75em;
}

/* anchors */
a{
	text-decoration:none;
	color:#fff;
}

/* lists */
ul,ol{
	padding:0;
}

ul,ol,
dd{
	margin-left:1em;
}

	li > ul,
	li > ol{
		margin-bottom:0;
	}

/* images */
img{
	max-width:100%;
	height:auto;
}

/* figures */
figure img{
	vertical-align:middle;
	border:0.07692307692307693em solid #ebebeb;
	margin-bottom:0.8461538461538461em;
}

figcaption,
caption{
	color:#666;
	caption-side:bottom;
}

/* paragraphs */
p{color:#666;}

small,
.mili{
	font-size:.6875em;
	line-height:1.45454545;
}

/* forms */
.input-text,
.btn-input{
	display:inline-block;
	vertical-align:baseline;
	-webkit-appearance:none;
	-moz-appearance:none;
	border:0;
	border-radius:0.1875em;
}

.input-text{	
	padding:.5em .625em;	
}

/*--
$Layout
	--*/
.global-header,
.featured-content,
.page-content,
.global-footer{
	position:relative;
	margin:auto;
}

.featured-content{
	background:#efefef;
}

.grid-row:before,
.grid-row:after{
	content:"";
	display:table;
}
.grid-row:after{ clear:both; }
.grid-row{
	*zoom:1;
}

/* nested rows */
.grid-row .grid-row { margin:0; }

[class*="grid-col"]{
	width:100%;
}

[class*="grid-col"] > :last-child{
	margin-bottom:0;
}


/*-- island object --*/
.island,
.islet{
	display:block;
}
.island{
	padding:22px;
}
.islet{
	padding:11px;
}
.landmark{
	...
}

/*-- nav object --*/
.nav{
	list-style:none;
	margin-left:0;
}

	.nav > li,
		.nav a{
			display:inline-block;
			*display:inline;
			*zoom:1;
		}

.cf:before,
.cf:after{
    content:" ";
    display:table;
}

.cf:after{clear:both;}

.cf{*zoom:1;}

/*--
$Modules
	--*/

/* demo columns get coloured in */
.demo > *{background-color:#ddd;}

/* logo */
.logo,
	.logo > img{
		display:inline-block;
		width:10.0625em;
		height:3.5625em;
	}
	
.logo{
	background:#fafafa;
	background-image:url(/img/logo.png);
	background-image:url(/img/logo-org.svg);
	background-size:10.0625em 3.5625em;
	background-repeat:no-repeat;
	margin:.625em .25em .625em 0;
}

/* header nav */
.global-header .nav{
	margin:20px 0;
}
.global-header li{
	padding-right:.875em;
}
.global-header a{
	color:#333;
}

/* feature button */
.book-btn{
	width:100%;
	text-align:center;
	vertical-align:bottom;
}

.book-btn > span{
	display:block;
}
.book-btn > small{font-weight:normal;}

/* footer */
.global-footer > p{text-align:center;}

/*--
$Themes
	--*/
/* text level styling */
.muted{color:#666;}

/* buttons */
.btn{
	display:inline-block;
	vertical-align:baseline;
	background-color:#333;
	border-radius:0.1875em;
	padding:.1875em .75em;
}

.jumbo{
	font-weight:bold;
	font-size:1.125em;
}

/*--
$States
	--*/
.is-semantic{
	position:absolute;
	left:-624.9375em;
}
.is-image{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
.is-hidden,
.is-hidden.for-mobile{
	display:none;
}
.is-hidden.for-desktop{
	display:block;
}

@media screen and (min-width:61.4375em){
	.grid-row{
		margin:22px 0 22px 24px;
	}
	
	[class*="grid-col"]{
		float:left;
		padding-right:24px;
	}
	
	.two-split > .grid-col{
		width:50%;
	}

	.three-split > .grid-col{
		width:33.333%;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
	.logo{
		background-image:url(/img/[email protected]);
		background-image:url(/img/logo.svg);
	}
}

dabblet.html

<header class=global-header role=banner>
	<nav class=cf role=navigation>
		<a href=/ title="Go back to the homepage." class=logo>
			<img src=/img/logo.png alt="VIP Logo" class=is-semantic>
		</a>
		<ul class=nav>
			<li><a href=/ title="Go back to the homepage.">Home</a></li>
			<li><a href=/events title="Take a look at current and future events.">Events</a></li>
			<li><a href=/guest-list title="If getting down with the celebs is your thing, check out our A-list guest list.">Guest List</a></li>
			<li><a href=/about title="What to know a little more about us? Not a problem.">About VIP</a></li>
			<li><a href=/contact title="Got any gossip? Have a complement to pay? Tell us.">Contact Us</a></li>
		</ul>
	</nav>
</header>
<section class=featured-content role="banner">
	<div class="grid-row two-split">
		<div class="grid-col">
			<div class="island">
				<h1>Bringing you the best in party entertainment.</h1>
				<p>Here at VIP, we like to make a big scene, for you and your guests. We're here to bring you the best and only the best. So relax, and have fun booking your special occasion.</p>
			</div>
		</div>
		
		<div class="grid-col">
			<div class="island">
				<a href=/book title="Book with us now for a special saving" class="btn jumbo book-btn">
					<span>Book now</span><small>and save 20% off</small>
				</a>
			</div>
		</div>
	</div>
</section>
<section class=page-content role="main">
	<div class="grid-row three-split">
		<div class="demo grid-col">
			<div class="island">
				<address>
					123 Fakestreet<br>
					Fakesville<br>
					Fakers</br>
					FA43 R23<br>
				</address>
			</div>
		</div>
		
		<div class="demo grid-col">
			<div class="island">
				<p>Subscribe to our newsletter</p>
				<input type=text [email protected] class=input-text>
				<input type=submit class="btn btn-input" value=Submit>
			</div>
		</div>
		
		<div class="demo grid-col">
			<div class="island">
				Twitter feed
			</div>
		</div>
	</div>
</section>
<footer class=global-footer role=related>
	<p>&copy;2011-2012 &mdash; Very Important Penguin™. All rights reserved.</p>
</footer>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}