Merge pull request #3 from bensmithett/tidy-grid

Lots of updates

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
 

index.html

@@ -1,24 +1,18 @@
 <!DOCTYPE html>
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if lte IE 8]> <html class="no-js lt-ie9 fixed-layout"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     <title>Example</title>
 
-    <!--[if gt IE 9]><!-->
+    <!--[if gt IE 8]><!-->
       <link rel="stylesheet" href="css/application.css" />
     <!--<![endif]-->
 
-    <!--[if IE 9]>
-      <link rel="stylesheet" href="css/application-ie9.css" />
-    <![endif]-->
-
-    <!--[if IE 8]>
-      <link rel="stylesheet" href="css/application-ie8.css" />
-    <![endif]-->
-
-    <!--[if IE 7]>
-      <link rel="stylesheet" href="css/application-ie7.css" />
+    <!--[if lte IE 8]>
+      <link rel="stylesheet" href="css/application-lt-ie9.css" />
     <![endif]-->
   </head>
 

stylesheets/_config.sass

@@ -1,15 +1,14 @@
-// IE version variables
+// Responsive
 // ------------------------------------------------
-$ie7: false !default
-$ie8: false !default
-$ie9: false !default
-$lt-ie9: $ie7 or $ie8
+$responsive: true !default
 
-// Compass cross-browser support configuration
-// http://compass-style.org/reference/compass/support/
+
+// Cross browser support settings
+// ------------------------------------------------
+$lt-ie9: false !default
 $legacy-support-for-ie6: false
-$legacy-support-for-ie7: $ie7
-$legacy-support-for-ie8: $ie8
+$legacy-support-for-ie7: $lt-ie9
+$legacy-support-for-ie8: $lt-ie9
 
 
 // Vertical rhythm settings
@@ -27,43 +26,27 @@ $green: #20e320
 
 // Font stacks
 // ------------------------------------------------
-$sans-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif
 
 
-// Susy: grid container settings
-// ------------------------------------------------
-$container-style: magic
-
-// Mobile first default grid settings
-// http://gridcalculator.dk/#/568/4/20/10
+// Susy
+// ------------------------
+// Grid settings
+$container-style: fluid
 $total-columns: 4
-$column-width: pxtoem(122px, $base-font-size)
-$gutter-width: pxtoem(20px, $base-font-size)
-$grid-padding: pxtoem(10px, $base-font-size)
-
-// Tablet grid settings
-// http://gridcalculator.dk/#/1024/8/20/10
-$tablet-total-columns: 8
-$tablet-column-width: pxtoem(108px, $base-font-size)
-$tablet-gutter-width: pxtoem(20px, $base-font-size)
-$tablet-grid-padding: pxtoem(10px, $base-font-size)
+$column-width: pxtoem(65px)
+$gutter-width: pxtoem(20px)
+$grid-padding: pxtoem(10px)
 
-// Desktop grid settings
-// http://gridcalculator.dk/#/1024/12/16/10
-$desktop-total-columns: 12
-$desktop-column-width: pxtoem(69px, $base-font-size)
-$desktop-gutter-width: pxtoem(16px, $base-font-size)
-$desktop-grid-padding: pxtoem(10px, $base-font-size)
-
-
-// Susy: responsive breakpoint settings
-// ------------------------------------------------
 // Breakpoints
-$bp-tablet:      pxtoem(569px, $base-font-size) lt-ie9
-$bp-tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size)
-$bp-tablet-max:  8 pxtoem(1024px, $base-font-size)
-$bp-desktop:     pxtoem(1025px, $base-font-size) lt-ie9
-
-// In IE7 & 8 at-breakpoint() blocks are scoped to a .lt-ie9 class instead of desktop or tablet media queries.
-$breakpoint-media-output: not $lt-ie9
-$breakpoint-ie-output: $lt-ie9
+$phone-only: 4 pxtoem(568px)
+$tablet-and-above: pxtoem(569px) 8 fixed-layout
+$tablet-only: pxtoem(569px) 8 pxtoem(1024px)
+$tablet-and-below: 8 pxtoem(1024px)
+$desktop-and-above: pxtoem(1025px) 12 fixed-layout
+
+// Where `at-breakpoint` is used with one of the `fixed-layout` breakpoints above,
+// the block will be scoped to a `fixed-layout` class instead of being scoped to 
+// media queries.
+$breakpoint-media-output: $responsive and not $lt-ie9
+$breakpoint-ie-output: $lt-ie9 or not $responsive

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

@@ -0,0 +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

@@ -27,6 +27,11 @@
 @import fonts
 
 
+// Named keyframe animations
+// ------------------------------------------------
+@import animations/**/*
+
+
 // Base element styles
 // ------------------------------------------------
 @import base/**/*

stylesheets/base/_elements.sass

@@ -8,7 +8,7 @@
 
 // The basics
 html
-  font-family: $sans-font-stack
+  font-family: $helvetica
   height: 100%
 
 body

stylesheets/functions/_pxtoem.sass

@@ -1,3 +1,3 @@
-@function pxtoem ($px, $basepx)
+@function pxtoem ($px, $basepx: $base-font-size)
   @return ($px/$basepx) + 0em
 

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

@@ -4,14 +4,14 @@
   +post(1)
   background-color: rgba(255, 0, 0, 0.5)
 
-  +at-breakpoint-with-grid-settings("tablet")
+  +at-breakpoint($tablet-and-above)
     +pre(1)
     +span-columns(6)
     +post(1)
     background-color: rgba(0, 255, 0, 0.5)
 
-  +at-breakpoint-with-grid-settings("desktop")
+  +at-breakpoint($desktop-and-above)
     +pre(2)
     +span-columns(8)
     +post(2)
-    background-color: rgba(0, 0, 255, 0.5)
+    +animation(flash 1s infinite)

stylesheets/modules/_grid.sass

@@ -11,12 +11,16 @@
   +container
   +susy-grid-background
 
-  +at-breakpoint-with-grid-settings("tablet")
+  +at-breakpoint($tablet-and-above)
     +container
     +susy-grid-background
 
-  +at-breakpoint-with-grid-settings("desktop")
+  +at-breakpoint($desktop-and-above)
     +container
     +susy-grid-background
     @if $lt-ie9
-      width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8
+      // Force static width for IE7+8
+      width: pxtoem(1024px)
+    @else
+      // Constrain the fluid grid to a max width
+      max-width: pxtoem(1024px)