Skip to content

Instantly share code, notes, and snippets.

Jeremy Keith adactio

Block or report user

Report or block adactio

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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,
You can’t perform that action at this time.