compass-susy-plugin 0.7.0.pre1 → 0.7.0.pre2

data/README.mkdn

@@ -68,9 +68,8 @@ Grid Basics
 * Set defaults for all the important HTML tags in `_defaults.sass`. It's
   better than using the browser defaults. And better than using ours.
 
-* Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
-  element and the `+container` mixin to the element that contains the page
-  grid.
+* Create your grid in `screen.sass`: apply the `+susy` mixin at the top level
+  and the `+container` mixin to the element that contains the page grid.
 
 * Use the `+columns` mixin to declare the width in columns of an element,
   or `+full` for any element spanning the full width of its context.
@@ -89,8 +88,7 @@ Grid Basics
 
 That's it for the basics! Here's a sample Susy grid layout:
 
-    body
-      +susy
+    +susy
      
     #page
       +container
@@ -128,7 +126,7 @@ Extra utilities are included in Susy's `utils.sass` file, with additional list
 options, experimental (CSS3/proprietary) CSS, and more.
 
 * `+show-grid(!src)` - Repeat the specified grid image on an element. Good for
-  testing your baseline grid.
+  testing your baseline and grid.
 
 * `+inline-block-list([!horizontalpadding])` - Make list items inline-block
   when floating just won't do the trick (if you need them centered or right).
@@ -136,26 +134,24 @@ options, experimental (CSS3/proprietary) CSS, and more.
 * `+hide` - Hide content from visual browsers while keeping accessability
   intact.
 
-* `+skip-link([!top = 0, !right, !bottom, !left])` - Hide a link, and then show
+* `+skip-link([!top, !right, !bottom, !left])` - Hide a link, and then show
   it again on focus. the TRBL settings allow you to place it absolutely on
   display. Default will be top left of the positioning context.
 
-And then the fun stuff in `_CSS3.sass`:
+And then the fun stuff in `_vertical_rhythm.sass`, written by Chris Eppstein
+and probably moving to the compass core before too long:
 
-* `+opacity(!opacity)` - add cross-browser opacity settings (takes a range of
-  0 to 1). `+transprent` and `+opaque` are available as shortcuts.
+* `+adjust-font-size-to(!font_size, [!lines])` - adjust the font size and number
+  of baseline (line) units to occupy.
 
-* `+border-radius(!radius)` - Rounded corners in supporting browsers.
-  `+border-bottom-left-radius` etc. all work.
+* `+leader([!lines, !font_size])` and `+trailer([!lines, !font_size])` - add
+  leading or trailing whitespace to an element. These are added as top and
+  bottom margins that keep your vertical rhythm intact.
 
-* `+box-sizing(!model)` - Set the box sizing model in supporting browsers.
+* `+top-border([!width, !lines, !font_size])` and `+bottom-border([!width,
+  !lines, !font_size])` will combine border and padding to create borders that
+  also keep the vertical rhythm going.
 
-* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` -
-  Box-shadow in supporting browsers.
-
-* `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
-  and `+column-rule(!width, !style, !color)` - CSS columns in supporting
-  browsers.
 
 Advanced Options
 ================
@@ -224,12 +220,13 @@ advanced options hidden inside. Here's a few:
 * `side_gutter()` is also available and takes no arguments since it is always
   used at the top nesting level.
 
-* `px2em()` takes one numeric argument representing the number of pixels you
-  want to mimic. The return is an em value (with no units declared) that
-  approximates that number of pixels. Useful for keeping your entire design
-  fluid.
-  
+* `!px2em` is a variable that represents the height of one pixel as a fraction
+  of your base em-height. Multiply it with your target pixel value to
+  represent that value in ems.
+
     Example:
     
         #nav
-          border-bottom= px2em(2) + "em"
+          border-bottom:
+            style: solid
+            width= !px2em*2

data/VERSION

@@ -1 +1 @@
-0.7.0.pre1
+0.7.0.pre2

data/compass-susy-plugin.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.7.0.pre1"
+  s.version = "0.7.0.pre2"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = %q{2009-11-30}
+  s.date = %q{2010-01-20}
   s.description = %q{Susy is a ground-up native Compass plugin grid system that takes full advantage of Sass' capabilities to remove the tedium from grid-based web design.}
   s.email = %q{eric@oddbird.net}
   s.extra_rdoc_files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "README.mkdn", "LICENSE.txt"]

data/lib/susy/sass_extensions.rb

@@ -1,79 +1,68 @@
 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
+  # some helpful constants
+  PERCENT = Sass::Script::Number.new(100, ["%"])
+  ONE = Sass::Script::Number.new(1)
+  TWO = Sass::Script::Number.new(2)
 
   # 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).
-  # return total width of container (without units)
+  # return total width of container
   def container(total_columns, column_width, gutter_width, side_gutter_width)
-    @@susy_total_columns = total_columns.value
-    @@susy_column_width = Float(column_width.value)
-    @@susy_gutter_width = Float(gutter_width.value)
-    @@susy_side_gutter_width = Float(side_gutter_width.value)
+    @@susy_total_columns = total_columns
+    @@susy_column_width = column_width
+    @@susy_gutter_width = gutter_width
+    @@susy_side_gutter_width = side_gutter_width
     context
   end
 
   # return the width of 'n' columns plus 'n - 1' gutters 
   # plus page padding in non-nested contexts
-  def context(n = nil)
-    begin
-      n = n.value
-    rescue NoMethodError
-      n = false
-    end
-    sg = 0
-    if !n
+  def context(n = false)
+    raise Sass::SyntaxError, "container() must be called before context() - should be called in susy/susy.sass" unless defined?(@@susy_total_columns)
+    sg = Sass::Script::Number.new(0)
+    if !n or !n.value
       n = @@susy_total_columns
       sg = @@susy_side_gutter_width
     end
     c, g = [@@susy_column_width, @@susy_gutter_width]
-    Sass::Script::Number.new(((n * c) + ((n - 1) * g)) + (sg * 2))
+    n.times(c).plus(n.minus(ONE).times(g)).plus(sg.times(TWO))
   end
 
-  # return the percentage width of 'number' columns in a context of
+  # return the percentage width of 'n' columns in a context of
   #  'context_columns'
-  def columns(number, context_columns = nil)
-    n = number.value
-    context_width = context(context_columns).value
+  def columns(n, context_columns = false)
+    raise Sass::SyntaxError, "container() must be called before columns() - should be called in susy/susy.sass" unless defined?(@@susy_column_width)
+    w = context(context_columns)
     c, g = [@@susy_column_width, @@susy_gutter_width]
-    Sass::Script::Number.new((((n * c) + ((n - 1) * g)) / context_width) * 100)
+    n.times(c).plus(n.minus(ONE).times(g)).div(w).times(PERCENT)
   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
+  def gutter(context_columns = false)
+    raise Sass::SyntaxError, "container() must be called before columns() - should be called in susy/susy.sass" unless defined?(@@susy_gutter_width)
+    w = context(context_columns)
     g = @@susy_gutter_width
-    Sass::Script::Number.new((g / context_width) * 100)
+    g.div(w).times(PERCENT)
   end
 
   # return the percentage width of a single side gutter in a context of
   #  'context_columns'
-  def side_gutter(context_columns = nil)
-    context_width = context(context_columns).value
+  def side_gutter(context_columns = false)
+    raise Sass::SyntaxError, "container() must be called before side_gutter() - should be called in susy/susy.sass" unless defined?(@@susy_side_gutter_width)
+    w = context(context_columns)
     sg = @@susy_side_gutter_width
-    Sass::Script::Number.new((sg / context_width) * 100)
+    sg.div(w).times(PERCENT)
   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
+  def column(context_columns = false)
+    raise Sass::SyntaxError, "container() must be called before column() - should be called in susy/susy.sass" unless defined?(@@susy_column_width)
+    w = context(context_columns)
     c = @@susy_column_width
-    Sass::Script::Number.new((c / context_width) * 100)
+    c.div(w).times(PERCENT)
   end
 end

data/sass/susy/_grid.sass

@@ -4,11 +4,9 @@
 
 // Your basic settings for the grid.
 // Override these in base.sass to customize your site.
-// The grid_unit will be used for col_width, gutter_width and side_gutter_width
-!grid_unit ||= "em"
 !total_cols ||= 12
-!col_width ||= 4
-!gutter_width ||= 1
+!col_width ||= 4em
+!gutter_width ||= 1em
 !side_gutter_width ||= !gutter_width
 
 
@@ -27,7 +25,7 @@
     left: auto
     right: auto
   // set the page width based on column settings
-  width= !container_width + !grid_unit
+  width= !container_width
   // never exceed 100% of the browser window (no side-scrolling)
   max-width: 100%
 
@@ -43,17 +41,17 @@
   // the column is floated left
   +float("left")
   // the width of the column is set as a percentage of the context
-  width= columns(!n, !context) + "%"
+  width= columns(!n, !context)
   // the right gutter is added as a percentage of the context
-  margin-right= gutter(!context) + "%"
+  margin-right= gutter(!context)
 
 
 // Set on any element to add empty colums as padding before or after.
 =prefix(!n, !context = false)
-  padding-left= columns(!n, !context) + gutter(!context) + "%"
+  padding-left= columns(!n, !context) + gutter(!context)
 
 =suffix(!n, !context = false)
-  padding-right= columns(!n, !context) + gutter(!context) + "%"
+  padding-right= columns(!n, !context) + gutter(!context)
 
 
 // Set as a shortcut for both prefix and suffix.
@@ -70,7 +68,7 @@
 // for the sake of consistency. Effect is the same.
 =alpha(!nested = false)
   @if !nested == false
-    margin-left= side_gutter() + "%"
+    margin-left= side_gutter()
 
 
 // When global constant !hacks == true:
@@ -92,9 +90,9 @@
         margin-right: -1%
     @else
       @if !hack
-        #margin-right= !s - 1 + "%"
+        #margin-right= !s - 1%
       @else
-        margin-right= !s - 1 + "%"
+        margin-right= !s - 1%
 
 
 // Sets the direction that +omega elements are floated
@@ -111,7 +109,7 @@
   @if !nested
     margin-right: 0
   @else
-    margin-right= side_gutter() + "%"
+    margin-right= side_gutter()
   @if !hacks
     /* ugly hacks for IE6-7 */
     +ie-omega(!nested, !omega_float, true)
@@ -123,6 +121,6 @@
 =full(!nested = false)
   clear: both
   @if !nested == false
-    !s = side_gutter() + "%"
+    !s = side_gutter()
     margin-right= !s
-    margin-left= !s
+    margin-left= !s

data/sass/susy/_susy.sass

@@ -1,5 +1,5 @@
 //** Susy **//
-// Updated 11.20.2009 by Eric A. Meyer
+// Updated 01.19.2010 by Eric A. Meyer
 
 
 // Tell susy whether you are using hacks or conditional comments.
@@ -15,10 +15,8 @@
 
 // Set Susy on your BODY element to get things started.
 =susy(!align = "center")
+  +establish-baseline
   // text-align set to center by default for auto-centering layouts 
   //  - override !align for left/right-aligned designs
-  text-align= !align
-  // font size is set against the browser default (usually 16px)
-  font-size= !base_font_size
-  line-height= !base_line_height
-
+  body
+    text-align= !align

data/sass/susy/_text.sass

@@ -1,15 +1,6 @@
 //** Susy Text Settings **//
-// Updated 11.20.2009 by Eric A. Meyer
+// Updated 01.19.2010 by Eric A. Meyer
 
+@import vertical_rhythm.sass
 
-// The font size and line height are declared in pixels.
-// You override these default settings in base.sass
-!base_font_size_px ||= 16
-!base_line_height_px ||= 24
-
-
-// Susy will do the math to make those sizes relative.
-// 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) + "em"
+!px2em = 1px / !base_font_size * 1em

data/sass/susy/_utils.sass

@@ -12,7 +12,7 @@
   background:
     image= image_url(!src)
     repeat: repeat 
-    position= side_gutter() + "% 0"
+    position= side_gutter() + " 0"
 
 
 // Brings IE in line with inline-block display
@@ -78,4 +78,4 @@
       bottom= !b
     @if !l
       left= !l
-    z-index: 999
+    z-index: 999

data/templates/project/_base.sass

@@ -4,13 +4,19 @@
 //  Site: www.oddbird.net/susy/
 //**
 
+
+// FONT-SIZE
+// Override these values as needed (defaults are 12/18)
+!base_font_size = 16px
+!base_line_height = 24px
+
+
 // GRID
 // Set these values as needed for your grid layout.
 //  - defaults are shown.
-!grid_unit = "em"
 !total_cols = 12
-!col_width = 4
-!gutter_width = 1
+!col_width = 4em
+!gutter_width = 1em
 !side_gutter_width = !gutter_width
 
 
@@ -28,15 +34,6 @@
 // !hacks = true
 
 
-// FONT-SIZE
-// Override these values as needed (defaults are shown)
-//  - You set the font and line heights in pixels.
-//  - Susy will do the math and give you !base_font_size and !base_line_height 
-//    variables, set flexibly against the common browser default of 16px
-!base_font_size_px = 16
-!base_line_height_px = 24
-
-
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.
 @import susy/susy.sass
@@ -44,7 +41,7 @@
 
 // COLORS
 // Set any colors you will need later.
-!main = #194C66
+!base = #194C66
 !alt = #CC6633
 
 
@@ -59,4 +56,4 @@
 
 // OTHER MIXINS
 // Mixins set here will be available in defaults, screen, print and IE
-// Or anywhere you import either base.sass or defaults.sass
+// Or anywhere you import either base.sass or defaults.sass

data/templates/project/_defaults.sass

@@ -12,12 +12,13 @@
 
 body
   +sans-family
-  color= !main
+  color= !base
 
 /* @group links */
 
-\:focus
-  outline= 1px "dotted" !alt
+a, input, textarea, button
+  &:focus
+    outline= 1px "dotted" !alt
 
 a
   &:link, &:visited
@@ -37,46 +38,21 @@ h1, h2, h3, h4, h5, h6
 /* @end */
 
 
-/* @group forms */
-
-form *:focus
-  outline: none
-
-fieldset
-  margin= !base_line_height 0
-
-legend
-  font-weight: bold
-  font-variant: small-caps
-
-label
-  display: block
-  margin-top= !base_line_height
-
-legend + label
-  margin-top: 0
-
-textarea, input[type="text"]
-  +box-sizing("border-box")
-  width: 100%
-
-/* @end */
-
-
 /* @group tables */
 
 /* tables still need 'cellspacing="0"' in the markup */
 
 table
-  :width 100%
-  :border= 1/16 + "em solid" !main + #333
-    :left none
-    :right none
-  :padding= 7/16 + "em 0"
-  :margin= 8/16 + "em 0"
+  width: 100%
+  border:
+    width: 0
+    style: solid 
+    color= !base
+  +top-border(1px, 0.5)
+  +bottom-border(1px, 0.5)
 
 th
-  :font-weight bold
+  font-weight: bold
 
 /* @end */
 
@@ -84,19 +60,21 @@ th
 /* @group block tags */
 
 p
-  :margin= !base_line_height 0
+  +leader
+  +trailer
 
 =list-default(!ol = false)
-  :margin= !base_line_height
+  +leader
+  +trailer
   @if !ol
-    :list-style decimal
+    list-style: decimal
   @else
-    :list-style disc
+    list-style: disc
 
 =no-style-list
   +no-bullets
-  :margin 0
-  :padding 0
+  margin: 0
+  padding: 0
 
 ol
   +list-default("ol")
@@ -105,7 +83,7 @@ ul
   +list-default
 
 blockquote
-  :margin= !base_line_height
+  margin= !base_rhythm_unit
   +serif-family
 
 /* @end */
@@ -114,24 +92,24 @@ blockquote
 /* @group inline tags */
 
 cite
-  :font-style italic
+  font-style: italic
 
 em
-  :font-style italic
+  font-style: italic
 
 strong
-  :font-weight bold
+  font-weight: bold
 
 ins
-  :text-decoration underline
+  text-decoration: underline
 
 del
-  :text-decoration line-through
+  text-decoration: line-through
 
 q
-  :font-style italic
+  font-style: italic
   em
-    :font-style normal
+    font-style: normal
 
 /* @end */
 
@@ -139,7 +117,33 @@ q
 /* @group replaced tags */
 
 img
-  :vertical-align bottom
+  vertical-align: bottom
+
+/* @end */
+
+
+/* @group forms */
+
+form *:focus
+  outline: none
+
+fieldset
+  +trailer
+
+legend
+  font-weight: bold
+  font-variant: small-caps
+
+label
+  display: block
+  +leader
+
+legend + label
+  margin-top: 0
+
+textarea, input:not([type="radio"])
+  +box-sizing("border-box")
+  width: 100%
 
 /* @end */
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: compass-susy-plugin
 version: !ruby/object:Gem::Version 
-  version: 0.7.0.pre1
+  version: 0.7.0.pre2
 platform: ruby
 authors: 
 - Eric Meyer
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2009-11-30 00:00:00 -07:00
+date: 2010-01-20 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency