singularitygs 1.1.2 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
---- 
-SHA512: 
-  data.tar.gz: 9bd5f9cb1cec2ea2abdac9b10f08739fcdfb434ab893407288392ac87f34abe753ffd59c2037bc7c4cb17a4f82916e50a39520a7c1e1b9af487ba55c4c3dc06d
-  metadata.gz: a80c3265806c357e5b5af5b7eff905662f824e9bea412cf5237d9ca29856e7577d29d5bc8d12d73cbd068bc7d22192605fb3bfb94c9443079cdb71e4c4243c37
-SHA1: 
-  data.tar.gz: 13f176ec322bfb02fee62f3901105c91ce1998e5
-  metadata.gz: 1bd5f24e9faa1a5727193d09220e14b0fd395dd0
+---
+SHA1:
+  metadata.gz: 32900e9747039e5e2fca5da66fcd6d4375302ada
+  data.tar.gz: 532df1e717e2bf95f17e327db75eb5da2c965c84
+SHA512:
+  metadata.gz: 7de953ab1247699622747a12ab20a75f579fe04b70ba64621faff299f9004056c292563c65ef3fe7894000e876c71a86406ca3ba168bdf9f16977749c1f9d7cb
+  data.tar.gz: de8b80ad8abf4a73d1197b9dffc7f1162036492f11b988c5019b1cb15b85711cb9b2705d62bc5c2b89e1f71ddea247465cdd808d6d8a0d1daf6183a8553988df

data/lib/singularitygs.rb

@@ -1,9 +1,17 @@
-require 'compass'
-require 'breakpoint'
+base_directory  = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+singularitygs_sass_path = File.join(base_directory, 'stylesheets')
 
-Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
+if (defined? Compass)
+  require 'breakpoint'
+  Compass::Frameworks.register(
+    "singularitygs",
+    :path => base_directory
+  )
+else
+  ENV["SASS_PATH"] = [ENV["SASS_PATH"], singularitygs_sass_path].compact.join(File::PATH_SEPARATOR)
+end
 
 module SingularityGS
-  VERSION = "1.1.2"
-  DATE = "2013-08-01"
-end
+  VERSION = "1.8.0"
+  DATE = "2017-04-23"
+end

data/stylesheets/_singularitygs.scss

@@ -1,34 +1,25 @@
 //////////////////////////////
-// Import Required Extensions
-//////////////////////////////
-@import "breakpoint";
-
-//////////////////////////////
-// Default Variables
-//////////////////////////////
-
-// The grids being used
-$grids: () !default;
-
-// The gutters of the inner columns of the grid
-$gutters: () !default;
-
-// The gutter styles
-// Options: opposite/split (fixed)
-$gutter-styles: () !default;
-
-// Specifies whether or not you're building mobile-first grids. Defaults to true
-$mobile-first: true !default;
-
-// Default output style.
-$output: 'isolation' !default;
-
-// Direction for your grid. Can be ltr, rtl, or both
-$direction: 'ltr' !default;
-
-// Whether or not to include border-box or clearfix with all spans
-$include-border-box:  false !default;
-$include-clearfix:    false !default;
+// Default Settings
+//////////////////////////////
+$Singularity-Settings: (
+  'grids': (-1px: 12),
+  'gutters': (-1px: .25),
+  'gutter styles': (-1px: 'opposite'),
+  'output': 'isolation',
+  'direction': 'ltr',
+  'mobile first': true,
+  'include border box': false,
+  'include clearfix': false,
+  'background grid color': chocolate,
+  'asymmetric output': 'isolation',
+  'calc include min-width': true,
+  'debug': false
+);
+
+//////////////////////////////
+// User Settings
+//////////////////////////////
+$singularity: () !default;
 
 //////////////////////////////
 // Import General Helpers

data/stylesheets/singularitygs/_api.scss

@@ -1,39 +1,118 @@
-@mixin grid-span($span, $location: 1, $grid: false, $gutter: false, $output-style: $output, $options: false) {
+@import "api/float";
+@import "api/isolation";
+@import "api/calc";
 
-  @if $output-style == 'float' {
-    @include output-float($span, $location, $grid, $gutter, $options);
-  }
-  @else if $output-style == 'isolation' {
-    @include output-isolation($span, $location, $grid, $gutter, $options);
+//////////////////////////////
+// Master Grid Span mixin
+//////////////////////////////
+@mixin grid-span($span, $location: 1, $grid: null, $gutter: null, $output-style: null, $gutter-style: null, $options: null) {
+
+  @if $output-style == null {
+    $output-style: sgs-get('output');
   }
-}
 
-@mixin push($span, $location, $grid: false, $gutter: false, $output-style: $output) {
+  $Grid: find-grid($grid);
+  $Gutter: find-gutter($gutter);
+  $Style: find-gutter-style($gutter-style);
+
+  $Start-Row: start-row($location);
+  $End-Row: end-row($span, $location, $Grid);
 
-  @if $output-style == 'float' {
-    @include push-float($span, $location, $grid, $gutter);
+  $Fixed-Gutter: fixed-gutter($Grid, $Gutter, $Style);
+  $Split-Gutter: index($Style, 'split');
+  $Gutter-Property: gutter-property($Grid, $Gutter, $Style);
+
+  $Direction: sgs-get('direction');
+  $From: if($options and type-of($options) == 'map', if(map-get($options, 'from'), map-get($options, 'from'), $Direction), $Direction);
+  $From: if($From == 'ltr' or $From == 'rtl', named-direction($From), $From);
+
+  $Holder: ();
+  @each $k, $v in $options {
+    $Holder: if($k == 'from', $Holder, map-merge($Holder, ($k: $v)));
   }
-  @else if $output-style == 'isolation' {
-    @include push-isolation($span, $location, $grid, $gutter);
+  $options: if(length($Holder) > 0, $Holder, null);
+
+  $Span-Map: (
+    'span': $span,
+    'location': $location,
+    'grid': $Grid,
+    'gutter': $Gutter,
+    'style': $Style,
+    'start row': $Start-Row,
+    'end row': $End-Row,
+    'fixed gutter': $Fixed-Gutter,
+    'split gutter': $Split-Gutter,
+    'gutter property': $Gutter-Property,
+    'options': $options
+  );
+
+  @if sgs-get('debug') != false {
+    -sgs-span-settings: inspect($Span-Map);
   }
-}
 
-@mixin pull($span, $location, $grid: false, $gutter: false, $output-style: $output) {
 
-  @if $output-style == 'float' {
-    @include pull-float($span, $location, $grid, $gutter);
+  @if function-exists('output-#{$output-style}') {
+    $Left: ();
+    $Right: ();
+
+    @if $Direction == 'both' or $From == 'left' or ($Direction == 'rtl' and $From == 'opposite') {
+      $Left: call('output-#{$output-style}', map-merge($Span-Map, ('direction': left)));
+    }
+
+    @if $Direction == 'both' or $From == 'right' or ($Direction == 'ltr' and $From == 'opposite') {
+      $Right: call('output-#{$output-style}', map-merge($Span-Map, ('direction': right)));
+    }
+
+    $Left-Keys: map-keys($Left);
+    $Right-Keys: map-keys($Right);
+    $Exclude: ();
+
+    @each $key in $Left-Keys {
+      @if index($Right-Keys, $key) {
+        @if map-get($Right, $key) == map-get($Left, $key) {
+          $Exclude: append($Exclude, $key);
+        }
+      }
+    }
+
+    // Always try and print the Left value
+    @include grid-span-build-exclude($Left, $Exclude, false);
+
+    // If Direction is Both or RTL, add the RTL attribute selector
+    @if $Direction == 'both' or $Direction == 'rtl' {
+      [dir="rtl"] & {
+        @include grid-span-build-exclude($Right, $Exclude, true);
+      }
+    }
+    @else {
+      @include grid-span-build-exclude($Right, $Exclude, true);
+    }
   }
-  @else if $output-style == 'isolation' {
-    @include pull-isolation($span, $location, $grid, $gutter);
+  @else {
+    @warn "There doesn't appear to be an output style named `#{$output-style}`. Please ensure that the function `output-#{$output-style}` and that the output style `#{$output-style}` are both available before trying to use them.";
   }
 }
 
-@mixin isolate($span, $location, $grid: false, $gutter: false, $output-style: $output) {
-
-  @if $output-style == 'float' {
-    @include isolate-float($span, $location, $grid, $gutter);
+@mixin grid-span-build($property, $value) {
+  @if type-of($value) != 'map' {
+    #{$property}: $value;
+  }
+  @else {
+    @each $prefix, $val in $value {
+      #{$property}: $val;
+    }
   }
 }
 
-@import "api/float";
-@import "api/isolation";
+@mixin grid-span-build-exclude($properties, $delta, $exclude: false) {
+  @each $property, $value in $properties {
+    @if $exclude {
+      @if not index($delta, $property) {
+        @include grid-span-build($property, $value);
+      }
+    }
+    @else {
+      @include grid-span-build($property, $value);
+    }
+  }
+}

data/stylesheets/singularitygs/_css-grid.scss

@@ -0,0 +1,141 @@
+@import 'breakpoint';
+
+@function _css-gridtemplate-conversion($grid) {
+  @if type-of($grid) == 'number' or length($grid) == 1 {
+    @return unquote('repeat(#{$grid}, 1fr)');
+  }
+  @else if type-of($grid) == 'list' or length($grid) > 1 {
+    $holder: '';
+    @each $column in $grid {
+      @if unitless($column) {
+        $holder: $holder + '#{$column}fr ';
+      }
+      @else {
+        $holder: $holder + $column + ' ';
+      }
+    }
+
+    $holder: str-slice($holder, 0, str-length($holder) - 1);
+
+    @return unquote($holder);
+  }
+
+  @return $grid;
+}
+
+@function _css-grid-gap-conversion($gutter) {
+  @if unitless(nth($gutter, 1)) {
+    @return unquote('#{$gutter}fr');
+  }
+
+  @return $gutter;
+}
+
+@mixin _css-grid-container-padding-conversation($style) {
+  @if length($style) == 1 {
+    $style: nth($style, 1);
+  }
+
+  @if str-index($style, 'split') != null {
+    $gutter: find-gutter() / 2;
+    $padding: _css-grid-gap-conversion($gutter);
+
+    padding: {
+      left: $padding;
+      right: $padding;
+    }
+  }
+  @else {
+    padding: {
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
+@mixin grid-container() {
+  $grids: sgs-get('grids');
+  $gutters: sgs-get('gutters');
+  $gutter-styles: sgs-get('gutter styles');
+
+  @supports (display: grid) {
+    display: grid;
+
+    // Build Column Templates
+    @each $mq, $grid in $grids {
+      @if $mq == -1px {
+        grid-template-columns: _css-gridtemplate-conversion($grid);
+      }
+      @else {
+        @include mq($mq) {
+          grid-template-columns: _css-gridtemplate-conversion($grid);
+        }
+      }
+    }
+
+    // Build Gaps
+    @each $mq, $gutter in $gutters {
+      @if $mq == -1px {
+        grid-gap: _css-grid-gap-conversion($gutter);
+      }
+      @else {
+        @include mq($mq) {
+          grid-gap: _css-grid-gap-conversion($gutter);
+        }
+      }
+    }
+
+    // Build Padding
+    @each $mq, $style in $gutter-styles {
+      @if $mq == -1px {
+        @include _css-grid-container-padding-conversation($style);
+      }
+      @else {
+        @include mq($mq) {
+          @include _css-grid-container-padding-conversation($style);
+        }
+      }
+    }
+  }
+}
+
+@mixin css-grid-span($Span, $Location: false) {
+  $grid: find-grid();
+
+  @if type-of($grid) == 'number' or length($grid) == 1 {
+    // If we have a symmetric grid _and_ no location, Float Span makes most sense
+    @if $Location == false {
+      @include float-span($Span, $Location);
+    }
+    // If we have an symmetric grid _and_ a location, Isolation Span makes most sense
+    @else {
+      @include isolation-span($Span, $Location);
+    }
+  }
+  @else if type-of($grid) == 'list' or length($grid) > 1 {
+    $calc: false;
+    @each $column in $grid {
+      @if not unitless($column) {
+        $calc: true;
+      }
+    }
+
+    // If we have an asymmetric grid _and_ it includes united numbers, needs to be Calc
+    @if ($calc) {
+      @include calc-span($Span, $Location);
+    }
+    // If we have an asymmetric grid _and_ it doesn't include united numbers, Islotion's better
+    @else {
+      @include isolation-span($Span, $Location);
+    }
+  }
+
+  @supports (display: grid) {
+    @if $Location {
+      grid-columns: $Location / span $Span;
+    }
+    @else {
+      grid-columns: span $Span;
+    }
+  }
+}

data/stylesheets/singularitygs/_helpers.scss

@@ -1,13 +1,17 @@
+//////////////////////////////
+// Setting Helpers
+//////////////////////////////
+@import "helpers/settings";
+
 //////////////////////////////
 // Code Helpers
 //////////////////////////////
 @import "helpers/find";
 @import "helpers/sass-lists";
 @import "helpers/columns";
-@import "helpers/clearfix";
-@import "helpers/box-sizing";
 @import "helpers/span-shared";
 @import "helpers/directions";
+@import "helpers/sort";
 
 //////////////////////////////
 // UI Helpers

data/stylesheets/singularitygs/api/_calc.scss

@@ -0,0 +1,218 @@
+@function output-calc($Span-Map) {
+  // Set up Left/Right maps
+  $Return: ();
+
+  $Span: map-get($Span-Map, 'span');
+  $Location: map-get($Span-Map, 'location');
+
+  $Grid: map-get($Span-Map, 'grid');
+  $Gutter: map-get($Span-Map, 'gutter');
+  $Style: map-get($Span-Map, 'style');
+
+  @if unitless($Gutter) {
+    $ERROR-MESSAGE: "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
+    @if feature-exists(at-error) {
+      @error $ERROR-MESSAGE;
+    }
+    @else {
+      @warn $ERROR-MESSAGE;
+    }
+    @return $Return;
+  }
+
+  @if type-of($Grid) == 'number' {
+    $ERROR-MESSAGE: "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid or use another output style.";
+    @if feature-exists(at-error) {
+      @error $ERROR-MESSAGE;
+    }
+    @else {
+      @warn $ERROR-MESSAGE;
+    }
+    @return $Return;
+  }
+
+  $Start-Row: map-get($Span-Map, 'start row');
+  $End-Row: map-get($Span-Map, 'end row');
+
+  $Split-Gutter: map-get($Span-Map, 'split gutter');
+
+  $Direction: map-get($Span-Map, 'direction');
+  $Options: map-get($Span-Map, 'options');
+
+  $Dir: $Direction;
+  $Opp: opposite-direction($Dir);
+
+  $Width: '';
+  $Margin: null;
+  $Min-Width: '(';
+
+  $Fixed: ();
+  $Fluid: ();
+  $Fixed-Totals: ('px': 0, 'em': 0, '%': 0);
+  $Gutter-Totals: if(str-index($Style, 'split'), $Gutter * length($Grid), $Gutter * (length($Grid) - 1));
+  $Fluid-Totals: 0;
+  $Fluid-Fixed-Sum: '';
+  $Single-Fluid: '';
+
+  @for $i from 1 through length($Grid) {
+    $Item: nth($Grid, $i);
+    @if not unitless($Item) {
+      $Fixed: map-merge($Fixed, ($i: $Item));
+    }
+    @else {
+      $Fluid: map-merge($Fluid, ($i: $Item));
+    }
+  }
+
+  @each $k, $v in $Fixed {
+    $Unit: unit($v);
+    $Running: map-get($Fixed-Totals, $Unit) + $v;
+    $Fixed-Totals: map-merge($Fixed-Totals, ($Unit: $Running));
+  }
+
+  @each $k, $v in $Fluid {
+    $Fluid-Totals: $Fluid-Totals + $v;
+  }
+
+  @each $k, $v in $Fixed-Totals {
+
+    @if $v != 0 {
+      $Fluid-Fixed-Sum: '#{$Fluid-Fixed-Sum}#{$v} + ';
+    }
+  }
+
+  // Width of a single fluid item, for calc()
+  $Single-Fluid: '((100% - (#{$Fluid-Fixed-Sum}#{$Gutter-Totals})) / (#{$Fluid-Totals}))';
+
+  // Margin Calculation
+  @if not $Start-Row or not $End-Row {
+    @if $Split-Gutter {
+      $Margin: '#{$Gutter / 2} + ';
+    }
+
+    @for $i from 1 to $Location {
+      @if unitless(nth($Grid, $i)) {
+        $Margin: '#{$Margin}(#{$Single-Fluid} * #{nth($Grid, $i)} + #{$Gutter}) + ';
+      }
+      @else {
+        $Margin: '#{$Margin}(#{nth($Grid, $i)} + #{$Gutter}) + ';
+      }
+    }
+  }
+  @if $Margin != null {
+    $Margin: str-slice($Margin, 0, -4);
+  }
+
+
+  // Width Calculation
+  @if $Span == 1 {
+    @if map-has-key($Fixed, $Location) {
+      $Return: map-merge($Return, ('width': map-get($Fixed, $Location)));
+    }
+    @else if map-has-key($Fluid, $Location) {
+      $Math: '(#{$Single-Fluid}) * #{nth($Grid, $Location)}';
+      $Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Math)}), 'standard': calc(#{unquote($Math)})));
+      $Return: map-merge($Return, $Span-Map);
+    }
+  }
+  @else {
+    $Location-End: $Location + ($Span - 1);
+    $Fixed-Counter: 0;
+    @for $i from $Location through $Location-End {
+      @if unitless(nth($Grid, $i)) {
+        $Width: '#{$Width}(#{$Single-Fluid} * #{nth($Grid, $i)}';
+      }
+      @else {
+        $Fixed-Counter: $Fixed-Counter + 1;
+        $Min-Width: '#{$Min-Width}#{nth($Grid, $i)} + #{$Gutter} + ';
+        $Width: '#{$Width}(#{nth($Grid, $i)}';
+      }
+
+
+      @if $i != $Location-End {
+        $Width: '#{$Width} + #{$Gutter}) + ';
+      }
+      @else {
+        $Min-Width: str-slice($Min-Width, 0, -4);
+        @if $Fixed-Counter == 1 {
+          $Min-Width: '#{$Min-Width} - #{$Gutter}';
+        }
+        $Min-Width: '#{$Min-Width})';
+        $Width: '#{$Width})';
+      }
+    }
+
+    // Min width handling
+    @if $Min-Width != ')' {
+      $Min-Map: ('min-width': ('webkit' : -webkit-calc(#{unquote($Min-Width)}), 'standard': calc(#{unquote($Min-Width)}) ));
+
+      @if sgs-get('calc include min-width') {
+        $Return: map-merge($Return, $Min-Map);
+      }
+    }
+
+    $Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Width)}), 'standard': calc(#{unquote($Width)}) ) );
+    $Return: map-merge($Return, $Span-Map);
+  }
+
+  // Build margins and Floats
+  @if ($End-Row) {
+    $Return: map-merge($Return, ('float': $Opp));
+    $Return: map-merge($Return, ('margin-#{$Dir}': 0));
+
+    @if $Split-Gutter {
+      $Return: map-merge($Return, ('margin-#{$Opp}': $Gutter / 2));
+    }
+    @else {
+      $Return: map-merge($Return, ('margin-#{$Opp}': 0));
+    }
+  }
+  @else {
+    $Return: map-merge($Return, ('float': $Dir));
+    $Return: map-merge($Return, ('margin-#{$Opp}': -100%));
+
+    @if $Start-Row {
+      @if $Split-Gutter {
+        $Return: map-merge($Return, ('margin-#{$Dir}': $Gutter / 2));
+      }
+      @else {
+        $Return: map-merge($Return, ('margin-#{$Dir}': 0));
+      }
+    }
+    @else {
+      $Margin-Map: ('margin-#{$Dir}': ('webkit': -webkit-calc(#{unquote($Margin)}), 'standard': calc(#{unquote($Margin)})));
+      $Return: map-merge($Return, $Margin-Map);
+    }
+  }
+
+  @return $Return;
+}
+
+
+
+//////////////////////////////
+// Happy Syntax for Calc
+//
+// Makes working with Calc easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call
+//////////////////////////////
+@mixin calc-span($Span, $Location, $clear: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
+
+  @if $gutter != false and unitless($gutter) {
+    @warn "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
+  }
+
+  @if $grid != false and type-of($grid) == 'number' {
+    @warn "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid.";
+  }
+
+  $Options: ();
+  @if $clear {
+    $Options: map-merge($Options, ('clear': $clear));
+  }
+  @if $from {
+    $Options: map-merge($Options, ('from': $from));
+  }
+
+  $Options: if(length($Options) > 0, $Options, null);
+  @include grid-span($Span, $Location, $grid, $gutter, 'calc', $gutter-style, $Options);
+}