singularitygs 1.0.alpha.2 → 1.0.0

data/lib/singularitygs.rb

@@ -1,10 +1,9 @@
 require 'compass'
-require 'modular-scale'
 require 'breakpoint'
 
 Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
 
 module SingularityGS
-  VERSION = "1.0.alpha.2"
-  DATE = "2012-12-02"
+  VERSION = "1.0.0"
+  DATE = "2013-04-01"
 end

data/stylesheets/_singularitygs.scss

@@ -1,68 +1,57 @@
-/*! SINGULARITY -- http://singularity.gs/ */
-@import "compass";
-@import "modular-scale";
+//////////////////////////////
+// Import Required Extensions
+//////////////////////////////
 @import "breakpoint";
 
-// Singularity debug output
-$singularity-debug: false !default;
+//////////////////////////////
+// Default Variables
+//////////////////////////////
 
-// Can be a number or a list of non-uniform column widths
-$columns: 12 !default;
-
-// Must be of the same unit type of defined columns
-$gutter: .25 !default;
-
-// Grid padding can be any type of unit
-$padding: 0 !default;
-
-// Layout direction?
-// options are ltr, rtl, both
-$dir: ltr !default;
-
-// Choose a selector for rtl layouts when using 'both'
-$rtl-selector: '[dir="rtl"]' !default;
-
-// Options for Multiple Grids
+// The grids being used
 $grids: () !default;
-$gutters: () !default;
-$paddings: () !default;
-
-$grids-mobile-first: true !default;
 
-// Container Nonsense
-$container: 100% !default;
-$containers: () !default;
-$container-to-ems: false !default;
+// The gutters of the inner columns of the grid
+$gutters: () !default;
 
-// Base Font Size
-$base-font-size: 1em !default;
+// Specifies whether or not you're building mobile-first grids. Defaults to true
+$mobile-first: true;
 
-// Structural templates for grid
-$output: 'isolation' !default;
+// Default output style.
+$output: 'float' !default;
 
+// Direction for your grid. Can be ltr, rtl, or both
+$direction: 'ltr' !default;
 
-@import "singularitygs/grid-structure";
+// Whether or not to include border-box or clearfix with all spans
+$include-border-box:  false !default;
+$include-clearfix:    false !default;
 
-// Helpers return think like list sums and column counts
+//////////////////////////////
+// Import General Helpers
+//////////////////////////////
 @import "singularitygs/helpers";
 
-// Compound grid calculation function
-@import "singularitygs/grid-plugins";
-
-// Column math is isolated
-@import "singularitygs/column";
-
-// Gutter math is isolated
-@import "singularitygs/gutter";
-
-// Grid math combines column and gutter math
-@import "singularitygs/grid";
-
-// Mixins to write
-@import "singularitygs/mixins";
-
-// Mixins to write
-@import "singularitygs/grid-test";
-
-// Mixins to write
-@import "singularitygs/background-grid";
+//////////////////////////////
+// Import Language Helpers
+//////////////////////////////
+@import "singularitygs/language";
+
+//////////////////////////////
+// Import Math
+//////////////////////////////
+@import "singularitygs/math";
+
+//////////////////////////////
+// Import Grid Helpers
+//////////////////////////////
+@import "singularitygs/grids";
+
+//////////////////////////////
+// Import Gutters Helpers
+//////////////////////////////
+@import "singularitygs/gutters";
+
+//////////////////////////////
+// Import APIs
+//////////////////////////////
+@import "singularitygs/api";

data/stylesheets/singularitygs/_api.scss

@@ -0,0 +1,39 @@
+@mixin grid-span($span, $location, $context: false, $gutter: false, $output-style: $output, $options: false) {
+
+  @if $output-style == 'float' {
+    @include output-float($span, $location, $context, $gutter, $options);
+  }
+  @else if $output-style == 'isolation' {
+    @include output-isolation($span, $location, $context, $gutter, $options);
+  }
+}
+
+@mixin push($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include push-float($span, $location, $context, $gutter);
+  }
+  @else if $output-style == 'isolation' {
+    @include push-isolation($span, $location, $context, $gutter);
+  }
+}
+
+@mixin pull($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include pull-float($span, $location, $context, $gutter);
+  }
+  @else if $output-style == 'isolation' {
+    @include pull-isolation($span, $location, $context, $gutter);
+  }
+}
+
+@mixin isolate($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include isolate-float($span, $location, $context, $gutter);
+  }
+}
+
+@import "api/float";
+@import "api/isolation";

data/stylesheets/singularitygs/_grids.scss

@@ -0,0 +1,2 @@
+@import "grids/add";
+@import "grids/find";

data/stylesheets/singularitygs/_gutters.scss

@@ -0,0 +1,2 @@
+@import "gutters/add";
+@import "gutters/find";

data/stylesheets/singularitygs/_helpers.scss

@@ -1,3 +1,15 @@
-@import "helpers/lists";
-@import "helpers/grids";
-@import "helpers/gridsets";
+//////////////////////////////
+// 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";
+
+//////////////////////////////
+// UI Helpers
+//////////////////////////////
+@import "helpers/background-grid";

data/stylesheets/singularitygs/_language.scss

@@ -0,0 +1,3 @@
+@import "language/parse-list";
+@import "language/parse-add";
+@import "language/span";

data/stylesheets/singularitygs/_math.scss

@@ -0,0 +1,3 @@
+@import "math/columns";
+@import "math/gutters";
+@import "math/context";

data/stylesheets/singularitygs/api/_float.scss

@@ -0,0 +1,93 @@
+@mixin output-float($span, $location, $columns, $gutter, $options: false) {
+
+  $location-holder: $location;
+
+  @if type-of($location) == string {
+    @if end-row($span, $location, $columns) {
+      $grid-length: length(find-grid($columns));
+      $location-holder: $grid-length - $span;
+    }
+    @else {
+      $location-holder: 1;
+    }
+  }
+
+  $gutter: find-gutter($gutter);
+  $end-row: end-row($span, $location, $columns);
+
+  width: column-span($span, $location-holder, $columns, $gutter);
+
+  @if $direction == 'ltr' or $direction == 'both' {
+    // Set the CSS direction to ltr
+    $cssdir: 'ltr';
+    // Find the CSS named direction and opposite direction
+    $dir: named-direction($cssdir);
+    $opp: opposite-direction($dir);
+
+    clear: $opp;
+
+    @if $end-row {
+      float: $opp;
+    }
+    @else {
+      float: $dir;
+      margin-#{$opp}: gutter-span($gutter, $columns);
+    }
+  }
+
+  @if $direction == 'rtl' or $direction == 'both' {
+    // Set the CSS direction to ltr
+    $cssdir: 'rtl';
+    // Find the CSS named direction and opposite direction
+    $dir: named-direction($cssdir);
+    $opp: opposite-direction($dir);
+
+
+    [dir="#{$cssdir}"] & {
+      clear: $opp;
+
+      @if $end-row {
+        float: $opp;
+      }
+      @else {
+        float: $dir;
+        margin-#{$dir}: 0;
+        margin-#{$opp}: gutter-span($gutter, $columns);
+      }
+    }
+  }
+
+  @include span-shared;
+}
+
+@mixin push-float($span, $location, $columns: false, $gutter: false) {
+
+  @if type-of($location) == string {
+    $location: 1;
+  }
+
+  // Find the columns and gutters
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  // Combine the columns and gutters
+  $gutter: column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns);
+
+  margin-left: $gutter;
+}
+
+@mixin pull-float($span, $location, $columns: false, $gutter: false) {
+
+  @if type-of($location) == string {
+    $location: 1;
+  }
+
+  // Find the columns and gutters
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  // Combine the columns and gutters
+  $gutter: (column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns)) * -1;
+
+  margin-left: $gutter;
+}

data/stylesheets/singularitygs/api/_isolation.scss

@@ -0,0 +1,48 @@
+@mixin output-isolation($span, $location, $columns, $gutter, $options: false) {
+
+  @if $options == false {
+    $options: 'right';
+  }
+
+  $gutter: find-gutter($gutter);
+
+  @if $direction == 'ltr' or $direction == 'both' {
+    // Set the CSS direction to ltr
+    $cssdir: 'ltr';
+    // Find the CSS named direction and opposite direction
+    $dir: named-direction($cssdir);
+    $opp: opposite-direction($dir);
+
+    width: column-span($span, $location, $columns);
+    margin-#{$dir}: column-span($location - 1, 1, $columns);
+    margin-#{$opp}: -100%;
+    float: $dir;
+    clear: unquote($options);
+  }
+
+  @if $direction == 'rtl' or $direction == 'both' {
+    // Set the CSS direction to ltr
+    $cssdir: 'rtl';
+    // Find the CSS named direction and opposite direction
+    $dir: named-direction($cssdir);
+    $opp: opposite-direction($dir);
+
+    [dir="#{$cssdir}"] & {
+      margin-#{$dir}: column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns);
+      margin-#{$opp}: -100%;
+      float: $dir;
+      clear: unquote($options);
+    }
+  }
+
+  @include span-shared;
+
+}
+
+@mixin push-isolation($span, $location, $columns: false, $gutter: false) {
+  @include push-float($span, $location, $columns, $gutter);
+}
+
+@mixin pull-isolation($span, $location, $columns: false, $gutter: false) {
+  @include pull-float($span, $location, $columns, $gutter);
+}

data/stylesheets/singularitygs/grids/_add.scss

@@ -0,0 +1,10 @@
+@function add-grid($grid-definition) {
+  $parsed: parse-add($grid-definition);
+
+  @if nth($parsed, 2) == false and length($grids) == 0 {
+    @return nth($parsed, 1);
+  }
+  @else {
+    @return append($grids, (nth($parsed, 1) nth($parsed, 2)), 'comma');
+  }
+}

data/stylesheets/singularitygs/grids/_find.scss

@@ -0,0 +1,17 @@
+//////////////////////////////
+// Find Grid
+//
+// Finds the grid that you are on.
+// From Singularity
+// Must be using Breakpoint to work properly
+//////////////////////////////
+@function find-grid($user-columns: false) {
+
+  // We supply a default if the user hasn't set any grids and hasn't passed in a custom column set
+  // The default supplied is based on original Susy options
+  @if length($grids) == 0 and $user-columns == false {
+    $user-columns: 12;
+  }
+
+  @return find-object($grids, $user-columns);
+}

data/stylesheets/singularitygs/gutters/_add.scss

@@ -0,0 +1,10 @@
+@function add-gutter($gutter-definition) {
+  $parsed: parse-add($gutter-definition);
+
+  @if nth($parsed, 2) == false and length($gutters) == 0 {
+    @return nth($parsed, 1);
+  }
+  @else {
+    @return append($gutters, (nth($parsed, 1) nth($parsed, 2)), 'comma');
+  }
+}

data/stylesheets/singularitygs/gutters/_find.scss

@@ -0,0 +1,17 @@
+//////////////////////////////
+// Find gutter
+//
+// Finds the gutter that you are on.
+// From Singularity
+// Must be using Breakpoint to work properly
+//////////////////////////////
+@function find-gutter($user-gutter: false) {
+
+  // We supply a default if the user hasn't set any gutters and hasn't passed in a custom gutter
+  // The default supplied is based on original Susy options
+  @if length($gutters) == 0 and $user-gutter == false {
+    $user-gutter: .25;
+  }
+
+  @return find-object($gutters, $user-gutter);
+}

data/stylesheets/singularitygs/helpers/_background-grid.scss

@@ -0,0 +1,186 @@
+// -----------------------------------------------
+// Grid Overlay & Background
+//
+// Uses all your settings to create a grid background for a container element.
+// There are three ways you can display a grid:
+//
+// 1. Manually apply the background to the element -
+//
+//        .container {
+//          @include background-grid;
+//        }
+//
+// 2. Add a switch to toggle an overlay -
+//
+//        @include grid-overlay('.container');
+//
+// 3. Toggle grid with JavaScript
+//
+//        @include grid-toggle;
+//        Add [data-development-grid="show"] to item you want grid applied to
+//        Add "grid.min.js" to your HTML
+//
+// The first will apply a grid background to your container calculated using your
+// grid settings, media breakpoints etc.
+//
+// The second will add a switch to your page which allows you to view a grid
+// overlay over your container (or <body> if none is provided) by hovering over
+// the switch. if you need your mouse for other things you can toggle the overlay
+// on permanently by inspecting <head> and checking :hover in your styles panel.
+//
+// The thid will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard.
+//
+// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
+
+
+// -----------------------------------------------
+// Imports
+@import "compass/css3";
+
+// -----------------------------------------------
+// Grid Overlay
+
+// The overlay is painted over your container's ::after pseudo-element, so we must
+// give position to the container itself, if relative doesn't suit your layout
+// it can be replaced by absolute/fixed.
+$overlay-position: relative !default;
+
+// Set the position of the switch.
+$overlay-switch-position: left bottom !default;
+
+@mixin grid-overlay (
+  $selector: 'body',
+  $columns: false,
+  $gutter: false,
+  $color: rgba(Chocolate, .5)
+) {
+
+  $vert: nth($overlay-switch-position, 1);
+  $horz: nth($overlay-switch-position, 2);
+
+  head {
+    display: block;
+    position: fixed;
+    #{$horz}: 10px;
+    #{$vert}: 10px;
+    z-index: 99;
+    color: #333;
+    text-shadow: 0 0 3px #fff;
+    @include transition(all .4s);
+    &::before {
+      content: "||||";
+      display: block;
+      padding: 10px 14px;
+      letter-spacing: -1;
+      font: {
+        family: sans-serif;
+        size: 26px;
+        weight: bold;
+      }
+    }
+    &:hover {
+      color: #333;
+      text-shadow: 1px 1px #fff;
+      ~ body #{$selector} {
+        position: unquote($overlay-position);
+      }
+      ~ #{$selector}::after,
+      ~ body #{$selector}::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+        @include background-grid($columns, $gutter, $color);
+      }
+    }
+  }
+}
+
+// -----------------------------------------------
+// Grid Toggle
+
+@mixin grid-toggle(
+  $columns: false,
+  $gutter: false,
+  $color: rgba(Chocolate, .5)
+  ) {
+
+  [data-development-grid="show"] {
+    @include background-grid;
+  }
+}
+
+// -----------------------------------------------
+// Grid Background
+
+@mixin background-grid(
+  $columns: false,
+  $gutter: false,
+  $color: rgba(Chocolate, .5)
+) {
+
+  $background-length: length($grids);
+
+  @if not ($columns) {
+    @for $i from 1 through $background-length {
+      @if $i == 1 {
+        @include background-build($columns, $gutter, $color);
+      }
+      @else {
+        $mq: nth(nth($grids, $i), 2);
+
+        $grid: nth(nth($grids, $i), 1);
+        @include breakpoint($mq) {
+          @include background-build($grid, $gutter, $color);
+        }
+      }
+    }
+  }
+}
+
+@mixin background-build($columns, $gutter, $color) {
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  $stops: background-gradient-stops($columns, $gutter, $color);
+
+  @include background(
+    linear-gradient(
+      left, $stops
+    )
+  );
+}
+
+//////////////////////////////
+// Get the stops of the gradient
+//////////////////////////////
+@function background-gradient-stops($columns, $gutter, $color) {
+  $bkg: ();
+  $count: column-count($columns);
+
+  @for $i from 1 through column-count($columns) {
+    $bkg: join($bkg, background-column-gradient($i, $columns, $gutter, $color), comma);
+  }
+
+  @return $bkg;
+}
+
+//////////////////////////////
+// Get the columns
+//////////////////////////////
+@function background-column-gradient($location, $columns, $gutter, $color) {
+
+  @if $location == 1 {
+    @return lighten($color, 5%) 0%, darken($color, 5%) column-span(1, 1, $columns), lighten($color, 30%) column-span(1, 1, $columns);
+  }
+  @if $location == column-count($columns) {
+    @return lighten($color, 30%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), lighten($color, 5%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), darken($color, 5%) 100%;
+  }
+  @if $location > 1 {
+    @return lighten($color, 30%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), lighten($color, 5%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), darken($color, 5%) column-span($location, 1, $columns), lighten($color, 30%) column-span($location, 1, $columns);
+  }
+}