-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...
//
// or @extend the original so you can replace it...
//
//
- // 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,15 +74,15 @@ 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
@@ -93,18 +90,9 @@ Like breakpoint-specific styles, IE-specific styles are kept with the selector t
@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
diff --git a/index.html b/index.html
index 57d5411..98cee55 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,18 @@
-
-
+
+
+
+
Example
-
+
-
-
-
-
-
diff --git a/stylesheets/_config.sass b/stylesheets/_config.sass
index f781f55..9ca0672 100644
--- a/stylesheets/_config.sass
+++ b/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
diff --git a/stylesheets/animations/_flash.sass b/stylesheets/animations/_flash.sass
new file mode 100644
index 0000000..a0b3c64
--- /dev/null
+++ b/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
diff --git a/stylesheets/application-fixed.sass b/stylesheets/application-fixed.sass
new file mode 100644
index 0000000..650c3d9
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/stylesheets/application-ie7.sass b/stylesheets/application-ie7.sass
deleted file mode 100644
index 195794f..0000000
--- a/stylesheets/application-ie7.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "utf-8"
-$ie7: true
-@import application
diff --git a/stylesheets/application-ie8.sass b/stylesheets/application-ie8.sass
deleted file mode 100644
index b96d4e7..0000000
--- a/stylesheets/application-ie8.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "utf-8"
-$ie8: true
-@import application
diff --git a/stylesheets/application-ie9.sass b/stylesheets/application-ie9.sass
deleted file mode 100644
index de630ff..0000000
--- a/stylesheets/application-ie9.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "utf-8"
-$ie9: true
-@import application
diff --git a/stylesheets/application-lt-ie9.sass b/stylesheets/application-lt-ie9.sass
new file mode 100644
index 0000000..7bb13aa
--- /dev/null
+++ b/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.
diff --git a/stylesheets/application.sass b/stylesheets/application.sass
index ec2ceac..230fe6c 100644
--- a/stylesheets/application.sass
+++ b/stylesheets/application.sass
@@ -27,6 +27,11 @@
@import fonts
+// Named keyframe animations
+// ------------------------------------------------
+@import animations/**/*
+
+
// Base element styles
// ------------------------------------------------
@import base/**/*
diff --git a/stylesheets/base/_elements.sass b/stylesheets/base/_elements.sass
index 105da16..77179bd 100644
--- a/stylesheets/base/_elements.sass
+++ b/stylesheets/base/_elements.sass
@@ -8,7 +8,7 @@
// The basics
html
- font-family: $sans-font-stack
+ font-family: $helvetica
height: 100%
body
diff --git a/stylesheets/functions/_pxtoem.sass b/stylesheets/functions/_pxtoem.sass
index af7bb91..b8e089a 100644
--- a/stylesheets/functions/_pxtoem.sass
+++ b/stylesheets/functions/_pxtoem.sass
@@ -1,3 +1,3 @@
-@function pxtoem ($px, $basepx)
+@function pxtoem ($px, $basepx: $base-font-size)
@return ($px/$basepx) + 0em
\ No newline at end of file
diff --git a/stylesheets/mixins/_animation.sass b/stylesheets/mixins/_animation.sass
new file mode 100644
index 0000000..91ca8a0
--- /dev/null
+++ b/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
diff --git a/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass b/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass
deleted file mode 100644
index 14c9463..0000000
--- a/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass
+++ /dev/null
@@ -1,19 +0,0 @@
-// If you want to use Susy's grid mixins (eg span-columns) at a breakpoint other than the
-// default mobile one, you'll need to use this mixin instead of at-breakpoint to ensure the
-// correct grid settings are used.
-
-=at-breakpoint-with-grid-settings( $bp )
- @if $bp == "tablet"
- +at-breakpoint($bp-tablet)
- +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
- @content
-
- @else if $bp == "tablet-only"
- +at-breakpoint($bp-tablet-only)
- +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
- @content
-
- @else if $bp == "desktop"
- +at-breakpoint( $bp-desktop )
- +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding)
- @content
diff --git a/stylesheets/mixins/_keyframes.sass b/stylesheets/mixins/_keyframes.sass
new file mode 100644
index 0000000..bc8a69f
--- /dev/null
+++ b/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
diff --git a/stylesheets/modules/_example_module_b.sass b/stylesheets/modules/_example_module_b.sass
index e3fcd13..60994a9 100644
--- a/stylesheets/modules/_example_module_b.sass
+++ b/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)
diff --git a/stylesheets/modules/_grid.sass b/stylesheets/modules/_grid.sass
index bdb1ab5..db16bcc 100644
--- a/stylesheets/modules/_grid.sass
+++ b/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)
diff --git a/stylesheets/vendor/_normalize.scss b/stylesheets/vendor/_normalize.scss
index 977aa14..562891a 100644
--- a/stylesheets/vendor/_normalize.scss
+++ b/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"],