Skip to content

Instantly share code, notes, and snippets.

View edboaden's full-sized avatar

Ed Boaden edboaden

View GitHub Profile
@edboaden
edboaden / mailto
Last active August 29, 2015 14:13
Mail-to Link
<a href="mailto:name@example.com?subject=subject%20text&body=body%20text" title="Create Email">name@example.com</a>
@edboaden
edboaden / html.html
Last active August 29, 2015 14:08
Standard page markup.
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
<title>
Title
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Ed Boaden">
@edboaden
edboaden / responsive-images.css
Created June 27, 2013 13:53
Responsive images
/* Narrow viewport width */
body:after {
content: 'narrow';
display: none;
}
/* Medium viewport width */
@edboaden
edboaden / ordered-list.css
Created June 26, 2013 12:54
Ordered list with styled numbers
/* Ordered list with styled numbers */
ol {
counter-reset: li;
}
ol li {
list-style: none;
margin-left: 2em;
@edboaden
edboaden / typographic-scale.css
Created June 9, 2013 14:34
Typographic Scale 14 / 21
/* 14px / 21px */
body {
font: 14px / 1.5em Helvetica, Arial, sans-serif; /* em used in line-height to set fixed height across all child elements */
}
h1 {
font-size: 2.571em; /* 48px */
line-height: 1.167; /* 48px */
@edboaden
edboaden / typographic-scale.css
Created June 9, 2013 14:21
Typographic Scale 18 / 27
/* 18px / 27px */
body {
font: 18px / 1.5em Helvetica, Arial, sans-serif; /* em used in line-height to set fixed height across all child elements */
}
h1 {
font-size: 2.667em; /* 48px */
line-height: 1.125; /* 54px */
@edboaden
edboaden / typographic-scale.css
Created June 9, 2013 14:09
Typographic Scale 12 / 18
/* 12px / 18px */
body {
font: 12px / 1.5em Helvetica, Arial, sans-serif; /* em used in line-height to set fixed height across all child elements */
}
h1 {
font-size: 3em; /* 36px */
line-height: 1; /* 36px */
@edboaden
edboaden / typographic-scale.css
Created June 9, 2013 12:57
Typographic Scale 16 / 24
/* 16px / 24px */
body {
font: 16px / 1.5em Helvetica, Arial, sans-serif; /* em used in line-height to set fixed height across all child elements */
}
h1 {
font-size: 3em; /* 48px */
line-height: 1; /* 48px */
@edboaden
edboaden / grid.html
Created June 9, 2013 12:19
Baseline Grid
<!-- Baseline Grid --><ul id="grid" style="display:"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><style>#grid{list-style:none;margin:0;overflow:hidden;padding:0;position:absolute;top:0;left:0;width:100%;}#grid li{height:1.4em;}#grid li:nth-child(even){background:rgba(255,0,0,0.1);}</style>
@edboaden
edboaden / inline-dl.css
Last active December 15, 2015 11:29
Inline descriptive list
dt, dd {
display: inline;
}
dd:after {
content: "\A";
white-space: pre;
}