Skip to content

Instantly share code, notes, and snippets.

Avatar

Jeremy Keith adactio

View GitHub Profile
@adactio
adactio / datalist.html
Created Jan 9, 2011
Progressive enhancement with datalist
View datalist.html
<!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 Aug 15, 2011
Content-first flexbox test
View flexboxtest.html
<!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 Aug 16, 2011
Content-first table-display test
View tabledisplaytest.html
<!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 Nov 12, 2011
Illustration of sectioning content and the outline algorithm in HTML5.
View sectioningcontenttest.html
<!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>
View conditionalcats.html
<!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 Dec 13, 2011
An experiment with a progressive enhancement pattern to replace two select with a single year-month field.
View monthform.html
<!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 Dec 14, 2011
CSS rules to hide "Trending Topics" and "Who To Follow" on new new Twitter.
View twitter-user-stylesheet.css
[data-component-term="trends"] *,
[data-component-term="user_recommendations"] * {
display: none !important;
}
@adactio
adactio / mediaquerycolums.html
Created Jan 12, 2012
Multiple columns dependent on media queries that test for height as well as width.
View mediaquerycolums.html
<!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 Jan 26, 2012
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
View lettering.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
@adactio
adactio / placeholderFromDatalist.js
Created Aug 12, 2012
Generate a placeholder attribute from the datalist associated with that input.
View placeholderFromDatalist.js
(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,