From 995cf168361cc53fe712ffa757240be4b48bd173 Mon Sep 17 00:00:00 2001 From: Ben Smithett Date: Tue, 29 Oct 2013 00:25:21 +1100 Subject: [PATCH] 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"],