susy 1.0.alpha.0

data/sass/susy/_margin.scss

@@ -0,0 +1,79 @@
+// ---------------------------------------------------------------------------
+// Margin Mixins
+
+// Apply 'columns' margin before an element to push it along the grid.
+//
+// $columns : The number of columns to span.
+// $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)
+@mixin pre(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {  
+  margin-#{$from}: space($columns,$context);
+}
+
+// 'push' is a synonymn for 'pre'
+@mixin push(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  @include pre($columns,$context,$from)
+}
+
+// Apply negative 'columns' margin before an element to pull it along the grid.
+//
+// $columns : The number of columns to span.
+// $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)
+@mixin pull(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  margin-#{$from}: 0 - space($columns, $context);
+}
+
+// Apply 'columns' margin after an element to contain it in a grid.
+//
+// $columns : The number of columns to span.
+// $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)
+@mixin post(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  $to : opposite-position($from);
+  margin-#{$to}: space($columns,$context);
+}
+
+// Apply 'columns' before and/or after an element to contain it on a grid.
+//
+// $pre     : The number of columns to add as margin before.
+// $post    : The number of columns to add as margin after.
+// $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)
+@mixin squish(
+  $pre      : false,
+  $post     : false,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  @if $pre {
+    @include pre($pre,$context,$from)
+  }
+  @if $post {
+    @include post($post,$context,$from)
+  }
+}

data/sass/susy/_media.scss

@@ -0,0 +1,93 @@
+// ---------------------------------------------------------------------------
+// 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;
+
+  // apply children in this new layout context.
+  @content;
+
+  // return to default $total-columns setting.
+  $total-columns    : $default-layout;
+}
+
+// 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 boolian 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);
+
+  // 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 $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());
+          }
+          @if $min {
+            // Min only:
+            @media (min-width: $min) {
+              @content;
+            }
+          } @else {
+            // Max only: 
+            @media (max-width: $max) {
+              @content;
+            }              
+          }
+        }
+        // Set an IE fallback
+        @if $ie {
+          @if (type-of($ie) == 'bool') {
+            $ie: 'lt-ie9';
+          }
+          .#{$ie} & {
+            @content;
+          }
+        }
+      }
+    } @else {
+      @warn "Something went horribly wrong here. Try adjusting your variables.";
+    }
+
+  } @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/_padding.scss

@@ -0,0 +1,51 @@
+// ---------------------------------------------------------------------------
+// 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)
+@mixin prefix(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  padding-#{$from}: space($columns, $context);
+}
+
+// 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)
+@mixin suffix(
+  $columns,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  $to           : opposite-position($from);
+  padding-#{$to}: space($columns, $context);
+}
+
+// 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)
+@mixin pad(
+  $prefix   : false,
+  $suffix   : false,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  @if $prefix {
+    @include prefix($prefix, $context, $from);
+  }
+  @if $suffix {
+    @include suffix($suffix, $context, $from);
+  }
+}

data/sass/susy/_settings.scss

@@ -0,0 +1,36 @@
+// ---------------------------------------------------------------------------
+// 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;
+
+// Add padding to your grid.
+$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    : mixed           !default;

data/susy.gemspec

@@ -0,0 +1,32 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = "susy"
+  s.version = "1.0.alpha.0"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
+  s.authors = ["Eric Meyer"]
+  s.date = "2012-05-06"
+  s.description = "Responsive web design with grids the quick and reliable way."
+  s.email = "eric@oddbird.net"
+  s.extra_rdoc_files = ["CHANGELOG.mkdn", "LICENSE.txt", "README.mkdn", "lib/susy.rb"]
+  s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.mkdn", "REFERENCE.mkdn", "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", "susy.gemspec", "templates/project/_base.scss", "templates/project/manifest.rb", "templates/project/screen.scss"]
+  s.homepage = "http://susy.oddbird.net/"
+  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Susy", "--main", "README.mkdn"]
+  s.require_paths = ["lib"]
+  s.rubyforge_project = "susy"
+  s.rubygems_version = "1.8.15"
+  s.summary = "A responsive grid system plugin for Compass."
+
+  if s.respond_to? :specification_version then
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<compass>, [">= 0.13.alpha.0"])
+    else
+      s.add_dependency(%q<compass>, [">= 0.13.alpha.0"])
+    end
+  else
+    s.add_dependency(%q<compass>, [">= 0.13.alpha.0"])
+  end
+end

data/templates/project/_base.scss

@@ -0,0 +1,14 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "susy";
+
+// ---------------------------------------------------------------------------
+// Basic Grid
+
+$total-columns  : 12;
+$column-width   : 4em;
+$gutter-width   : 1em;
+$grid-padding   : $gutter-width;
+
+$show-grid-backgrounds  : true;

data/templates/project/manifest.rb

@@ -0,0 +1,19 @@
+stylesheet 'screen.scss', :media => "screen, projection"
+stylesheet '_base.scss'
+
+description "Susy: a flexible static/fluid/elastic grid system native to compass."
+
+help %Q{
+Please see the Susy website for all documentation and tutorials:
+
+    http://www.oddbird.net/susy
+}
+
+welcome_message %Q{
+Please see the Susy website for all documentation and tutorials:
+
+    http://www.oddbird.net/susy
+
+To get started, set up your grid in the base partial by following the inline instructions.
+}
+

data/templates/project/screen.scss

@@ -0,0 +1,12 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "base";
+
+/* -------------------------------------------------------------------------*/
+/* Layout */
+
+.container {
+  @include container;
+  @include susy-grid-background;
+}

metadata

@@ -0,0 +1,110 @@
+--- !ruby/object:Gem::Specification 
+name: susy
+version: !ruby/object:Gem::Version 
+  hash: -3702664260
+  prerelease: 4
+  segments: 
+  - 1
+  - 0
+  - alpha
+  - 0
+  version: 1.0.alpha.0
+platform: ruby
+authors: 
+- Eric Meyer
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-05-06 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: -3702664252
+        segments: 
+        - 0
+        - 13
+        - alpha
+        - 0
+        version: 0.13.alpha.0
+  type: :runtime
+  version_requirements: *id001
+description: Responsive web design with grids the quick and reliable way.
+email: eric@oddbird.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- CHANGELOG.mkdn
+- LICENSE.txt
+- README.mkdn
+- lib/susy.rb
+files: 
+- CHANGELOG.mkdn
+- LICENSE.txt
+- Manifest
+- README.mkdn
+- REFERENCE.mkdn
+- 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
+- susy.gemspec
+- templates/project/_base.scss
+- templates/project/manifest.rb
+- templates/project/screen.scss
+homepage: http://susy.oddbird.net/
+licenses: []
+
+post_install_message: 
+rdoc_options: 
+- --line-numbers
+- --inline-source
+- --title
+- Susy
+- --main
+- README.mkdn
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 11
+      segments: 
+      - 1
+      - 2
+      version: "1.2"
+requirements: []
+
+rubyforge_project: susy
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: A responsive grid system plugin for Compass.
+test_files: []
+