Jeremy Keith adactio

An Irish web developer living in Brighton, England, working with @clearleft.

adactio / monthform.html

Created December 13, 2011 22:20

An experiment with a progressive enhancement pattern to replace two select with a single year-month field.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Input test</title>
	</head>
	<body>

	<form method="post" action="#">

adactio / conditionalcats.html

Created December 2, 2011 14:54

An updated example for http://24ways.org/2011/conditional-loading-for-responsive-designs

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Can’t Hug Every Cat</title>
	<style>
	body {
	font: 1em/1.5 Cambria, Georgia, serif;
	margin: 0 5%;

adactio / sectioningcontenttest.html

Created November 12, 2011 12:19

Illustration of sectioning content and the outline algorithm in HTML5.

	<!DOCTYPE html>
	<html lang="en">
	<title>Sectioning Content test</title>
	<h1>This is an h1</h1>
	<p>That h1 is the heading for the body (a sectioning root).</p>
	<div>
	<h1>This is another h1</h1>
	<p>That h1 is inside a div so it is no different than the first h1.</p>
	</div>
	<section>

adactio / tabledisplaytest.html

Created August 16, 2011 10:36

Content-first table-display test

	<!DOCTYPE html>
	<html>
	<head>
	<title>Table Display test</title>
	<style>
	@media screen and (min-width: 30em) {
	body {
	display: table;
	caption-side: top;
	}

adactio / flexboxtest.html

Created August 15, 2011 22:46

Content-first flexbox test

adactio / datalist.html

Created January 9, 2011 17:24

Progressive enhancement with datalist

	<!DOCTYPE html>
	<title>Datalist test</title>
	<meta charset="utf-8">
	<form>
	<label for="source">How did you hear about us?</label>
	<datalist id="sources">
	<select name="source">
	<option>please choose...</option>
	<option value="television">Television</option>
	<option value="radio">Radio</option>