diff --git a/CHANGES.md b/CHANGES.md index 8ae99be..89c7303 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,4 +1,5 @@ + 0.0.0: Initial Release + 1.0.0: Updates for *"-sides", this was originally missing in the Initial Release. Also updated the initial size from 40px to 20px, for the example. + 1.1.0: Updates to documentation and a few whitespace spots removed. Moved media query to top of the file. Introduced official versions and branches. Welcome `v1.1` -+ 2.0.0: Refactor of code, addition of %selector-names for @extend functionality, BEM naming convention, updates to documentation \ No newline at end of file ++ 2.0.0: Refactor of code, addition of %selector-names for @extend functionality, BEM naming convention, updates to documentation ++ 2.1.0: Variables moved into "spacing.scss" and removal of "_variables.scss" \ No newline at end of file diff --git a/README.md b/README.md index 5812b29..977b8b1 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -OOCSS Spacing [v2.0.0] +OOCSS Spacing [v2.1.0] =============================== Spacing is one of the most fundamental pieces of a website design, using this starter kit will help you maintain consistent spacing throughout your project. This is a [Sass](http://sass-lang.com/) file for creating global spacing for your projects. The repository includes a compressed compiled version in CSS. @@ -13,7 +13,7 @@ Spacing is one of the most fundamental pieces of a website design, using this st --- ### Sass Option -Include "space.scss" in your project and adjust variables within "_variables.scss". +Include "space.scss" in your project and adjust variables at the top of the Sass file. It is recommended to change the file to a [partial](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials) and `@import "spacing"` in your main output file. diff --git a/VERSION.md b/VERSION.md index b5f4143..65ce398 100644 --- a/VERSION.md +++ b/VERSION.md @@ -1,4 +1,5 @@ + 0.0.0 - 01/31/13 + 1.0.0 - 02/14/13 + 1.1.0 - 04/15/13 -+ 2.0.0 - 10/30/13 \ No newline at end of file ++ 2.0.0 - 10/30/13 ++ 2.1.0 - 11/05/13 \ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss deleted file mode 100644 index 95db3c2..0000000 --- a/assets/scss/_variables.scss +++ /dev/null @@ -1,56 +0,0 @@ -/* ========================================================================== - Global Variables - ========================================================================== */ - -/* - * Global Spaces - * Variables used in "spacing.scss" - */ -$default-space: 20px; -$default-space--half: $default-space / 2; -$default-space--smaller: $default-space--half; -$default-space--smallest: 5px; -$default-space--2x: $default-space * 2; -$default-space__breakpoint: 400px; // Breakpoint value for overwriting `$default-space` - -$include-margin: true; // Include margin-top, margin-right, margin-bottom, margin-left -$include-margin-top: true; // Include margin-top -$include-margin-right: true; // Include margin-right -$include-margin-bottom: true; // Include margin-bottom -$include-margin-left: true; // Include margin-left - -$include-padding: true; // Include padding-top, padding-right, padding-bottom, padding-left -$include-padding-top: true; // Include padding-top -$include-padding-right: true; // Include padding-right -$include-padding-bottom: true; // Include padding-bottom -$include-padding-left: true; // Include padding-left - -$include-half: true; // Include `$default-space / 2` for padding and margin -$include-half-margin: true; // Include `$default-space / 2` for margin -$include-half-padding: true; // Include `$default-space / 2` for padding - -$include-smaller: true; // Include `$default-space-smaller` for padding and margin -$include-smaller-margin: true; // Include `$default-space-smaller` for margin -$include-smaller-padding: true; // Include `$default-space-smaller` for padding - -$include-smallest: true; // Include `$default-space-smallest` for padding and margin -$include-smallest-margin: true; // Include `$default-space-smallest` for margin -$include-smallest-padding: true; // Include `$default-space-smallest` for padding - -$include-2x: true; // Include `$default-space * 2x` for padding and margin -$include-2x-margin: true; // Include `$default-space * 2x` for margin -$include-2x-padding: true; // Include `$default-space * 2x`for padding - -$include-verticals: true; // Include margin-top, margin-bottom, padding-top, and padding-bottom spaces -$include-verticals-margin: true; // Include margin-top and margin-bottom spaces -$include-verticals-padding: true; // Include padding-top and padding-bottom spaces -$include-sides: true; // Include margin-left, margin-right, padding-left, and padding-right spaces -$include-sides-margin: true; // Include margin-left and margin-right spaces -$include-sides-padding: true; // Include padding-left and padding-right spaces - -$include-breakpoint: true; // Compile the media-query at `$default-space__breakpoint` tor educe default spaces in half for smaller viewports - - - - - diff --git a/assets/scss/spacing.scss b/assets/scss/spacing.scss index 7a3fb99..70061d1 100755 --- a/assets/scss/spacing.scss +++ b/assets/scss/spacing.scss @@ -1,16 +1,64 @@ -@import "variables"; - /*! - * OOCSS Spacing v2.0.0 - * https://github.com/kevinmack18/SASS-Margin-and-Padding-Starter + * OOCSS Spacing v2.1.0 + * Github: https://github.com/kevinmack18/SASS-Margin-and-Padding-Starter + * Demo: http://kevinmack18.github.io/SASS-Margin-and-Padding-Starter/ * * Released under the MIT license * https://github.com/kevinmack18/SASS-Margin-and-Padding-Starter/blob/master/LICENSE * - * Date: 2013-10-30 + * Date: 2013-11-05 */ +/* ========================================================================== + Spacing Variables + ========================================================================== */ + +$default-space: 20px; +$default-space--half: $default-space / 2; +$default-space--smaller: $default-space--half; +$default-space--smallest: 5px; +$default-space--2x: $default-space * 2; +$default-space__breakpoint: 400px; // Breakpoint value for overwriting `$default-space` + +$include-margin: true; // Include margin-top, margin-right, margin-bottom, margin-left +$include-margin-top: true; // Include margin-top +$include-margin-right: true; // Include margin-right +$include-margin-bottom: true; // Include margin-bottom +$include-margin-left: true; // Include margin-left + +$include-padding: true; // Include padding-top, padding-right, padding-bottom, padding-left +$include-padding-top: true; // Include padding-top +$include-padding-right: true; // Include padding-right +$include-padding-bottom: true; // Include padding-bottom +$include-padding-left: true; // Include padding-left + +$include-half: true; // Include `$default-space / 2` for padding and margin +$include-half-margin: true; // Include `$default-space / 2` for margin +$include-half-padding: true; // Include `$default-space / 2` for padding + +$include-smaller: true; // Include `$default-space-smaller` for padding and margin +$include-smaller-margin: true; // Include `$default-space-smaller` for margin +$include-smaller-padding: true; // Include `$default-space-smaller` for padding + +$include-smallest: true; // Include `$default-space-smallest` for padding and margin +$include-smallest-margin: true; // Include `$default-space-smallest` for margin +$include-smallest-padding: true; // Include `$default-space-smallest` for padding + +$include-2x: true; // Include `$default-space * 2x` for padding and margin +$include-2x-margin: true; // Include `$default-space * 2x` for margin +$include-2x-padding: true; // Include `$default-space * 2x`for padding + +$include-verticals: true; // Include margin-top, margin-bottom, padding-top, and padding-bottom spaces +$include-verticals-margin: true; // Include margin-top and margin-bottom spaces +$include-verticals-padding: true; // Include padding-top and padding-bottom spaces +$include-sides: true; // Include margin-left, margin-right, padding-left, and padding-right spaces +$include-sides-margin: true; // Include margin-left and margin-right spaces +$include-sides-padding: true; // Include padding-left and padding-right spaces + +$include-breakpoint: true; // Compile the media-query at `$default-space__breakpoint` tor educe default spaces in half for smaller viewports + + /* ========================================================================== @mixin definitions ==========================================================================