Mike Fowler 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 | |
| */ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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
/ JadeIEConditionals.jade
Created
July 13, 2012 13:46
IE Conditional Classes on <html> in Jade
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !!! 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
/ _respond.scss
Created
July 20, 2012 12:45
My default partial for working on responsive mobile-first layouts.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin respond-to($size) { | |
| /** | |
| * Smartphones | |
| */ | |
| @if $size == 'mobile' { | |
| // Handles "all" smartphones... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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
/ index.html
Created
September 12, 2012 02:49
Easy to maintain media query fallbacks for <=IE8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Our theme base. | |
| * | |
| * We shouldn't have to modify this to create a new theme. | |
| */ | |
| @import 'compass/css3/images'; | |
| $page-fill: #f1f1f1 !default; |
mikefowler
/ index.html
Created
September 28, 2012 17:48
Constraining index when selecting DOM elements.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 |
OlderNewer