ericam-compass-susy-plugin 0.1.6 → 0.2.0

data/README.mkdn

@@ -1,13 +1,13 @@
 Susy - Compass Plugin
 ================================
 
-Let me introduce you to Susy
+Let me introduce you to Susy.
 
 Susy is a semantic CSS framework creator built native to [Compass](http://compass-style.org/).
 
 Susy is an expert at designing elastic (or fixed, if you swing that way) grids that will never activate that bloody side-scroll bar. Susy sets your width on the outer element (@grid-container@), adds a @max-width@ of @99%@ and builds the rest of your grid in percentages of the whole.
 
-Columns can also be nested by declaring the context along with the target width. Etc, Etc.
+Columns can also be nested by declaring the context along with the target width. Etc.
 
 Install
 =======
@@ -21,13 +21,13 @@ Create a Susy-based Compass Project
 
     compass -r susy -f susy <project name>
 
-Then edit your `base.sass`, `screen.sass` and `print.sass` files accordingly. A reset is added automatically.
+Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly. A reset is added automatically.
 
 Customizing your Grid System
 ============================
 
-To create a grid system, set the !grid_unit, !total_cols, !col_width, and
-!gutter_width variables in your `base.sass` and then use the `+grid-container` mixin to declare
+To create a grid system, set the `!grid_unit`, `!total_cols`, `!col_width`, and
+`!gutter_width` variables in your `base.sass` and then use the `+grid-container` mixin to declare
 your container element.
 
 Example:

data/VERSION

@@ -1 +1 @@
-0.1.6
+0.2.0

data/compass-susy-plugin.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.1.6"
+  s.version = "0.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]

data/lib/susy/sass_extensions.rb

@@ -1,7 +1,50 @@
 require 'sass'
 
 module Sass::Script::Functions
-  def enumerate(prefix, from_index, to_index)
-    Sass::Script::String.new(((from_index.value)..(to_index.value)).map{|i| "#{prefix}#{i}"}.join(", "))
+  # set the Susy column and gutter widths and number of columns
+  #  column and gutter widths should be sent as unitless numbers, 
+  #  though they may "really" be ems or pixels (_grid.sass handles units).
+  # return total width of container (without units)
+  def container(total_columns, column_width, gutter_width)
+    @@susy_total_columns = total_columns.value
+    @@susy_column_width = Float(column_width.value)
+    @@susy_gutter_width = Float(gutter_width.value)
+    context
   end
-end
+
+  # return the width of 'n' columns plus 'n - 1' gutters
+  def context(n = nil)
+    begin
+      n = n.value
+    rescue NoMethodError
+      n = @@susy_total_columns
+    end
+    c, g = [@@susy_column_width, @@susy_gutter_width]
+    Sass::Script::Number.new((n * c) + ((n - 1) * g))
+  end
+
+  # return the percentage width of 'number' columns in a context of
+  #  'context_columns'
+  def columns(number, context_columns = nil)
+    n = number.value
+    context_width = context(context_columns).value
+    c, g = [@@susy_column_width, @@susy_gutter_width]
+    Sass::Script::Number.new((((n * c) + ((n - 1) * g)) / context_width) * 100)
+  end
+
+  # return the percentage width of a single gutter in a context of
+  #  'context_columns'
+  def gutter(context_columns = nil)
+    context_width = context(context_columns).value
+    g = @@susy_gutter_width
+    Sass::Script::Number.new((g / context_width) * 100)
+  end
+
+  # return the percentage width of a single column in a context of
+  #  'context_columns'
+  def column(context_columns = nil)
+    context_width = context(context_columns).value
+    c = @@susy_column_width
+    Sass::Script::Number.new((c / context_width) * 100)
+  end
+end

data/sass/susy/_grid.sass

@@ -2,22 +2,20 @@
 !total_cols ||= 16
 !col_width ||= 4
 !gutter_width ||= 1
+!container_width = container(!total_cols, !col_width, !gutter_width)
 
 =grid-container
   +clearfix
   :margin-left auto
   :margin-right auto
-  :width= (!total_cols * !col_width) + ((!total_cols - 1) * !gutter_width) + !grid_unit
+  :width= !container_width + !grid_unit
   :max-width 99%
 
-=get-col-width(!n, !context = !total_cols)
-  :width= ((!n * !col_width) + ((!n - 1) * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
-
 =grid-col(!n, !context = !total_cols)
-  +get-col-width(!n, !context)
+  :width= columns(!n, !context) + "%"
   :display inline
   :float left
-  :margin-right= !gutter_width / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
+  :margin-right= gutter(!context) + "%"
 
 =last
   :margin-right= 0
@@ -27,7 +25,7 @@
   :float right
 
 =grid-prefix(!n, !context = !total_cols)
-  :padding-left= ((!n * !col_width) + (!n * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
+  :padding-left= columns(!n, !context) + gutter(!context) + "%"
 
 =grid-suffix(!n, !context = !total_cols)
-  :padding-right= ((!n * !col_width) + (!n * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
+  :padding-right= columns(!n, !context) + gutter(!context) + "%"

data/templates/project/_base.sass

@@ -7,16 +7,19 @@
 /* RESET STYLES
 @import compass/reset.sass
 
-// MIXINS
-@import susy/utils.sass
-@import susy/grid.sass
-
 // GRID
+// override these values as needed for your grid layout
+
 // !grid_unit = "em"
 // !total_cols = 10
 // !col_width = 7
 // !gutter_width = 1
 
+// MIXINS
+//  (don't move these @imports above the GRID overrides)
+@import susy/utils.sass
+@import susy/grid.sass
+
 
 // COLORS
 !dark = #000
@@ -29,7 +32,7 @@
 !base_font_size_px ||= 12
 !base_line_height_px ||= 18
 
-// SUSY will do the math to make that relative
+// SUSY can do the math to make that relative
 !base_line_height = (!base_line_height_px / !base_font_size_px) + "em"
 !base_font_size = (!base_font_size_px / 16) + "em"
 
@@ -99,4 +102,4 @@ del
   :text-decoration line-through
 
 /* replaced tags
-img
+img

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: ericam-compass-susy-plugin
 version: !ruby/object:Gem::Version 
-  version: 0.1.6
+  version: 0.2.0
 platform: ruby
 authors: 
 - Eric Meyer