susy 1.0.rc.4 → 1.0

data/CHANGELOG.mkdn

@@ -1,74 +1,84 @@
 Susy Changelog
 ==============
 
-v1.0 [UNRELEASED]
------------------
+v1.0 [Aug 14, 2012]
+-------------------
 
 This release is loaded with new features, but don't let that fool you. Susy
 just became shockingly simple to use. See the [website][site] for details.
 
-Note that the gem name has changed from `compass-susy-plugin` to `susy`.
+The gem name has changed from `compass-susy-plugin` to `susy`.
+First uninstall the old gem, then install the new one.
+If you have both gems installed, you will get errors.
 
 [site]: http://susy.oddbird.net/
 
-New Features:
+Semantics:
 
-* `omega` can now be set directly through the `columns` mixin for much
-  more compact output.
-* Create responsive grid break-points using `at-breakpoint` and `layout`.
-* `container` mixin now accepts one or more grids/breakpoints as a shortcut.
-* All mixins respect your `$legacy-support-for-ie` settings.
-* The `space` function can be used anywhere you need column+gutter math.
-* `push`, `pull`, `pre`, `post`, and `squish` add margin left/right shortcuts.
-* The `nth-omega` mixin can be used to set omega on any nth-child, nth-of-type,
-  first, last, or only element - using pseudo-class selectors.
-* `remove-omega` and `remove-nth-omega` will remove the omega-specific styles
-  from an element, returning it to the regular grid flow.
-* `$container-width` and `$container-style` settings will override the width
-  and type (magic, fluid, fixed, static, etc) of your grid container.
-* `$breakpoint-media-output` and `$breakpoint-media-output` allow you to turn
-  on and off the different outputs from `at-breakpoint`.
-  This is useful when you have IE-overrides living in a file of their own.
-* Unit tests live in the `/test/` directory.
-
-Changed API:
-
-* `$total-cols` => `$total-columns`
-* `$col-width` => `$column-width`
-* `$side-gutter-width` => `$grid-padding`
-* `@include un-column` & `@include reset-column` => `@include reset-columns`
-* `@include columns` => `@include span-columns`
+We re-arranged the code
+in order to make the syntax simpler and more consistent:
 
-Removed:
+* `$total-cols` is now `$total-columns`.
+* `$col-width` is now `$column-width`.
+* `$side-gutter-width` is now `$grid-padding`
+  and gets applied directly to the grid container.
+* `un-column` & `reset-column` mixins have merged into `reset-columns`.
+* `columns` has been renamed `span-columns` to resolve the conflict with CSS3 columns.
+  See other improvements to span-columns below.
 
-* `@include alpha` is no longer needed.
-* `@include omega` no longer accepts the `$context` argument.
-* `@include full` can be replaced by a simple `clear: both;` when needed.
-* `side-gutter()` is no longer needed. Use `$grid-padding` instead.
+We also removed several bothersome requirements:
 
-Other:
+* The `alpha` mixin is no longer needed. Ever.
+* The `omega` no longer takes a `$context` argument.
+* `full` has been removed entirely.
+  Elements will be full-width by default.
+  You can add `clear: both;` back in as needed.
+* `side-gutter()` is no longer needed.
+  You can use the `$grid-padding` setting directly.
 
-* Fix bug in susy-background-grid for fluid sites.
-* Fix minor bug with repeated 'display' properties.
-* Lower Compass dependency to 0.12.2
-* Add Sass dependency at 3.2.0.alpha.247
+Upgrade:
 
-### Upgrade:
+That's all you need in order to upgrade from Susy 0.9.
 
-1. Uninstall `compass-susy-plugin` and install `susy` in it's place.
-2. Find and replace the 5 simple "Changed API's" listed above.
-3. Remove the `$context` argument from all `omega` mixins.
-4. Remove any mention of `alpha` and `full` in your code.
-   * Replace `full` with `clear: both;` where necessary.
-5. Remove any mention of `side-gutter()`.
-   * This may require some refactoring, depending on your uses.
-6. [Optional] Any time 'columns' and 'omega' are declared in the same block,
-   they can now be joined together. `@include columns(3); @include omega();`
-   can become `@include columns(3 omega)`.
+1. Uninstall and re-install the gem.
+2. Find and replace the semantic changes listed above.
 
 You're done! Stop worrying about all that "nested vs. root" bullshit,
 and start playing with the new toys!
 
+If you use the `$from` directional arguments
+directly in the `span-columns` mixin,
+there may be one more change to make.
+See below:
+
+New Features:
+
+* `span-columns` supports new features:
+  - "omega" can be applied directly through the `$columns` argument.
+  - Internal padding can be added through the `$padding` argument.
+  - This pushes the `$from` argument from third position into fourth.
+* `at-breakpoint` allows you to change layouts at media breakpoints.
+* `container` accepts multiple media-layout combinations as a shortcut.
+* `layout` allows you to use a different layout at any time.
+* `with-grid-settings` allows you to change any or all grid settings.
+* `set-container-width` does what it says, without the other container code.
+* `$breakpoint-media-output`, `$breakpoint-ie-output`, and `$breakpoint-raw-output`
+  settings help manage the different outputs from `at-breakpoint`
+  when you have IE-overrides living in a file of their own.
+* `border-box-sizing` will  apply the popular `* { box-sizing: border-box }`
+  universal box-model fix, as well as changing the Susy `$border-box-model` setting for you,
+  so Susy knows to adjust some math.
+* The `space()` function can be used anywhere you need column+gutter math.
+* `push`, `pull`, `pre`, `post`, and `squish` mixins help manage margins.
+* use the `nth-omega` mixin to set omega on any nth-child, nth-of-type,
+  first, last, or only element.
+* `remove-omega` and `remove-nth-omega` will remove
+  the omega-specific styles from an element.
+* `$container-width` will override the width of your container
+  with any arbitrary length.
+* `$container-style` will override the type of grid container
+  (magic, fluid, fixed, static, etc) to use.
+
 v0.9 [Apr 25 2011]
 ------------------
 

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2011, Eric Meyer
+Copyright (c) 2012, Eric Meyer
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

data/README.md

@@ -27,15 +27,6 @@ we just do the math and get out of your way.
 - [Sites using Susy](http://susy.oddbird.net/sites-using-susy/)
 - [Twitter @CompassSusy](http://twitter.com/compasssusy/)
 
-## Why is 1.0 a release candidate?
-
-Susy 1.0 is stable and tested, all the features are in,
-and we're ready to launch.
-But our 1.0 depends on unreleased Sass features.
-We think those features are stable as well,
-and we'll do what it takes to stay on top of any changes they make,
-but we can't officially land until they do.
-
 ## Contributing
 
 We love contributions,

data/Rakefile

@@ -10,7 +10,7 @@ begin
     p.url = "http://susy.oddbird.net/"
     p.author = "Eric Meyer"
     p.email = "eric@oddbird.net"
-    p.dependencies = ["compass >=0.12.2", "sass >=3.2.0.alpha.247"]
+    p.dependencies = ["compass >=0.12.2", "sass >=3.2.0"]
   end
 
 rescue LoadError => boom

data/VERSION

@@ -1 +1 @@
-1.0.rc.4
+1.0

data/sass/susy/_functions.scss

@@ -18,7 +18,11 @@ $browser-default-font-size-pt       : 12pt;
 @function columns-width(
   $columns  : $total-columns
 ) {
-  @return ($columns * $column-width) + (ceil($columns - 1) * $gutter-width);
+  @if round($columns) != $columns {
+    @warn "Susy works best with integer column-spans.
+    For partial-columns, you may need to finesse the math by hand using functions directly.";
+  }
+  @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
 }
 
 // Return the full outer width of a Container element.
@@ -36,7 +40,8 @@ $browser-default-font-size-pt       : 12pt;
 @function column(
   $context : $total-columns
 ) {
-  @return percentage($column-width / columns-width($context));
+  @return relative-width($column-width, $context);
+
 }
 
 // Return the percentage width of multiple 'columns' in a given 'context'.
@@ -47,7 +52,7 @@ $browser-default-font-size-pt       : 12pt;
   $columns,
   $context : $total-columns
 ) {
-  @return percentage(columns-width($columns) / columns-width($context));
+  @return relative-width(columns-width($columns), $context);
 }
 
 // Return the percentage width of a single gutter in a given 'context'.
@@ -56,7 +61,18 @@ $browser-default-font-size-pt       : 12pt;
 @function gutter(
   $context : $total-columns
 ) {
-  @return percentage($gutter-width / columns-width($context));
+  @return relative-width($gutter-width, $context);
+}
+
+// Return the percentage width of a given value in a given 'context'.
+//
+//  $width    : Any given width value.
+//  $context  : The grid context in columns, if nested.
+@function relative-width(
+  $width,
+  $context : $total-columns
+) {
+  @return percentage($width / columns-width($context));
 }
 
 // Return the total space occupied by multiple columns and associated gutters.
@@ -68,7 +84,7 @@ $browser-default-font-size-pt       : 12pt;
   $columns,
   $context : $total-columns
 ) {
-  @return columns($columns, $context) + gutter($context);
+  @return columns($columns, $context) + if($columns >= 1, gutter($context), 0);
 }
 
 // Accept a list including column-count and (optional) position.

data/sass/susy/_grid.scss

@@ -2,6 +2,7 @@
 // Imports
 
 @import "compass/utilities/general/clearfix";
+@import "compass/css3/box-sizing";
 
 // ---------------------------------------------------------------------------
 // Border-Box Sizing
@@ -94,17 +95,40 @@
 // $context : [optional] The context (columns spanned by parent).
 //          : Context is required on any nested elements.
 //          : Context MUST NOT be declared on a root element.
+// $padding : [optional] Padding applied to the inside of individual grid columns.
+//          : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px)
+//          : Padding values are applied only on the horizontal axis in from-to order
 // $from    : The start direction of your layout (e.g. 'left' for ltr languages)
+
 @mixin span-columns(
   $columns,
-  $context  : $total-columns,
-  $from     : $from-direction
+  $context       : $total-columns,
+  $padding       : false,
+  $from          : $from-direction
 ) {
   $to       : opposite-position($from);
   $pos      : split-columns-value($columns,position);
   $cols     : split-columns-value($columns,columns);
+  $pad-from : relative-width(0 * $gutter-width, $context);
+  $pad-to   : relative-width(0 * $gutter-width, $context);
+
+  @if $padding != false {
+    $pad-from : nth($padding, 1);
+
+    @if length($padding) > 1 {
+      $pad-to: nth($padding, 2);
+    } @else {
+      $pad-to: $pad-from;
+    }
+
+    $pad-from : relative-width($pad-from, $context);
+    $pad-to   : relative-width($pad-to, $context);
+
+    padding-#{$from}: $pad-from;
+    padding-#{$to}: $pad-to;
+  }
 
-  width: columns($cols, $context);
+  width: columns($cols, $context) - if($border-box-sizing, 0, $pad-to + $pad-from);
 
   @if ($pos == 'omega') {
     @include omega($from);

data/sass/susy/_settings.scss

@@ -9,7 +9,7 @@ $total-columns      : 12              !default;
 $column-width       : 4em             !default;
 $gutter-width       : 1em             !default;
 
-// Add padding to your grid.
+// Padding on the left and right of a Grid Container.
 $grid-padding       : $gutter-width   !default;
 
 // ---------------------------------------------------------------------------

data/susy.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{susy}
-  s.version = "1.0.rc.4"
+  s.version = "1.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = %q{2012-08-02}
+  s.date = %q{2012-08-14}
   s.description = %q{Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to. We don't design your site or dictate your markup, we just do the math and get out of your way.}
   s.email = %q{eric@oddbird.net}
   s.extra_rdoc_files = ["CHANGELOG.mkdn", "LICENSE.txt", "README.md", "lib/susy.rb"]
@@ -24,13 +24,13 @@ Gem::Specification.new do |s|
 
     if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
       s.add_runtime_dependency(%q<compass>, [">= 0.12.2"])
-      s.add_runtime_dependency(%q<sass>, [">= 3.2.0.alpha.247"])
+      s.add_runtime_dependency(%q<sass>, [">= 3.2.0"])
     else
       s.add_dependency(%q<compass>, [">= 0.12.2"])
-      s.add_dependency(%q<sass>, [">= 3.2.0.alpha.247"])
+      s.add_dependency(%q<sass>, [">= 3.2.0"])
     end
   else
     s.add_dependency(%q<compass>, [">= 0.12.2"])
-    s.add_dependency(%q<sass>, [">= 3.2.0.alpha.247"])
+    s.add_dependency(%q<sass>, [">= 3.2.0"])
   end
 end

data/test/css/grid.css

@@ -41,6 +41,16 @@
   display: inline;
 }
 
+.span-columns-with-padding {
+  padding-left: 1.69492%;
+  padding-right: 3.38983%;
+  width: 44.0678%;
+  float: right;
+  margin-right: 0;
+  #margin-left: -1em;
+  display: inline;
+}
+
 .reset-columns {
   float: none;
   width: auto;
@@ -74,3 +84,36 @@
   margin-right: 1.69492%;
   #margin-left: 0;
 }
+
+/* ---------------------------------------------------------------------------
+/* Border-Box Sizing */
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.container {
+  *zoom: 1;
+  max-width: 61em;
+  _width: 61em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.container:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.span-columns-with-padding {
+  padding-left: 1.69492%;
+  padding-right: 3.38983%;
+  width: 49.15254%;
+  float: right;
+  margin-right: 0;
+  #margin-left: -1em;
+  display: inline;
+}

data/test/scss/grid.scss

@@ -18,6 +18,10 @@
   @include span-columns(6 omega,12);
 }
 
+.span-columns-with-padding {
+  @include span-columns(6 omega,12,1 * $gutter-width 2 * $gutter-width);
+}
+
 .reset-columns {
   @include reset-columns;
 }
@@ -37,3 +41,19 @@
 .remove-nth-omega {
   @include remove-nth-omega;
 }
+
+/* ---------------------------------------------------------------------------
+/* Border-Box Sizing */
+
+@include border-box-sizing;
+
+.container {
+  @include container;
+}
+
+.span-columns-with-padding {
+  @include span-columns(6 omega,12,1 * $gutter-width 2 * $gutter-width);
+}
+
+// Reset $border-box-sizing so it doesn't have other effects
+$border-box-sizing: false;

metadata

@@ -1,13 +1,11 @@
 --- !ruby/object:Gem::Specification 
 name: susy
 version: !ruby/object:Gem::Version 
-  prerelease: true
+  prerelease: false
   segments: 
   - 1
   - 0
-  - rc
-  - 4
-  version: 1.0.rc.4
+  version: "1.0"
 platform: ruby
 authors: 
 - Eric Meyer
@@ -15,7 +13,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-08-02 00:00:00 -06:00
+date: 2012-08-14 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -43,9 +41,7 @@ dependencies:
         - 3
         - 2
         - 0
-        - alpha
-        - 247
-        version: 3.2.0.alpha.247
+        version: 3.2.0
   type: :runtime
   version_requirements: *id002
 description: Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to. We don't design your site or dictate your markup, we just do the math and get out of your way.