derekjohnson

## dabblet.css
/**
 * CSS open/close menu idea
 */

body {background: #fff;padding:0;margin:0}
#menu {display:none}
#menu:target {display:block;position:absolute;top:0;background:#fff}

## dabblet.css
/**
 * Styling radio buttons
 */

label {
display:inline-block;
padding: 1em;
background: #faf;
}

## registration.html
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>DEMO - Form with two submit buttons using HTML5</title>
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
    	<h1>Registration</h1>

## dabblet.css
/**
 * col
 */

.first {background:red}
.last {background: blue}

## resize-monitor.js
if(window.addEventListener) { // correlates with media query support
	var timer = false
  ,	resize_monitor = function() {
  		if(timer) {
  			clearTimeout(timer);
  		}

  		timer = setTimeout(function() { _gaq.push(['_trackEvent', 'Resize', 'Resize', 'Resized']); }, 100);

        // or log a pageview on a non-existant page if you prefer

## markers.js
(function(doc){
	if(doc.querySelectorAll) { // This only works in IE 8+
        var copy = doc.querySelectorAll('.string') // Element(s) with class="string" need to be in markup
	,	i = 0
	,	ii = copy.length
	,	replace_at = function(text, index, char) {
			return text.substr(0, index) + char + text.substr(index + 1);
		}
	;

## form.html
<form>
	<label class="js-placeholded" for="first-name">First name</label>
	<input type="text" required aria-required="true" placeholder="First name" id="first-name">

	<label class="js-placeholded" for="last-name">Last name</label>
	<input type="text" required aria-required="true" placeholder="Last name" id="last-name">

	<label class="js-placeholded" for="telephone">Telephone</label>
	<input type="tel" required aria-required="true" placeholder="Telephone" id="telephone">

## Here's my opinion
Literally no one, in the world, anywhere, ever, likes these bloody pop up boxes that get in your way when you're trying to browse. I've been on your site for all of five seconds and already you're turning the lights out and demanding my opinion. Well, here it is. I'm closing this tab and going to shop on a website that understands I want to see dresses, not needy bullshit text boxes. Happy now?

## gist:7006394
var connection = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection || { type : 'unknown' },
	slow = connection.type === 3 || connection.type === 4 || connection.bandwidth <= 0.25;

if(!slow) {
	// load webfonts
}

## webfonts.js
(function(win, doc, undefined) {

	// sanity check - is it a decent browser
	if('addEventListener' in win && 'localStorage' in win && 'querySelector' in doc) {

		// https://gist.github.com/scottjehl/5406853
		var injectref = doc.getElementsByTagName('script')[0],
			loadCSS = function(href) {
				var fontslink = doc.createElement('link');
	/**
	* CSS open/close menu idea
	*/

	body {background: #fff;padding:0;margin:0}
	#menu {display:none}
	#menu:target {display:block;position:absolute;top:0;background:#fff}
	/**
	* Styling radio buttons
	*/

	label {
	display:inline-block;
	padding: 1em;
	background: #faf;
	}
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>DEMO - Form with two submit buttons using HTML5</title>
	<meta name="viewport" content="width=device-width">
	</head>

	<body>
	<h1>Registration</h1>
	if(window.addEventListener) { // correlates with media query support
	var timer = false
	, resize_monitor = function() {
	if(timer) {
	clearTimeout(timer);
	}

	timer = setTimeout(function() { _gaq.push(['_trackEvent', 'Resize', 'Resize', 'Resized']); }, 100);

	// or log a pageview on a non-existant page if you prefer
	(function(doc){
	if(doc.querySelectorAll) { // This only works in IE 8+
	var copy = doc.querySelectorAll('.string') // Element(s) with class="string" need to be in markup
	, i = 0
	, ii = copy.length
	, replace_at = function(text, index, char) {
	return text.substr(0, index) + char + text.substr(index + 1);
	}
	;
	<form>
	<label class="js-placeholded" for="first-name">First name</label>
	<input type="text" required aria-required="true" placeholder="First name" id="first-name">

	<label class="js-placeholded" for="last-name">Last name</label>
	<input type="text" required aria-required="true" placeholder="Last name" id="last-name">

	<label class="js-placeholded" for="telephone">Telephone</label>
	<input type="tel" required aria-required="true" placeholder="Telephone" id="telephone">
	var connection = window.navigator.connection \|\| window.navigator.mozConnection \|\| window.navigator.webkitConnection \|\| { type : 'unknown' },
	slow = connection.type === 3 \|\| connection.type === 4 \|\| connection.bandwidth <= 0.25;

	if(!slow) {
	// load webfonts
	}
	(function(win, doc, undefined) {

	// sanity check - is it a decent browser
	if('addEventListener' in win && 'localStorage' in win && 'querySelector' in doc) {

	// https://gist.github.com/scottjehl/5406853
	var injectref = doc.getElementsByTagName('script')[0],
	loadCSS = function(href) {
	var fontslink = doc.createElement('link');