A bunch of updates:

* Update Normalize
* bundle update
* Update README
* Add basic animation mixins
* Add a fixed layout stylesheet

Gemfile.lock

@@ -1,13 +1,13 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    chunky_png (1.2.7)
+    chunky_png (1.2.9)
     compass (0.12.2)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
-    fssm (0.2.9)
-    sass (3.3.0.alpha.69)
+    fssm (0.2.10)
+    sass (3.2.12)
     sass-globbing (1.0.0)
       sass (>= 3.1)
     susy (1.0.9)

README.md

@@ -6,12 +6,11 @@ A starting point for a scalable, maintainable CSS architecture.
 - [SMACSS](http://smacss.com/) modules with [BEM](http://bem.info/method/) syntax for modifiers & subcomponents
 - A [Susy](http://susy.oddbird.net/) mobile-first responsive grid module
 - [Normalize.css](http://necolas.github.com/normalize.css/)
-- Standalone IE7, 8 & 9 stylesheets
+- Standalone stylesheet for IE < 9
 
-<blockquote>"But I hate Compass! Grrrr!"</blockquote>
-Settle petal. Just replace replace Compass & Susy with [Bourbon](http://bourbon.io/) & [Neat](http://neat.bourbon.io/) or your own alternatives and you'll be fine.
+You might choose to replace Compass & Susy with [Bourbon](http://bourbon.io/) & [Neat](http://neat.bourbon.io/) or your own alternatives.
 
-I wrote a [blog post](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/) explaining how we use this approach on the Envato marketplaces.
+I wrote a [blog post](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/) explaining how we use this approach on the Envato [marketplaces](http://themeforest.net).
 
 ## Getting started
 Assuming you have your own plans for asset compilation, you'll probably just want to drop the `stylesheets` folder into your usual stylesheets path (note the dependencies in the `Gemfile` and Compass configuration in `config.rb`).
@@ -22,9 +21,7 @@ That said, you can run this as a standalone Compass project if you wish.
 - `compass watch` or `compass compile` to compile CSS to `css/`
 
 ## Modules
-With the exception of [base element styles](https://github.com/bensmithett/style/tree/master/stylesheets/base) & [global state classes](https://github.com/bensmithett/style/blob/master/stylesheets/_state.sass), everything is a standalone, reusable module that doesn't change regardless of the context it appears in. 
-
-Grid classes and "unique" things like your site header & footer aren't special. IDs aren't welcome. Everything - **everything** - is a module. 
+With the exception of [base element styles](https://github.com/bensmithett/style/tree/master/stylesheets/base) & [global state classes](https://github.com/bensmithett/style/blob/master/stylesheets/_state.sass), everything is a module. Modules are standalone, reusable components that have no knowledge of their parent container. Their only dependencies are the app’s base styles.
 
 ### Simple module
 
@@ -52,12 +49,12 @@ Here's a slightly more complex module, `/stylesheets/modules/_fancy_widget.sass`
 .fancy-widget--is-loading
   background: url(spinner.gif)
   
-  // It's up to you whether you add a state class on top of the module class...
+  // It's up to you whether you add modifier classes on top of the module class...
   // <b class="fancy-widget fancy-widget--is-loading">
   // or @extend the original so you can replace it...
   // <b class="fancy-widget--is-loading">
   //
-  // I usually end up with a combination of both.
+  // I still haven't decided which approach I like better.
 
 // Sometimes it's easier to update a  single state attribute with JS instead of
 // faffing about with adding & removing state classes. That's ok.
@@ -77,34 +74,25 @@ Breakpoint-specific styles are kept right inside their module via Susy's [`at-br
 .my-module
   color: floralwhite
   
-  +at-breakpoint($tablet)
+  +at-breakpoint($tablet-and-above)
     color: plum
   
-  +at-breakpoint($desktop)
+  +at-breakpoint($desktop-and-above)
     color: burlywood
 ```
 
 ## Internet Explorer
-Like breakpoint-specific styles, IE-specific styles are kept with the selector they belong to, but are only output in a seperate `application-ie7.css` (or 8, or 9) stylesheet that is included with conditional comments ([hat tip](http://jakearchibald.github.com/sass-ie/)).
+Like breakpoint-specific styles, IE-specific styles are kept with the selector they belong to, but are only output in a seperate `application-lt-ie9.css` stylesheet that is included with conditional comments ([hat tip](http://jakearchibald.github.com/sass-ie/)).
 
 ```sass
 .my-module
   color: olive
   
   @if $lt-ie9
     position: relative
-    
-  @if $ie7
-    zoom: 1
-  
-  @if $ie8
-    color: lime  
-
-  @if $ie9
-    color: cadetblue
 ```
 
-In IE7 and 8, `at-breakpoint($tablet)` & `at-breakpoint($desktop)` blocks are scoped to a `.lt-ie9` class instead of being scoped to media queries. All other breakpoints (eg `$tablet-max`) are discarded.
+In `application-lt-ie9.sass` and `application-fixed.sass`, `$tablet-and-above` & `$desktop-and-above` breakpoint blocks are scoped to a `.fixed-layout` class instead of being scoped to media queries. All other breakpoints (eg `$tablet-and-below`) are discarded.
 
 ## Further reading
 

stylesheets/animations/_flash.sass

@@ -0,0 +1,11 @@
+// Example keyframe animation. Feel free to delete this.
+
++keyframes(flash)
+  0%
+    background-color: red
+
+  50%
+    background-color: goldenrod
+
+  100%
+    background-color: red

stylesheets/application-fixed.sass

@@ -0,0 +1,6 @@
+@charset "utf-8"
+$responsive: false
+@import application
+
+// Include this stylesheet on pages you don't want to be responsive.
+// If every page in your app is responsive, feel free to delete this.

stylesheets/application-lt-ie9.sass

@@ -1,3 +1,6 @@
 @charset "utf-8"
 $lt-ie9: true
 @import application
+
+// This stylesheet can be automatically included for IE < 9.
+// See index.html for an example.

stylesheets/application.sass

@@ -8,7 +8,7 @@
 
 // Yours
 @import functions/**/*
-// @import mixins/**/*
+@import mixins/**/*
 
 
 // Global config variables, colour palette, etc
@@ -27,6 +27,11 @@
 @import fonts
 
 
+// Named keyframe animations
+// ------------------------------------------------
+@import animations/**/*
+
+
 // Base element styles
 // ------------------------------------------------
 @import base/**/*

stylesheets/mixins/_animation.sass

@@ -0,0 +1,8 @@
+// -webkit- is the only required prefix now! http://caniuse.com/css-animation
+// Syntax reference for $animation argument:
+//    https://developer.mozilla.org/en-US/docs/Web/CSS/animation
+//    http://css-tricks.com/snippets/css/keyframe-animation-syntax/
+
+@mixin animation ( $animation )
+  -webkit-animation: $animation
+  animation: $animation

stylesheets/mixins/_keyframes.sass

@@ -0,0 +1,7 @@
+// -webkit- is the only required prefix now! http://caniuse.com/css-animation
+
+=keyframes($name)
+  @-webkit-keyframes #{$name}
+    @content
+  @keyframes #{$name}
+    @content

stylesheets/modules/_example_module_b.sass

@@ -14,4 +14,4 @@
     +pre(2)
     +span-columns(8)
     +post(2)
-    background-color: rgba(0, 0, 255, 0.5)
+    +animation(flash 1s infinite)

stylesheets/vendor/_normalize.scss

@@ -1,4 +1,4 @@
-/*! normalize.css v2.1.1 | MIT License | git.io/normalize */
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
 
 /* ==========================================================================
    HTML5 display definitions
@@ -44,10 +44,12 @@ audio:not([controls]) {
 }
 
 /**
- * Address styling not present in IE 8/9.
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
  */
 
-[hidden] {
+[hidden],
+template {
     display: none;
 }
 
@@ -79,6 +81,14 @@ body {
    Links
    ========================================================================== */
 
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
@@ -329,8 +339,8 @@ html input[disabled] {
 }
 
 /**
- * 1. Address box sizing set to `content-box` in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
  */
 
 input[type="checkbox"],