Skip to content

Instantly share code, notes, and snippets.

View adactio's full-sized avatar

Jeremy Keith adactio

899 followers · 64 following
View GitHub Profile
@adactio
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>
@adactio
adactio / flexboxtest.html
Created August 15, 2011 22:46
Content-first flexbox test
<!DOCTYPE html>
<html>
<head>
<title>Flexbox test</title>
<style>
@media screen and (min-width: 30em) {
body {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
@adactio
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
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
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
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
adactio / twitter-user-stylesheet.css
Created December 14, 2011 23:56
CSS rules to hide "Trending Topics" and "Who To Follow" on new new Twitter.
[data-component-term="trends"] *,
[data-component-term="user_recommendations"] * {
display: none !important;
}
@adactio
adactio / mediaquerycolums.html
Created January 12, 2012 16:55
Multiple columns dependent on media queries that test for height as well as width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<style>
@media all and (min-width: 40em) and (min-height: 36em) {
[role="main"] {
-webkit-column-count: 2;
@adactio
adactio / lettering.html
Created January 26, 2012 11:35
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
@adactio
adactio / placeholderFromDatalist.js
Created August 12, 2012 15:54
Generate a placeholder attribute from the datalist associated with that input.
(function(win,doc) {
if (doc.querySelectorAll) {
var inputs = doc.querySelectorAll('input[list]'),
total = inputs.length;
for (var i=0; i<total; i++) {
var input = inputs[i],
id = input.getAttribute('list'),
list = doc.getElementById(id),
options = list.getElementsByTagName('option'),
amount = options.length,