Skip to content

Instantly share code, notes, and snippets.

View dfadler's full-sized avatar

Dustin Fadler dfadler

View GitHub Profile
@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 / 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: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 / 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 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 / 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 / _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 / _colors.sass
Created February 15, 2014 20:09
Sass example key pair values and loops
$meet-the-families: #82cdc8
$learn-about-farming: #d4a00f
$recognition-programs: #e27669
$farm-blog: #8b8d08
$generic: #bb6c03
@import "../js/vendor/bower-components/fancybox/source/jquery.fancybox.css";
@import "../js/vendor/video-js/video-js.min.css";
@import "../js/vendor/bower-components/baron/baron.css";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
@import "compass"
@import "compass/reset"
@import "globals"
@import "colors"
@import "typeography"
@import "sprites"
@import "mixins"
@import "featurette/featurette"
@import "quiz/main"