Skip to content

Instantly share code, notes, and snippets.

View bjankord's full-sized avatar
🎵
Chillin'

Brett Jankord bjankord

🎵
Chillin'
149 followers · 11 following
View GitHub Profile
@bjankord
bjankord / gist:2509519
Created April 27, 2012 14:00
Picture element markup with polyfill markup for older browsers
<picture alt="Alt tag describing the image represented">
<!--<source src="photo-s.jpg"/>-->
<source src="photo-s.jpg"/>
<!--<source src="photo-m.jpg" media="min-width:321px"/>-->
<source src="photo-m.jpg" media="min-width:321px"/>
<!--<source src="photo-l.jpg" media="min-width:641px"/>-->
<source src="photo-l.jpg" media="min-width:641px"/>
<!--<source src="photo-xl.jpg" media="min-width:1281px"/>-->
<source src="photo-xl.jpg" media="min-width:1281px"/>
<noscript><img src="photo-s.jpg"/></noscript>
@bjankord
bjankord / css-responsive-images.html
Created May 2, 2012 01:12 — forked from necolas/css-responsive-images.html
Idea for CSS-only responsive images using CSS3 generated content and attr() function. Added media query for high-resolution devices. No browser implementation as of May 2011
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS responsive images</title>
<style>
/* Doesn't stop original source image being
downloaded too */
@media (min-device-width:600px) {
@bjankord
bjankord / gist:2702067
Created May 15, 2012 14:11
Picture element with Meta media variables
<head>
<meta name='media' var='small' media='min-width:320px' />
<meta name='media' var='small-2x' media='min-width:320px and min-device-pixel-ratio:2;' />
<meta name='media' var='medium' media='min-width:600px' />
<meta name='media' var='medium-2x' media='min-width:600px and min-device-pixel-ratio:2;' />
<meta name='media' var='large' media='min-width:1000px' />
</head>
<body>
<picture alt="">
@bjankord
bjankord / gist:2710648
Created May 16, 2012 14:12
Srcset with Meta Variables
<head>
<meta name='srcset' var='small' value='320w' />
<meta name='srcset' var='small-2x' value='320w 2x;' />
<meta name='srcset' var='medium' value='600w' />
<meta name='srcset' var='medium-2x' value='600w 2x;' />
<meta name='srcset' var='large' value='1000w' />
</head>
<body>
<img src="images/small/photo.jpg" srcset="images/{srcset}/photo.jpg" alt="The Breakfast Combo">
@bjankord
bjankord / gist:3410238
Created August 21, 2012 01:15
Picture element type attribute example
<picture alt="">
<!-- If browser supports WebP, use image below: -->
<source src="fullsize.webp" type="image/webp">
<!-- Else, use image from which ever source tag currently matches -->
<source src="mobile.jpg">
<source src="medium.jpg" media="min-width: 600px">
<source src="fullsize.jpg" media="min-width: 900px">
<img src="mobile.jpg">
</picture>
@bjankord
bjankord / gist:3429218
Created August 22, 2012 20:49
ReSct.it Script
var ReSRC = function() {
"use strict";
function h(e, t, n) {
var r = new Array;
t == null && (t = document);
n == null && (n = "*");
var i = t.getElementsByTagName(n), s = i.length, o = new RegExp("(^|\\s)" + e + "(\\s|$)"), u, a;
for (u = 0, a = 0; u < s; u++) if (o.test(i[u].className)) {
r[a] = i[u];
a++;
@bjankord
bjankord / gist:3694276
Created September 10, 2012 22:02
Sublime Text Preferences
{
"bold_folder_labels": true,
"color_scheme": "Packages/Color Scheme - Default/github.tmtheme",
"font_face": "Courier New",
"font_size": 10,
"wide_caret": true,
"word_wrap": true,
"tab_size": 2,
"translate_tabs_to_spaces": false
}
@bjankord
bjankord / mq.css
Created October 3, 2012 20:15 — forked from chriscoyier/mq.css
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
@bjankord
bjankord / gist:3983019
Created October 30, 2012 20:59
Cross-Browser Debounce Resize
/*
Tested in:
Chrome - 22 : Works
FF - 16 : Works
IE - 10
IE - 9 : Works
IE - 8 : no alert - check at home
IE - 7 : no alert - ""
IE - 6 : posts alert twice
@bjankord
bjankord / jquery-to-javascript.js
Created November 7, 2012 20:03
jQuery to JavaScript
// jQuery to JavaScript - src: http://sharedfil.es/js-48hIfQE4XK.html
//--------------------------------------------------//
$(document).ready(function() {
// code…
});
document.addEventListener("DOMContentLoaded", function() {
// code…
});