carljm-compass-susy-plugin 0.4.0 → 0.4.1

data/README.mkdn

@@ -82,7 +82,7 @@ Grid Basics
 * In nested contexts, all of these mixins take an extra final argument, the
   width in columns of the parent (nesting) element.
 
-* That's it for the basics! Here's a sample Susy grid layout:
+That's it for the basics! Here's a sample Susy grid layout:
 
     body
       +susy

data/VERSION

@@ -1 +1 @@
-0.4.0
+0.4.1

data/compass-susy-plugin.gemspec

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

data/docs/tutorial/index.mkdn

@@ -117,10 +117,14 @@ And style the links:
       &:focus, &:hover, &:active
         :color= !light
         :border-bottom
-          :width .1429em
+          :width= px2em(2) + "em"
           :style dashed
 
-(`.1429em` is just an approximation of `2px` in terms of our em units.)
+(Susy provides the convenience function `px2em`, which can approximate a pixel
+value in ems, given our chosen `!base_font_size_px`. Here we want the dashed
+bottom border to be 2 pixels wide at the default font size, but we size it in
+ems - the result here will be .1429em. Susy's math functions return bare
+numbers, so we add "em" ourselves).
 
 And we'll add a bit of margin to our paragraphs:
     
@@ -332,5 +336,5 @@ Compass than Susy.
   place](03_structure/) (this should match what you have if you followed
   along).
 
-* [My final styles](../src/) for [the site](http://www.oddbird.net/susyss/).
+* [My final styles](../src/) for [the site](http://www.oddbird.net/susy/).
 

data/lib/susy/sass_extensions.rb

@@ -1,6 +1,20 @@
 require 'sass'
 
 module Sass::Script::Functions
+  # set the Susy base font size (in pixels)
+  # return the percentage base font size
+  #  this could be done in Sass, but we need to store the px_size so we
+  #  can provide a px_to_em function
+  def base_font_size(base_font_size_px)
+    @@susy_base_font_size_px = Float(base_font_size_px.value)
+    Sass::Script::Number.new((@@susy_base_font_size_px / 16) * 100)
+  end
+
+  # approximate a given pixel size in ems
+  def px2em(size_in_px)
+    Sass::Script::Number.new((size_in_px.value / @@susy_base_font_size_px))
+  end
+
   # set the Susy column and gutter widths and number of columns
   #  column, gutter and padding widths should be sent as unitless numbers, 
   #  though they may "really" be ems or pixels (_grid.sass handles units).

data/sass/susy/_grid.sass

@@ -52,7 +52,7 @@
 
 //**  
   set on the first element of a row to take side-gutters into account
-  - must override `!nested` for nested columns
+  - must set !n for nested columns
 =alpha(!nested = false)
   @if !nested
     :margin-left 0
@@ -61,30 +61,22 @@
 
 //**  
   set on the last element of a row to take side-gutters into account
-  - must override `!nested` for nested columns
-=omega(!n = false)
-  @if !n    
-    :margin-right= 0
+  - set !nested for nested columns
+  - set !right for right-floated omega elements
+=omega(!nested = false, !right = false)
+  !s = side_gutter()
+  @if !nested
+    :margin-right 0
   @else
-    :margin-right= side_gutter() + "%"
-
-//**  
-  use to override +omega in ie.sass for IE6-7 to handle sub-pixel rounding issues
-  - must override `!nested` for nested columns
-  - must override `!right` for right-floated omega elements
-=ie-omega(!nested = false, !right = false)
+    :margin-right= !s + "%"
+  /* ugly hacks for IE6-7 */
   @if !right
-    @if !nested    
-      :margin-right 0
-    @else
-      :margin-right= side_gutter() + "%"
-    :margin-left -1%
+    :#margin-left -1%
   @else
-    @if !nested    
-      :margin-right= -1%
+    @if !nested
+      :#margin-right -1%
     @else
-      :margin-right= side_gutter() - 1 + "%"
-
+      :#margin-right= !s - 1 + "%"
 
 //**
   set on an element that will span it's entire context

data/sass/susy/_text.sass

@@ -8,7 +8,9 @@
 
 //** 
   Susy can do the math to make that relative
-!base_font_size = (!base_font_size_px / 16) * 100 + "%"
+  we call base_font_size function (even though we could do the math here)
+  because Susy needs to "remember" our base_font_size_px for px2em()
+!base_font_size = base_font_size(!base_font_size_px) + "%"
 !base_line_height = (!base_line_height_px / !base_font_size_px) * 100 + "%"
 
 //** 

data/sass/susy/_utils.sass

@@ -2,14 +2,25 @@
 
 //** 
   removes all background images and colors from the element and offspring
-  then adds a grid image of your choosing
+  then adds a grid image of your choosing. highlights divs on modern browsers
 =show-grid(!src)
   :background
     :image= image_url(!src)
     :repeat repeat 
-    :position top left
+    :position= side_gutter() + "% 0"
   *
     :background transparent
+  div
+    :background rgba(0,0,0,.125)
+
+=inline-block
+  :display -moz-inline-box
+  :-moz-box-orient vertical
+  :display inline-block
+  :vertical-align middle
+  :#display inline
+  // fixes alignment against native input/button on IE6
+  :#vertical-align auto
 
 //** 
   an inline-block list that works in IE

data/templates/project/screen.sass

@@ -46,8 +46,6 @@
   
 /*
   #page
-    +show-grid("../images/grid.png")
-    div
-      :background rgba(0,0,0,.125)
+    +show-grid("grid.png")
 
 /* @end */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: carljm-compass-susy-plugin
 version: !ruby/object:Gem::Version 
-  version: 0.4.0
+  version: 0.4.1
 platform: ruby
 authors: 
 - Eric Meyer