susy 1.0.4 → 1.0.5.alpha.0

data/Manifest

@@ -14,6 +14,7 @@ sass/susy/_media.scss
 sass/susy/_padding.scss
 sass/susy/_settings.scss
 sass/susy/_support.scss
+sass/susy/_units.scss
 susy.gemspec
 templates/project/_base.scss
 templates/project/manifest.rb

data/VERSION

@@ -1 +1 @@
-1.0.4
+1.0.5.alpha.0

data/sass/_susy.scss

@@ -3,6 +3,7 @@
 
 // temporary
 @import "susy/support";
+@import "susy/units";
 
 // permanent
 @import "susy/settings";

data/sass/susy/_functions.scss

@@ -9,6 +9,8 @@ $browser-default-font-size-px       : 16px;
 $browser-default-font-size-percent  : 100%;
 $browser-default-font-size-pt       : 12pt;
 
+$rem-with-px-fallback               : true !default;
+
 // ---------------------------------------------------------------------------
 // Grid Functions
 
@@ -173,28 +175,34 @@ $browser-default-font-size-pt       : 12pt;
 //
 // $ems         : The initial value to be converted.
 // $font-size   : The current font-size in.
-@function absolute-ems(
+@function base-ems(
   $ems,
   $font-size: $base-font-size
 ){
-  $unit: unit($font-size);
+  $font-size  : if(unit($ems) == 'rem', $base-font-size, $font-size);
+  $unit       : unit($font-size);
+  $mult       : $ems / ($ems * 0 + 1);
+
   @if $unit == 'px' {
-    @return $font-size / $browser-default-font-size-px * $ems;
+    @return $font-size / $browser-default-font-size-px * $mult * 1em;
   }
   @else if $unit == '%' {
-    @return $font-size / $browser-default-font-size-percent * $ems;
+    @return $font-size / $browser-default-font-size-percent * $mult * 1em;
   }
   @else if $unit == 'em' {
-    @return $font-size / 1em * $ems;
+    @return $font-size / 1em * $mult * 1em;
   }
   @else if $unit == 'pt' {
-    @return $font-size / $browser-default-font-size-pt * $ems;
+    @return $font-size / $browser-default-font-size-pt * $mult * 1em;
   }
   @else {
     @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
   }
 }
 
+// This name will be deprecated...
+@function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); }
+
 // Return a length, after any em-values have been sent through absolute-ems().
 //
 // $length      : The length value to be checked and adjusted if necessary.
@@ -204,7 +212,7 @@ $browser-default-font-size-pt       : 12pt;
   $font-size: $base-font-size
 ){
   @if $length {
-    @if (unit($length) == 'em') {
+    @if (unit($length) == 'em') or (unit($length) == 'rem') {
       $length: absolute-ems($length,$font-size);
     }
   }

data/sass/susy/_grid.scss

@@ -26,13 +26,19 @@
   $width: container-outer-width($columns);
 
   @if $container-style == 'static' {
-    width: $width;
+    @include if-rem(width, $width);
   } @else {
     @if $container-style == 'fluid' {
-      width: if(unit($width) == '%', $width, auto);
+      @include if-rem(width, if(unit($width) == '%', $width, auto));
     } @else {
-      max-width: $width;
-      @if $legacy-support-for-ie6 { _width: $width; }
+      @include if-rem(max-width, $width);
+      @if $legacy-support-for-ie6 {
+        @if unit($width) == 'rem' {
+          _width: round(convert-length($width, px));
+        } @else {
+          _width: $width;
+        }
+      }
     }
   }
 }
@@ -45,8 +51,9 @@
 ){
   @include pie-clearfix;
   @include set-container-width($columns);
+  @include if-rem(padding-left, $grid-padding);
+  @include if-rem(padding-right, $grid-padding);
   margin: { left: auto; right: auto; }
-  padding: { left: $grid-padding; right: $grid-padding; }
 }
 
 // Set one or more layouts on a grid-containing element at any number of media-query breakpoints.

data/sass/susy/_margin.scss

@@ -12,7 +12,7 @@
   $columns,
   $context  : $total-columns,
   $from     : $from-direction
-) {  
+) {
   margin-#{$from}: space($columns,$context);
 }
 

data/sass/susy/_support.scss

@@ -10,14 +10,14 @@
 
 // A debug tool for checking browser support
 @mixin debug-support-matrix($experimental: true, $ie: true) {
-  @debug  #{'$moz—'}$experimental-support-for-mozilla
-          #{'$webkit—'}$experimental-support-for-webkit
-          #{'$microsoft—'}$experimental-support-for-microsoft
-          #{'$opera—'}$experimental-support-for-opera
-          #{'$khtml—'}$experimental-support-for-khtml;
-  @debug  #{'$ie6—'}$legacy-support-for-ie6
-          #{'$ie7—'}$legacy-support-for-ie7
-          #{'$ie8—'}$legacy-support-for-ie8;
+  @debug  #{'$moz-'}$experimental-support-for-mozilla
+          #{'$webkit-'}$experimental-support-for-webkit
+          #{'$microsoft-'}$experimental-support-for-microsoft
+          #{'$opera-'}$experimental-support-for-opera
+          #{'$khtml-'}$experimental-support-for-khtml;
+  @debug  #{'$ie6-'}$legacy-support-for-ie6
+          #{'$ie7-'}$legacy-support-for-ie7
+          #{'$ie8-'}$legacy-support-for-ie8;
 }
 
 // Capture the current exerimental support settings

data/sass/susy/_units.scss

@@ -0,0 +1,159 @@
+// @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+// Base font size in pixels, if not already defined.
+// Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+// Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+// Convert any CSS <length> or <percentage> value to any another.
+//
+// @param $length
+//   A css <length> or <percentage> value
+//
+// @param $to-unit
+//   String matching a css unit keyword, e.g. 'em', '%', etc.
+//
+// @param $from-context
+//   When converting from relative units, the absolute length (in px) to
+//   which $length refers (e.g. for $lengths in em units, would normally be the
+//   font-size of the current element).
+//
+// @param $to-context
+//   For converting to relative units, the absolute length in px to which the
+//   output value will refer. Defaults to the same as $from-context, since it is
+//   rarely needed.
+@function convert-length(
+  $length,
+  $to-unit,
+  $from-context: $base-font-size,
+  $to-context: $from-context
+) {
+
+  $from-unit: unit($length);
+
+  // Optimize for cases where `from` and `to` units are accidentally the same.
+  @if $from-unit == $to-unit { @return $length; }
+
+  // Context values must be in px so we can determine a conversion ratio for
+  // relative units.
+  @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+  @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+  // Convert input length to pixels
+  $px-length: $length;
+
+  @if $from-unit != 'px' {
+    // Convert relative units using the from-context parameter.
+    @if      $from-unit == 'em'  { $px-length: $length * $from-context / 1em }
+    @else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
+    @else if $from-unit == '%'   { $px-length: $length * $from-context / 100% }
+    @else if $from-unit == 'ex'  { $px-length: $length * $from-context / 2ex }
+    // Convert absolute units using Sass' conversion table.
+    @else if $from-unit == 'in'  or
+             $from-unit == 'mm'  or
+             $from-unit == 'cm'  or
+             $from-unit == 'pt'  or
+             $from-unit == 'pc'  { $px-length: 0px + $length }
+    // Certain units can't be converted.
+    @else if $from-unit == 'ch'  or
+             $from-unit == 'vw'  or
+             $from-unit == 'vh'  or
+             $from-unit == 'vmin' {
+      @warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+      @return $length;
+    }
+    @else {
+      @warn "#{$from-unit} is an unknown length unit. Returning original value.";
+      @return $length;
+    }
+  }
+
+  // Convert length in pixels to the output unit
+  $output-length: $px-length;
+  @if $to-unit != 'px' {
+    // Relative units
+    @if      $to-unit == 'em'  { $output-length: $px-length * 1em / $to-context }
+    @else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
+    @else if $to-unit == '%'   { $output-length: $px-length * 100% / $to-context }
+    @else if $to-unit == 'ex'  { $output-length: $px-length * 2ex / $to-context }
+    // Absolute units
+    @else if $to-unit == 'in'  { $output-length: 0in + $px-length }
+    @else if $to-unit == 'mm'  { $output-length: 0mm + $px-length }
+    @else if $to-unit == 'cm'  { $output-length: 0cm + $px-length }
+    @else if $to-unit == 'pt'  { $output-length: 0pt + $px-length }
+    @else if $to-unit == 'pc'  { $output-length: 0pc + $px-length }
+    // Non-convertible units
+    @else if $to-unit == 'ch'  or
+             $to-unit == 'vw'  or
+             $to-unit == 'vh'  or
+             $to-unit == 'vmin' {
+      @warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+      @return $length;
+    }
+    @else {
+      @warn "#{$to-unit} is an unknown length unit. Returning original value.";
+      @return $length;
+    }
+  }
+
+  @return $output-length;
+}
+
+
+// Output a given style rule containing rem values along with an (optional)
+// fallback rule for older browsers (with rem values converted to px).
+//
+// @param $property
+//   The css property name.
+//
+// @param $values
+//   The value (or space-separated list of values) for the property.
+//
+// @param $use-px-fallback
+//   [ true | false ]
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+  // Create a couple of empty lists as output buffers.
+  $px-values: ();
+  $rem-values: ();
+
+  // Loop through the $values list
+  @each $value in $values {
+    // For each property value, if it's in rem or px, derive both rem and
+    // px values for it and add those to the end of the appropriate buffer.
+    // Ensure all pixel values are rounded to the nearest pixel.
+    @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
+      @if unit($value) == px {
+        $px-values: join($px-values, round($value));
+        $rem-values: join($rem-values, convert-length($value, rem));
+      }
+      @else {
+        $px-values: join($px-values, round(convert-length($value, px)));
+        $rem-values: join($rem-values, $value);
+      }
+    }
+    @else {
+      $px-values: join($px-values, $value);
+      $rem-values: join($rem-values, $value);
+    }
+  }
+
+  // Use pixel fallback for browsers that don't understand rem units.
+  @if $use-px-fallback {
+    #{$property}: $px-values;
+  }
+
+  // Use rem values for everyone else (overrides pixel values).
+  #{$property}: $rem-values;
+}
+
+@mixin if-rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+  $has-rem: false;
+  @each $value in $values { $has-rem: if(unit($value) == 'rem', true, $has-rem); }
+  @if $has-rem { @include rem($property, $values, $use-px-fallback); }
+  @else { #{$property}: $values; }
+}
+

data/susy.gemspec

@@ -2,15 +2,15 @@
 
 Gem::Specification.new do |s|
   s.name = %q{susy}
-  s.version = "1.0.4"
+  s.version = "1.0.5.alpha.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-11-03}
+  s.date = %q{2012-11-06}
   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"]
-  s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.md", "Rakefile", "VERSION", "lib/susy.rb", "sass/_susy.scss", "sass/susy/_background.scss", "sass/susy/_functions.scss", "sass/susy/_grid.scss", "sass/susy/_margin.scss", "sass/susy/_media.scss", "sass/susy/_padding.scss", "sass/susy/_settings.scss", "sass/susy/_support.scss", "susy.gemspec", "templates/project/_base.scss", "templates/project/manifest.rb", "templates/project/screen.scss", "test/config.rb", "test/css/background.css", "test/css/functions.css", "test/css/grid.css", "test/css/margin.css", "test/css/media.css", "test/css/padding.css", "test/scss/background.scss", "test/scss/functions.scss", "test/scss/grid.scss", "test/scss/margin.scss", "test/scss/media.scss", "test/scss/padding.scss"]
+  s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.md", "Rakefile", "VERSION", "lib/susy.rb", "sass/_susy.scss", "sass/susy/_background.scss", "sass/susy/_functions.scss", "sass/susy/_grid.scss", "sass/susy/_margin.scss", "sass/susy/_media.scss", "sass/susy/_padding.scss", "sass/susy/_settings.scss", "sass/susy/_support.scss", "sass/susy/_units.scss", "susy.gemspec", "templates/project/_base.scss", "templates/project/manifest.rb", "templates/project/screen.scss", "test/config.rb", "test/css/background.css", "test/css/functions.css", "test/css/grid.css", "test/css/margin.css", "test/css/media.css", "test/css/padding.css", "test/scss/background.scss", "test/scss/functions.scss", "test/scss/grid.scss", "test/scss/margin.scss", "test/scss/media.scss", "test/scss/padding.scss"]
   s.homepage = %q{http://susy.oddbird.net/}
   s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Susy", "--main", "README.md"]
   s.require_paths = ["lib"]

data/test/css/grid.css

@@ -2,10 +2,10 @@
   *zoom: 1;
   max-width: 59em;
   _width: 59em;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: 1em;
   padding-right: 1em;
+  margin-left: auto;
+  margin-right: auto;
 }
 .container:after {
   content: "";
@@ -17,10 +17,10 @@
   *zoom: 1;
   max-width: 59em;
   _width: 59em;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: 1em;
   padding-right: 1em;
+  margin-left: auto;
+  margin-right: auto;
 }
 .complex-container:after {
   content: "";
@@ -94,10 +94,10 @@
   *zoom: 1;
   max-width: 61em;
   _width: 61em;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: 1em;
   padding-right: 1em;
+  margin-left: auto;
+  margin-right: auto;
 }
 .container:after {
   content: "";

data/test/css/media.css

@@ -2,10 +2,10 @@
   *zoom: 1;
   max-width: 19em;
   _width: 19em;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: 1em;
   padding-right: 1em;
+  margin-left: auto;
+  margin-right: auto;
 }
 .layout:after {
   content: "";
@@ -16,10 +16,10 @@
 @media (min-width: 29em) {
   .breakpoint .break6 {
     max-width: 29em;
-    margin-left: auto;
-    margin-right: auto;
     padding-left: 1em;
     padding-right: 1em;
+    margin-left: auto;
+    margin-right: auto;
   }
   .breakpoint .break6:after {
     content: "";
@@ -58,13 +58,44 @@
   *zoom: 1;
   max-width: 28em;
   _width: 28em;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: 1em;
   padding-right: 1em;
+  margin-left: auto;
+  margin-right: auto;
 }
 .with-settings6-3-2-1:after {
   content: "";
   display: table;
   clear: both;
 }
+
+.with-settings6-3r-2r-1r {
+  *zoom: 1;
+  max-width: 504px;
+  max-width: 28rem;
+  _width: 504px;
+  padding-left: 18px;
+  padding-left: 1rem;
+  padding-right: 18px;
+  padding-right: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.with-settings6-3r-2r-1r:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media (min-width: 33.75em) and (max-width: 67.5em) {
+  .break60r-8-30r {
+    max-width: 684px;
+    max-width: 38rem;
+  }
+}
+@media (min-width: 33.75em) and (max-width: 67.5em) {
+  .break60-8-30 {
+    max-width: 684px;
+    max-width: 38rem;
+  }
+}

data/test/scss/media.scss

@@ -33,3 +33,18 @@
 @include with-grid-settings(6,3em,2em,1em) {
   .with-settings6-3-2-1 { @include container; }
 }
+
+$base-font-size: 18px;
+
+@include with-grid-settings(6,3rem,2rem,1rem) {
+  .with-settings6-3r-2r-1r { @include container; }
+
+  @include at-breakpoint(60rem 8 30rem) {
+    .break60r-8-30r { @include set-container-width; }
+  }
+  @include at-breakpoint(60em 8 30em) {
+    .break60-8-30 { @include set-container-width; }
+  }
+}
+
+$base-font-size: 16px;

metadata

@@ -1,12 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: susy
 version: !ruby/object:Gem::Version 
-  prerelease: false
+  prerelease: true
   segments: 
   - 1
   - 0
-  - 4
-  version: 1.0.4
+  - 5
+  - alpha
+  - 0
+  version: 1.0.5.alpha.0
 platform: ruby
 authors: 
 - Eric Meyer
@@ -14,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-11-03 00:00:00 -06:00
+date: 2012-11-06 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -73,6 +75,7 @@ files:
 - sass/susy/_padding.scss
 - sass/susy/_settings.scss
 - sass/susy/_support.scss
+- sass/susy/_units.scss
 - susy.gemspec
 - templates/project/_base.scss
 - templates/project/manifest.rb