susy 2.0.0.beta.3 → 2.0.0.rc.1

data/sass/susy/output/shared/_padding.scss

@@ -14,6 +14,10 @@
   $to: to($flow);
   $from: from($flow);
 
-  padding-#{$from}: $before;
-  padding-#{$to}: $after;
+  $output: (
+    padding-#{$from}: $before,
+    padding-#{$to}: $after,
+  );
+
+  @include output($output);
 }

data/sass/susy/output/support/_background.scss

@@ -0,0 +1,58 @@
+// Background Properties
+// =====================
+
+// Susy Background Image
+// ---------------------
+// Check for an existing support mixin, or provide a simple fallback.
+// - $image: <background-image>
+@mixin susy-background-image(
+  $image
+) {
+  @if susy-support(background-image, (mixin: background-image), $warn: false) {
+    @include background-image($image...);
+  } @else {
+    background-image: $image;
+  }
+}
+
+// Susy Background Size
+// ---------------------
+// Check for an existing support mixin, or provide a simple fallback.
+// - $image: <background-size>
+@mixin susy-background-size(
+  $size
+) {
+  @if susy-support(background-options, (mixin: background-size)) {
+    @include background-size($size);
+  } @else {
+    background-size: $size;
+  }
+}
+
+// Susy Background Origin
+// ----------------------
+// Check for an existing support mixin, or provide a simple fallback.
+// - $image: <background-origin>
+@mixin susy-background-origin(
+  $origin
+) {
+  @if susy-support(background-options, (mixin: background-origin)) {
+    @include background-origin($origin);
+  } @else {
+    background-origin: $origin;
+  }
+}
+
+// Susy Background Clip
+// --------------------
+// Check for an existing support mixin, or provide a simple fallback.
+// - $image: <background-clip>
+@mixin susy-background-clip(
+  $clip
+) {
+  @if susy-support(background-options, (mixin: background-clip)) {
+    @include background-clip($clip);
+  } @else {
+    background-clip: $clip;
+  }
+}

data/sass/susy/output/support/_box-sizing.scss

@@ -0,0 +1,17 @@
+// Box Sizing
+// ==========
+
+// Box Sizing
+// ----------
+// Check for an existing support mixin, or provide a simple fallback.
+// - $model: <box-sizing>
+@mixin susy-box-sizing(
+  $model: content-box
+) {
+  @if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
+    @include box-sizing($model);
+  } @else {
+    $prefix: (moz, webkit, official);
+    @include susy-prefix(box-sizing, $model, $prefix);
+  }
+}

data/sass/susy/output/support/_clearfix.scss

@@ -0,0 +1,18 @@
+// Susy Fallback Clearfix
+// ======================
+
+
+// Clearfix
+// --------
+// Check for an existing support mixin, or provide a simple fallback.
+@mixin susy-clearfix {
+  @if susy-support(clearfix, (mixin: clearfix)) {
+    @include clearfix;
+  } @else {
+    &::after {
+      content: " ";
+      display: block;
+      clear: both;
+    }
+  }
+}

data/sass/susy/output/support/_prefix.scss

@@ -0,0 +1,19 @@
+// Susy Prefix
+// ===========
+
+// Prefix
+// ------
+// Output simple prefixed properties.
+// - $prop      : <css property>
+// - $val       : <css value>
+// - [$prefix]  : <browser prefix list>
+@mixin susy-prefix(
+  $prop,
+  $val,
+  $prefix: official
+) {
+  @each $fix in $prefix {
+    $fix: if($fix == official or not $fix, $prop, '-#{$fix}-#{$prop}');
+    @include susy-rem($fix, $val);
+  }
+}

data/sass/susy/output/support/_rem.scss

@@ -0,0 +1,22 @@
+// rem Support
+// ===========
+
+// rem
+// ---
+// Check for an existing support mixin, or output directly.
+// - $prop  : <css property>
+// - $val   : <css value>
+@mixin susy-rem(
+  $prop,
+  $val
+) {
+  $_reqs: (
+    variable: rem-with-px-fallback,
+    mixin: rem,
+  );
+  @if susy-support(rem, $_reqs, $warn: false) {
+    @include rem($prop, $val);
+  } @else {
+    #{$prop}: $val;
+  }
+}

data/sass/susy/output/support/_support.scss

@@ -0,0 +1,82 @@
+// Browser Support
+// ===============
+
+// Susy Support Defaults
+// ---------------------
+@include susy-defaults((
+  use-custom: (
+    clearfix: false,
+    background-image: true,
+    background-options: false,
+    box-sizing: true,
+    rem: true,
+  ),
+));
+
+
+// Susy Support [mixin]
+// --------------------
+// Send property-value pairs to the proper support modules.
+// - $prop  : <css property>
+// - $val   : <css value>
+@mixin susy-support(
+  $prop,
+  $val
+) {
+  // Background Support
+  @if $prop == background-image {
+    @include susy-background-image($val);
+  } @else if $prop == background-size {
+    @include susy-background-size($val);
+  } @else if $prop == background-origin {
+    @include susy-background-origin($val);
+  } @else if $prop == background-clip {
+    @include susy-background-clip($val);
+  }
+
+  // Box-Sizing Support
+  @else if $prop == box-sizing {
+    @include susy-box-sizing($val);
+  }
+
+  // Rem Support
+  @else {
+    @include susy-rem($prop, $val);
+  }
+}
+
+
+// Susy Support [function]
+// -----------------------
+// Check for support of a feature.
+// - $feature       : <string>
+//                    - e.g "rem" or "box-sizing"
+// - $requirements  : <map>
+//                    - e.g (variable: rem-with-px-fallback, mixin: rem)
+// - $warn          : <bool>
+@function susy-support(
+  $feature,
+  $requirements: (),
+  $warn: true
+) {
+  $_support: susy-get(use-custom $feature);
+
+  @if $_support {
+    $_fail: false;
+
+    @each $_type, $_req in $requirements {
+      $_pass: call(#{$_type}-exists, $_req);
+
+      @if not $_pass {
+        $_fail: true;
+        @if $warn {
+          @warn "You requested custom support of #{$feature}, but the #{$_req} #{$_type} is not available.";
+        }
+      }
+    }
+
+    $_support: if($_fail, false, $_support);
+  }
+
+  @return $_support;
+}

metadata

@@ -1,17 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: susy
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta.3
+  version: 2.0.0.rc.1
 platform: ruby
 authors:
 - Eric Meyer
-- Mason Wendell
 - Tsachi Shlidor
-- Sam Richard
-- Danny Palmer
+- Aaron Gray
 - Rachel Nabors
-- Scott Kellum
 - Jina Bolton
+- Danny Palmer
 autorequire: 
 bindir: bin
 cert_chain: []
@@ -35,13 +33,11 @@ description: Susy is a toolkit for building layouts of all types with a simple,
   syntax.
 email:
 - eric@oddbird.net
-- mason@zivtech.com
 - tsi.shlidor@gmail.com
-- snugug@gmail.com
-- danny@dannyprose.com
+- aaron@hellometa.com
 - rachelnabors@gmail.com
-- scott@scottkellum.com
 - jina@sushiandrobots.com
+- danny@dannyprose.com
 executables: []
 extensions: []
 extra_rdoc_files:
@@ -55,10 +51,8 @@ files:
 - sass/_susy.scss
 - sass/_susyone.scss
 - sass/susy/_math.scss
-- sass/susy/language/_shared.scss
 - sass/susy/language/_susy.scss
 - sass/susy/language/_susyone.scss
-- sass/susy/language/shared/_maps.scss
 - sass/susy/language/susy/_background.scss
 - sass/susy/language/susy/_bleed.scss
 - sass/susy/language/susy/_box-sizing.scss
@@ -82,23 +76,29 @@ files:
 - sass/susy/language/susyone/_media.scss
 - sass/susy/language/susyone/_padding.scss
 - sass/susy/language/susyone/_settings.scss
-- sass/susy/language/susyone/_units.scss
 - sass/susy/math/_columns.scss
+- sass/susy/math/_maps.scss
 - sass/susy/math/_settings.scss
 - sass/susy/math/_validation.scss
 - sass/susy/output/_float.scss
 - sass/susy/output/_shared.scss
-- sass/susy/output/float/_clearfix.scss
+- sass/susy/output/_support.scss
 - sass/susy/output/float/_container.scss
 - sass/susy/output/float/_end.scss
 - sass/susy/output/float/_isolate.scss
 - sass/susy/output/float/_span.scss
 - sass/susy/output/shared/_background.scss
-- sass/susy/output/shared/_box-sizing.scss
 - sass/susy/output/shared/_container.scss
 - sass/susy/output/shared/_direction.scss
 - sass/susy/output/shared/_margins.scss
+- sass/susy/output/shared/_output.scss
 - sass/susy/output/shared/_padding.scss
+- sass/susy/output/support/_background.scss
+- sass/susy/output/support/_box-sizing.scss
+- sass/susy/output/support/_clearfix.scss
+- sass/susy/output/support/_prefix.scss
+- sass/susy/output/support/_rem.scss
+- sass/susy/output/support/_support.scss
 - templates/project/_base.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss

data/sass/susy/language/_shared.scss

@@ -1,4 +0,0 @@
-// Shared Language
-// ===============
-
-@import "shared/maps";

data/sass/susy/language/shared/_maps.scss

@@ -1,85 +0,0 @@
-// Map Toolkit
-// ===========
-
-// Truncate List
-// -------------
-// - Return a list, truncated to a given length
-@function truncate-list(
-  $list,
-  $length
-) {
-  $return: ();
-
-  @for $i from 1 through length($list) {
-    $return: if($i <= $length, append($return, nth($list, $i)), $return);
-  }
-
-  @return $return;
-}
-
-// Deep Get
-// --------
-// - Return a value deep in nested maps
-@function deep-get(
-  $map,
-  $keys...
-) {
-  $return: $map;
-
-  @each $key in $keys {
-    @if type-of($return) == map {
-      $return: map-get($return, $key);
-    }
-  }
-
-  @return $return;
-}
-
-// Deep Set
-// --------
-// - Set a value deep in nested maps
-@function deep-set(
-  $map,
-  $keys,
-  $value
-) {
-  $length: length($keys);
-  $return: ();
-
-  @for $i from 1 through $length {
-    $n: 0 - $i;
-    $level: truncate-list($keys, $length + $n);
-    $level: deep-get($map, $level...);
-    $merge: (nth($keys, $n): $value);
-    $value: if($level, map-merge($level, $merge), $merge);
-    $return: $value;
-  }
-
-  @return $return;
-}
-
-// Deep Has-Key
-// ------------
-// - Return true if a deep key exists
-@function deep-has-key(
-  $map,
-  $keys...
-) {
-  $return: null;
-  $break: false;
-
-  @each $key in $keys {
-    @if not $break {
-      $return: map-has-key($map, $key);
-    }
-
-    @if $return {
-      $map: map-get($map, $key);
-    } @else {
-      $break: true;
-    }
-  }
-
-  @return $return;
-}
-

data/sass/susy/language/susyone/_units.scss

@@ -1,159 +0,0 @@
-// @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; }
-}
-