From f948f21be3f9e0bdc2cd4ec5ecfa18ae09153d14 Mon Sep 17 00:00:00 2001 From: Ben Smithett Date: Tue, 22 Oct 2013 15:26:28 +1100 Subject: [PATCH 1/2] Simpler Susy grid --- index.html | 20 ++---- stylesheets/_config.sass | 71 +++++++------------ stylesheets/application-ie8.sass | 3 - stylesheets/application-ie9.sass | 3 - ...ation-ie7.sass => application-lt-ie9.sass} | 2 +- stylesheets/base/_elements.sass | 2 +- stylesheets/functions/_pxtoem.sass | 2 +- stylesheets/modules/_example_module_b.sass | 16 ++--- stylesheets/modules/_grid.sass | 22 +++--- 9 files changed, 57 insertions(+), 84 deletions(-) delete mode 100644 stylesheets/application-ie8.sass delete mode 100644 stylesheets/application-ie9.sass rename stylesheets/{application-ie7.sass => application-lt-ie9.sass} (72%) 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 267d092..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 -$tablet: pxtoem(569px, $base-font-size) lt-ie9 -$tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size) -$tablet-max: 8 pxtoem(1024px, $base-font-size) -$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/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-ie7.sass b/stylesheets/application-lt-ie9.sass similarity index 72% rename from stylesheets/application-ie7.sass rename to stylesheets/application-lt-ie9.sass index 195794f..d1b95d3 100644 --- a/stylesheets/application-ie7.sass +++ b/stylesheets/application-lt-ie9.sass @@ -1,3 +1,3 @@ @charset "utf-8" -$ie7: true +$lt-ie9: true @import application 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/modules/_example_module_b.sass b/stylesheets/modules/_example_module_b.sass index 4899a9b..9b034bd 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($tablet) - +pre(1, $tablet-total-columns) - +span-columns(6, $tablet-total-columns) - +post(1, $tablet-total-columns) + +at-breakpoint($tablet-and-above) + +pre(1) + +span-columns(6) + +post(1) background-color: rgba(0, 255, 0, 0.5) - +at-breakpoint($desktop) - +pre(2, $desktop-total-columns) - +span-columns(8, $desktop-total-columns) - +post(2, $desktop-total-columns) + +at-breakpoint($desktop-and-above) + +pre(2) + +span-columns(8) + +post(2) background-color: rgba(0, 0, 255, 0.5) diff --git a/stylesheets/modules/_grid.sass b/stylesheets/modules/_grid.sass index 4a69771..16fd61b 100644 --- a/stylesheets/modules/_grid.sass +++ b/stylesheets/modules/_grid.sass @@ -11,14 +11,16 @@ +container +susy-grid-background - +at-breakpoint($tablet) - +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding) - +container - +susy-grid-background + +at-breakpoint($tablet-and-above) + +container + +susy-grid-background - +at-breakpoint($desktop) - +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding) - +container - +susy-grid-background - @if $lt-ie9 - width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8 + +at-breakpoint($desktop-and-above) + +container + +susy-grid-background + @if $lt-ie9 + // Force static width for IE7+8 + width: pxtoem(1024px) + @else + // Constrain the fluid grid to a max width + max-width: pxtoem(1024px) From 995cf168361cc53fe712ffa757240be4b48bd173 Mon Sep 17 00:00:00 2001 From: Ben Smithett Date: Tue, 29 Oct 2013 00:25:21 +1100 Subject: [PATCH 2/2] A bunch of updates: * Update Normalize * bundle update * Update README * Add basic animation mixins * Add a fixed layout stylesheet --- Gemfile.lock | 6 ++-- README.md | 32 +++++++--------------- stylesheets/animations/_flash.sass | 11 ++++++++ stylesheets/application-fixed.sass | 6 ++++ stylesheets/application-lt-ie9.sass | 3 ++ stylesheets/application.sass | 7 ++++- stylesheets/mixins/.gitkeep | 0 stylesheets/mixins/_animation.sass | 8 ++++++ stylesheets/mixins/_keyframes.sass | 7 +++++ stylesheets/modules/_example_module_b.sass | 2 +- stylesheets/vendor/_normalize.scss | 20 ++++++++++---- 11 files changed, 70 insertions(+), 32 deletions(-) create mode 100644 stylesheets/animations/_flash.sass create mode 100644 stylesheets/application-fixed.sass delete mode 100644 stylesheets/mixins/.gitkeep create mode 100644 stylesheets/mixins/_animation.sass create mode 100644 stylesheets/mixins/_keyframes.sass diff --git a/Gemfile.lock b/Gemfile.lock index 6e7650b..75d6f87 100644 --- a/Gemfile.lock +++ b/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) diff --git a/README.md b/README.md index 03ad07c..22c356b 100644 --- a/README.md +++ b/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 -
"But I hate Compass! Grrrr!"
-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/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-lt-ie9.sass b/stylesheets/application-lt-ie9.sass index d1b95d3..7bb13aa 100644 --- a/stylesheets/application-lt-ie9.sass +++ b/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. diff --git a/stylesheets/application.sass b/stylesheets/application.sass index cfab821..230fe6c 100644 --- a/stylesheets/application.sass +++ b/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/**/* diff --git a/stylesheets/mixins/.gitkeep b/stylesheets/mixins/.gitkeep deleted file mode 100644 index e69de29..0000000 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/_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 9b034bd..60994a9 100644 --- a/stylesheets/modules/_example_module_b.sass +++ b/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) 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"],