Skip to content

Instantly share code, notes, and snippets.

View dfadler's full-sized avatar

Dustin Fadler dfadler

14 followers · 20 following
View GitHub Profile
@dfadler
dfadler / _mixins.sass
Created February 15, 2014 19:46
A cross browser rgba example using sass
@mixin cross-browser-rgba($hex, $percentage)
.rgba &
background-color: rgba($hex, $percentage)
.no-rgba &
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str(rgba($hex ,$percentage))}', endColorstr='#{ie-hex-str(rgba($hex ,$percentage))}',GradientType=0 )
@dfadler
dfadler / classes.css
Created February 14, 2014 23:38
Photography site scenario with vanilla css using classes and per element styling
.red {}
.blue {}
.teal {}
.0 {}
.yellow {}
.orange {}
.red-background {}
.blue-background {}
.teal-background {}
@dfadler
dfadler / index.html
Created February 14, 2014 21:27
Cross browser rgba example with IE fallback and feature detection
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<script src="modernizr.js"></script>
</head>
<body <!-- feature detection via js adds feature classes --> >
<div class="transparent-background">
This container has an rgba background
@dfadler
dfadler / index.html
Created February 14, 2014 21:17
Border radius IE fallback and feature detection example
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<script src="modernizr.js"></script>
</head>
<body <!-- feature detection via js adds feature classes --> >
<div class="rounded">
This container has rounded corners
@dfadler
dfadler / index.html
Created February 12, 2014 21:59
Example using IE7 hacks
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main"></div>
<div id="sidebar"></div>
</body>
</html>
@dfadler
dfadler / ie7-style.css
Created February 12, 2014 21:57
Example of IE specific stylesheets
#main, #sidebar {
display: inline;
zoom: 1;
}
@dfadler
dfadler / index.html
Created February 12, 2014 21:45
Adds IE classes to html tag
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
@dfadler
dfadler / backbone-events.js
Created January 24, 2014 12:56
// Backbone.Events
// ---------------
// A module that can be mixed in to *any object* in order to provide it with
// custom events. You may bind with `on` or remove with `off` callback
// functions to an event; `trigger`-ing an event fires all callbacks in
// succession.
//
// var object = {};
// _.extend(object, Backbone.Events);
@dfadler
dfadler / jquery-animation.js
Created January 23, 2014 13:24
function Animation( elem, properties, options ) {
var result,
stopped,
index = 0,
length = animationPrefilters.length,
deferred = jQuery.Deferred().always( function() {
// don't match elem in the :animated selector
delete tick.elem;
}),
tick = function() {
@dfadler
dfadler / backbone-router.js
Created January 13, 2014 14:33
Backbone Router
// Backbone.Router
// ---------------
// Routers map faux-URLs to actions, and fire events when routes are
// matched. Creating a new one sets its `routes` hash, if not set statically.
var Router = Backbone.Router = function(options) {
options || (options = {});
if (options.routes) this.routes = options.routes;
this._bindRoutes();
this.initialize.apply(this, arguments);