susy 2.0.0.beta.2 → 2.0.0.beta.3

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

@@ -0,0 +1,105 @@
+// ---------------------------------------------------------------------------
+// Media Mixins
+
+// Create a new layout context for (@content) descendants.
+//
+// $layout-cols : a (unitless) number of columns to use for this layout.
+@mixin layout(
+  $layout-cols
+) {
+  // store default $total-columns setting for later, then change it.
+  $default-layout   : $total-columns;
+  $total-columns    : $layout-cols !global;
+
+  // apply children in this new layout context.
+  @content;
+
+  // return to default $total-columns setting.
+  $total-columns    : $default-layout !global;
+}
+
+// Nest a block of code inside a new media-query and layout context.
+//
+// $media-layout  : a list of values [$min $layout $max $ie] including...
+//                : - one unitless number (columns in a layout)
+//                : - two optional lengths (min and max-width media-query breakpoints).
+//                : - one optional boolean or string to trigger fallback support for IE.
+// $font-size     : [optional] The base font-size of your layout, if you are using ems.
+//                : - defaults to $base-font-size
+@mixin at-breakpoint(
+  $media-layout,
+  $font-size: $base-font-size
+) {
+  $media-layout : medialayout($media-layout,$font-size);
+  $min          : nth($media-layout,1);
+  $layout       : nth($media-layout,2);
+  $max          : nth($media-layout,3);
+  $ie           : nth($media-layout,4);
+
+  @if (not $breakpoint-media-output) and (not $breakpoint-ie-output) and (not $breakpoint-raw-output) {
+    @warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work.";
+  }
+
+  // We need to have either a min-width breakpoint or a layout in order to proceed.
+  @if $min or $layout or $max {
+
+    // If we don't have a layout, we create one based on the min-width.
+    @if not $layout {
+      $layout: get-layout($min);
+    }
+
+    // If we still don't have a layout, we have a problem.
+    @if $layout {
+      // Set our new layout context.
+      @include layout($layout) {
+        @if $breakpoint-media-output {
+          @include with-browser-ranges(css-mediaqueries) {
+            @if $min and $max {
+              // Both $min and $max
+              @media (min-width: $min) and (max-width: $max) {
+                @content;
+              }
+            } @else {
+              @if (not $min) and (not $max) {
+                // Neither $min nor $max:
+                // We can create a breakpoint based on the number of columns in the layout.
+                $min: fix-ems(container-outer-width($width: false));
+              }
+              @if $min {
+                // Min only:
+                @media (min-width: $min) {
+                  @content;
+                }
+              } @else {
+                // Max only:
+                @media (max-width: $max) {
+                  @content;
+                }
+              }
+            }
+          }
+        }
+        // Set an IE fallback
+        @if $ie and $breakpoint-ie-output {
+          @if (type-of($ie) == 'bool') {
+            $ie: 'lt-ie9';
+          }
+          .#{$ie} & {
+            @content;
+          }
+        }
+
+        @if $breakpoint-raw-output {
+          @content;
+        }
+      }
+    } @else {
+      @warn "We were unable to determine a layout for your breakpoint.";
+    }
+
+  } @else {
+    @warn "You need to provide either a valid layout (number of columns)
+    or a valid media-query min-width breakpoint (length).";
+  }
+
+}

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

@@ -0,0 +1,92 @@
+// ---------------------------------------------------------------------------
+// Padding Mixins
+
+// add empty colums as padding before an element.
+// $columns : The number of columns to prefix.
+// $context : [optional] The context (columns spanned by parent).
+//          : Context is required on any nested elements.
+//          : Context MUST NOT be declared on a root element.
+// $from    : The start direction of your layout (e.g. 'left' for ltr languages)
+// $style   : The container style to use.
+@mixin prefix(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction,
+  $style    : fix-static-misalignment()
+) {
+  $from           : unquote($from);
+  padding-#{$from}: space($columns, $context, $style);
+}
+
+// add empty colums as padding after an element.
+// $columns : The number of columns to suffix.
+// $context : [optional] The context (columns spanned by parent).
+//          : Context is required on any nested elements.
+//          : Context MUST NOT be declared on a root element.
+// $from    : The start direction of your layout (e.g. 'left' for ltr languages)
+// $style   : The container style to use.
+@mixin suffix(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction,
+  $style    : fix-static-misalignment()
+) {
+  $from         : unquote($from);
+  $to           : opposite-position($from);
+  padding-#{$to}: space($columns, $context, $style);
+}
+
+// add empty colums as padding before and after an element.
+// $columns : The number of columns to pad.
+// $context : [optional] The context (columns spanned by parent).
+//          : Context is required on any nested elements.
+//          : Context MUST NOT be declared on a root element.
+// $from    : The start direction of your layout (e.g. 'left' for ltr languages)
+// $style   : The container style to use.
+@mixin pad(
+  $prefix   : false,
+  $suffix   : false,
+  $context  : $total-columns,
+  $from     : $from-direction,
+  $style    : fix-static-misalignment()
+) {
+  $from     : unquote($from);
+  @if $prefix {
+    @include prefix($prefix, $context, $from, $style);
+  }
+  @if $suffix {
+    @include suffix($suffix, $context, $from, $style);
+  }
+}
+
+// Bleed into colums with margin/padding on any side of an element.
+// $width   : The side of the bleed.
+//          : Any unit-length will be used directly.
+//          : Any unitless number will be used as a column-count.
+//          : Use "2 of 6" format to represent 2 cals in a 6-col nested context.
+// $sides   : One or more sides to bleed [ top | right | bottom | left | all ].
+// $style   : The container style to use.
+@mixin bleed(
+  $width: $grid-padding,
+  $sides: left right,
+  $style: fix-static-misalignment()
+) {
+  @if $border-box-sizing { @include box-sizing(content-box) }
+
+  @if type-of($width) == 'list' {
+    $width: filter($width, of);
+    $width: space(nth($width,1), nth($width,2), $style);
+  } @else if unitless($width) {
+    $width: space($width, $style: $style);
+  }
+
+  @if $sides == 'all' {
+    margin: - $width;
+    padding: $width;
+  } @else {
+    @each $side in $sides {
+      margin-#{$side}: - $width;
+      padding-#{$side}: $width;
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------------
+// Susy Settings
+
+// The total number of columns in the grid
+$total-columns      : 12              !default;
+
+// The width of columns and gutters.
+// These must all be set with the comparable units.
+$column-width       : 4em             !default;
+$gutter-width       : 1em             !default;
+
+// Padding on the left and right of a Grid Container.
+$grid-padding       : $gutter-width   !default;
+
+// ---------------------------------------------------------------------------
+// Advanced Settings
+
+// From Direction:
+// Controls for right-to-left or bi-directional sites.
+$from-direction     : left            !default;
+
+// Omega Float Direction:
+// The direction that +omega elements are floated by deafult.
+$omega-float        : opposite-position($from-direction)    !default;
+
+// Container Width:
+// Override the total width of your grid, using any length (50em, 75%, etc.)
+$container-width    : false           !default;
+
+// Container Style:
+// 'magic'  - Static (fixed or elastic) when there's enough space,
+//            fluid when there isn't. This is the SUSY MAGIC SAUCE(TM).
+// 'static' - Forces the grid container to remain static at all times.
+// 'fluid'  - Forces the grid to remain fluid at all times.
+//            (this will overrule any static $container-width settings)
+$container-style    : magic           !default;
+
+// Border-Box Sizing
+// Adjust the grid math appropriately for box-sizing: border-box;
+// Warning: This does not actually apply the new box model!
+// In most cases you can ignore this setting,
+// and simply apply the border-box-sizing mixin.
+$border-box-sizing  : false           !default;
+
+// ---------------------------------------------------------------------------
+// IE Settings
+
+// When you are using a seperate IE stylesheet,
+// you can use these settings to control the output of at-breakpoint.
+// By default, at-breakpoint will output media-queries as well as
+// any defined ie-fallback classes.
+$breakpoint-media-output  : true      !default;
+$breakpoint-ie-output     : true      !default;
+
+// Danger Zone! Only set as 'true' in IE-specific style sheets.
+$breakpoint-raw-output    : false     !default;

data/sass/susy/language/susyone/_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; }
+}
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: susy
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta.2
+  version: 2.0.0.beta.3
 platform: ruby
 authors:
 - Eric Meyer
@@ -53,9 +53,11 @@ files:
 - lib/compass-susy.rb
 - lib/susy.rb
 - 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
@@ -72,6 +74,15 @@ files:
 - sass/susy/language/susy/_rows.scss
 - sass/susy/language/susy/_settings.scss
 - sass/susy/language/susy/_span.scss
+- sass/susy/language/susyone/_background.scss
+- sass/susy/language/susyone/_functions.scss
+- sass/susy/language/susyone/_grid.scss
+- sass/susy/language/susyone/_isolation.scss
+- sass/susy/language/susyone/_margin.scss
+- 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/_settings.scss
 - sass/susy/math/_validation.scss
@@ -96,7 +107,8 @@ files:
 - README.md
 - VERSION
 homepage: http://susy.oddbird.net/
-licenses: []
+licenses:
+- BSD-3-Clause
 metadata: {}
 post_install_message: 
 rdoc_options: