Skip to content

Instantly share code, notes, and snippets.

View bballentine's full-sized avatar

Brandon Ballentine bballentine

11 followers · 21 following
View GitHub Profile
@bballentine
bballentine / Picture Element with srcset
Created March 4, 2013 21:14
Picture element with srcset example
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
@bballentine
bballentine / Picture Element Sample
Created March 4, 2013 21:10
Picture element
<picture width="500" height="500">
<source media="(min-width: 769px)" src="large.jpg">
<source media="(min-width: 480px)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
@bballentine
bballentine / example.css
Last active December 13, 2015 17:48
WEB 2710: css-media-query-example
div.example {
/*add all base styling here*/
}
@media only screen and (min-width: 320px) {
/*add styling for base smart phones here*/
}
@media only screen and (min-width: 480px) {
/*add styling for base smart phones in landscape orientation here*/
@bballentine
bballentine / gist:4750207
Created February 10, 2013 16:57
WEB2710: W3-2
<ul>
<li><a href="tel:5555555555">Call Me</a></li>
<li><a href="mailto:example@email.com?subject=contactform%20submission">Email Me</a></li>
<li><a href="sms://5555555555?message=someMessage">Text Me</a></li>
</ul>
@bballentine
bballentine / index.html
Last active December 12, 2015 09:19
WEB2710: W3-1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Short Page Title</title>
</head>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">