Skip to content

Instantly share code, notes, and snippets.

View mikefowler's full-sized avatar

Mike Fowler mikefowler

307 followers · 36 following
View GitHub Profile
@mikefowler
mikefowler / _colors.scss
Created February 8, 2012 16:38
An example of a flexible color partial. Holds variables for common colors, and provides a mixin for building gradients
/**
* Colors
*
* @section colors
*
* Do NOT manually define hex values for colors. Stick to the
* palette by using one of the variables below, or ADD a variable
* if it is absolutely necessary
*/
@mikefowler
mikefowler / dabblet.css
Created June 5, 2012 20:37
drop-shadow filter (applied to border only)
/**
* drop-shadow filter (applied to border only)
*
* Unfortunately... this sacrifices the shadow on the arrow. Looks
* weird with its own shadow on it.
*/
html {
background: url('http://subtlepatterns.com/patterns/purty_wood.png')
@mikefowler
mikefowler / JadeIEConditionals.jade
Created July 13, 2012 13:46
IE Conditional Classes on <html> in Jade
!!! 5
//if IE 7
<html class="no-js lt-ie9 lt-ie8" lang="en">
//if IE 8
<html class="no-js lt-ie9" lang="en">
<!--[if gt IE 8]><!-->
html(class='no-js', lang='en')
<!--<![endif]-->
head
title Yes, it's super messy.
@mikefowler
mikefowler / _respond.scss
Created July 20, 2012 12:45
My default partial for working on responsive mobile-first layouts.
@mixin respond-to($size) {
/**
* Smartphones
*/
@if $size == 'mobile' {
// Handles "all" smartphones...
@mikefowler
mikefowler / _base.scss
Created August 15, 2012 15:24
Sass Theming Structure
/**
* The result of this file structure is ONE *.css file per theme. Making a global change
* to _base or _config partial will update all themes that inherit from them. #win
*/
@import 'config';
/**
* Global
*/
@mikefowler
mikefowler / index.html
Created September 12, 2012 02:49
Easy to maintain media query fallbacks for <=IE8
<!doctype html>
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
@mikefowler
mikefowler / nth.scss
Created September 24, 2012 14:47
Handy nth-child Recipes
// Odd or Even
&:nth-child(even/odd) { }
// Every third item
&:nth-child(3n) {}
// Every third item, starting with the first
&:nth-child(3n-5) { }
// Every fourth item
@mikefowler
mikefowler / _base.scss
Created September 25, 2012 14:16
Flexible Backgrounds with Sass and Compass
/**
* Our theme base.
*
* We shouldn't have to modify this to create a new theme.
*/
@import 'compass/css3/images';
$page-fill: #f1f1f1 !default;
@mikefowler
mikefowler / index.html
Created September 28, 2012 17:48
Constraining index when selecting DOM elements.
<!--
This is a simple way to constrain an index to a range. A good use case for this is
selecting DOM elements and then getting the element on a given index in that selection.
The code in getIndexInSelection() will constrain the index to the range of elements available,
choosing either the highest or lowest index if the requested index is out of range.
-->
<div id="container">
<section>...</section>
@mikefowler
mikefowler / retina.scss
Created October 2, 2012 15:17
Compass mixin for handling retina images.
/**
* Bear in mind: this is NOT a way to address
* issues with bandwidth and sending large
* images to a mobile browser.
*
* For a great discussion of that, check out this A List Apart
* article by Dave Rupert: http://bit.ly/QGfJk4
*
* The media query is based on the snippet recently posted by Chris
* Coyier on CSS Tricks: http://bit.ly/QGg71V