compass-susy-plugin 0.6.2

data/lib/susy.rb

@@ -0,0 +1,2 @@
+require File.join(File.dirname(__FILE__), 'susy', 'compass_plugin')
+require File.join(File.dirname(__FILE__), 'susy', 'sass_extensions')

data/lib/susy/compass_plugin.rb

@@ -0,0 +1,5 @@
+options = Hash.new
+options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
+options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
+
+Compass::Frameworks.register('susy', options)

data/lib/susy/sass_extensions.rb

@@ -0,0 +1,79 @@
+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).
+  # return total width of container (without units)
+  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)
+    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
+      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))
+  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 side gutter in a context of
+  #  'context_columns'
+  def side_gutter(context_columns = nil)
+    context_width = context(context_columns).value
+    sg = @@susy_side_gutter_width
+    Sass::Script::Number.new((sg / 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

@@ -0,0 +1,115 @@
+//** Grid Settings **//
+
+//**
+  Your basic units for the grid
+!grid_unit ||= "em"
+!total_cols ||= 16
+!col_width ||= 4
+!gutter_width ||= 1
+!side_gutter_width ||= !gutter_width
+!container_width = container(!total_cols, !col_width, !gutter_width, !side_gutter_width)
+
+
+//** 
+  set on the outer grid containing element.
+=container(!align = "left")
+  //  clear all floated columns
+  +clearfix
+  //  align the text back to the left (override for other alignments)
+  :text-align= !align
+  //  use auto horizontal margins to center your page in the body
+  :margin
+    :left auto
+    :right auto
+  //  set the page width based on column settings
+  :width= !container_width + !grid_unit
+  //  never exceed 100% of the browser window (no side-scrolling)
+  :max-width 100%
+
+
+//** 
+  set on any column element, even nested ones.
+  the first agument [required] is the number of columns to span
+  the second argument is the context (columns spanned by parent)
+  this is required in any nested context
+  by default a grid-col is floated left with a right gutter
+  override that with +float("right"), +first or +last
+=columns(!n, !context = false)
+  //  the width of the column is set as a percentage of the context
+  :width= columns(!n, !context) + "%"
+  //  the column is floated left
+  +float("left")
+  //  the right gutter is added as a percentage of the context
+  :margin-right= gutter(!context) + "%"
+
+//** 
+  set on any column to add empty colums before or after
+=prefix(!n, !context = false)
+  :padding-left= columns(!n, !context) + gutter(!context) + "%"
+
+=suffix(!n, !context = false)
+  :padding-right= columns(!n, !context) + gutter(!context) + "%"
+
+//**
+  set as shortcut for prefix and suffix
+=pad(!p = 0, !s = 0, !c = false)
+  @if !p != 0
+    +prefix(!p,!c)
+  @if !s != 0
+    +suffix(!s,!c)
+
+//**  
+  set on any element spanning the first column in non-nested context
+  to take side-gutters into account
+=alpha(!nested = false)
+  @if !nested == false
+    :margin-left= side_gutter() + "%"
+
+//**
+  when global constant !hacks == true:
+  - this will be called automatically with hacks
+  when global constant !hacks == false:
+  - you can call it yourself in ie.sass without the hacks
+=ie-omega(!nested = false, !right = false, !hack = false)
+  !s = side_gutter()
+  @if !right
+    @if !hack
+      :#margin-left -1%
+    @else
+      :margin-left -1%
+  @else
+    @if !nested
+      @if !hack
+        :#margin-right -1%
+      @else
+        :margin-right -1%
+    @else
+      @if !hack
+        :#margin-right= !s - 1 + "%"
+      @else
+        :margin-right= !s - 1 + "%"
+
+//**  
+  set on the last element of a row to take side-gutters into account
+  - set !nested for nested columns
+  - set !float for right-floated omega elements
+=omega(!nested = false, !right = false)
+  !s = side_gutter()
+  @if !nested
+    :margin-right 0
+  @else
+    :margin-right= !s + "%"
+  @if !hacks
+    /* ugly hacks for IE6-7 */
+    +ie-omega(!nested, !right,"*")
+    /* end ugly hacks */
+    
+//**
+  set on an element that will span it's entire context
+  - no need for +columns, +alpha or +omega on a +full element
+=full(!nested = false)
+  :clear both
+  @if !nested == false
+    !s = side_gutter() + "%"
+    margin-right= !s
+    margin-left= !s

data/sass/susy/_susy.sass

@@ -0,0 +1,18 @@
+//**
+  tell susy whether you are using hacks or conditional comments
+!hacks ||= true
+
+@import utils.sass
+@import text.sass
+@import grid.sass
+
+//** 
+  body font size set to browser default (usually 16px)
+=susy(!align = "center")
+  //  text-align set to center by default for auto-centering layouts 
+  //  (override !align for left/right-aligned designs)
+  :text-align= !align
+  //  set your base font sizes
+  :font-size= !base_font_size
+  :line-height= !base_line_height
+

data/sass/susy/_text.sass

@@ -0,0 +1,21 @@
+//** Text Settings **//
+
+//** 
+  You set the font and line heights in pixels
+!base_font_size_px ||= 12
+!base_line_height_px ||= 18
+
+
+//** 
+  Susy can do the math to make that 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) * 100 + "%"
+
+//** 
+  Because some serif fonts add line-height when switching to italics inline:
+=inline-italic
+  :font-style italic
+  :line-height .5
+

data/sass/susy/_utils.sass

@@ -0,0 +1,211 @@
+@import compass/utilities.sass
+
+//** 
+  removes all background images and colors from the element and offspring
+  then adds a grid image of your choosing. highlights divs on modern browsers
+=show-grid(!src)
+  :background
+    :image= image_url(!src)
+    :repeat repeat 
+    :position= side_gutter() + "% 0"
+  *
+    :background transparent
+  div
+    :background rgba(0,0,0,.125)
+
+//**
+  brings IE in line with inline-block display
+  - using hacks if called automatically because !hacks == true
+  - or without if you call it from ie.sass
+=ie-inline-block(!hack = false)
+  @if !hack
+    /* ugly hacks for IE6-7 */
+    :#display inline
+    // fixes alignment against native input/button on IE6
+    :#vertical-align auto
+    /* end ugly hacks */
+  @else
+    :display inline
+    // fixes alignment against native input/button on IE6
+    :vertical-align auto
+
+//**
+  an override for compass inline-block that lets you take advantage
+  of Susys !hacks constant. if true, hacks. if false, use ie-inline-block
+  to help ie along in your ie.sass
+=inline-block
+  :display -moz-inline-box
+  :-moz-box-orient vertical
+  :display inline-block
+  :vertical-align middle
+  @if !hacks
+    +ie-inline-block("*")
+
+//** 
+  an inline-block list that works in IE
+  for those awkward moments when a floated horizontal list just wont cut it
+  if global !hacks == false:
+  - you'll need to fix list items in ie.sass with +ie-inline-block
+=inline-block-list(!hpad = 0)
+  +horizontal-list-container
+  li
+    +no-bullet
+    :white-space no-wrap
+    +inline-block
+    :padding 
+      :left= !hpad
+      :right= !hpad
+
+//** 
+  hide an element from the viewport, but keep it around for accessability
+=hide
+  :position absolute
+  :top -9999em
+
+//** 
+  a skip-to-content accessibility link that will appear on focus
+  set the location arguments if you care where it appears
+=skip-link(!t = 0, !r = false, !b = false, !l = false)
+  +hide
+  :display block
+  &:focus
+    @if !t
+      :top= !t
+    @if !r
+      :right= !r
+    @if !b
+      :bottom= !b
+    @if !l
+      :left= !l
+    :z-index 999
+
+// EXPERIMENTAL
+
+//**
+  [Opacity rules based on those in Compass Core Edge as of 7.18.09]
+  - These will be removed from Susy once they enter a major Compass release.
+  Provides cross-browser css opacity.
+  @param !opacity
+    A number between 0 and 1, where 0 is transparent and 1 is opaque.
+=opacity(!opacity)
+  :opacity= !opacity
+  :-moz-opacity= !opacity
+  :-khtml-opacity= !opacity
+  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
+  :filter= "alpha(opacity=" + round(!opacity*100) + ")"
+ 
+// Make an element completely transparent.
+=transparent
+  +opacity(0)
+ 
+// Make an element completely opaque.
+=opaque
+  +opacity(1)
+
+//**
+  rounded corners for Mozilla, Webkit and the future
+=border-radius(!r)
+  /* Mozilla (FireFox, Camino)
+  -moz-border-radius = !r
+  /* Webkit (Safari, Chrome)
+  -webkit-border-radius = !r
+  /* CSS3
+  border-radius = !r
+
+=border-corner-radius(!vert, !horz, !r)
+  /* Mozilla (FireFox, Camino)
+  -moz-border-radius-#{!vert}#{!horz}= !r
+  /* Webkit (Safari, Chrome)
+  -webkit-border-#{!vert}-#{!horz}-radius= !r
+  /* CSS3
+  border-#{!vert}-#{!horz}-radius= !r
+
+=border-top-left-radius(!r)
+  +border-corner-radius("top", "left", !r)
+
+=border-top-right-radius(!r)
+  +border-corner-radius("top", "right", !r)
+
+=border-bottom-right-radius(!r)
+  +border-corner-radius("bottom", "right", !r)
+
+=border-bottom-left-radius(!r)
+  +border-corner-radius("bottom", "left", !r)
+
+=border-top-radius(!r)
+  +border-top-left-radius(!r)
+  +border-top-right-radius(!r)
+
+=border-right-radius(!r)
+  +border-top-right-radius(!r)
+  +border-bottom-right-radius(!r)
+
+=border-bottom-radius(!r)
+  +border-bottom-right-radius(!r)
+  +border-bottom-left-radius(!r)
+
+=border-left-radius(!r)
+  +border-top-left-radius(!r)
+  +border-bottom-left-radius(!r)
+
+//**
+  change the box model for Mozilla, Webkit, IE8 and the future
+=box-sizing(!bs)
+  /* Mozilla (FireFox, Camino)
+  -moz-box-sizing= !bs
+  /* Webkit (Safari, Chrome)
+  -webkit-box-sizing= !bs
+  /* IE (8)
+  -ms-box-sizing= !bs
+  /* CSS3
+  box-sizing= !bs
+
+//**
+  box shadow for Webkit and the future
+  - arguments are horizontal offset, vertical offset, blur and color
+=box-shadow(!ho, !vo, !b, !c )
+  /* Webkit (Safari, Chrome)
+  -webkit-box-shadow= !ho !vo !b !c
+  /* Mozilla (Firefox, Camino)
+  -moz-box-shadow= !ho !vo !b !c
+  /* CSS3
+  box-shadow= !ho !vo !b !c
+
+
+//**
+  CSS3 columns for Mozilla, Webkit and the Future
+
+=column-count(!n)
+  :-moz-column-count= !n
+  :-webkit-column-count= !n
+  :column-count= !n
+
+=column-gap(!u)
+  :-moz-column-gap= !u
+  :-webkit-column-gap= !u
+  :column-gap= !u
+
+=column-width(!u)
+  :-moz-column-width= !u
+  :-webkit-column-width= !u
+  :column-width= !u
+
+=column-rule-width(!w)
+  :-moz-column-rule-width= !w
+  :-webkit-column-rule-width= !w
+  :column-rule-width= !w
+
+=column-rule-style(!s)
+  :-moz-column-rule-style= !s
+  :-webkit-column-rule-style= !s
+  :column-rule-style= !s
+
+=column-rule-color(!c)
+  :-moz-column-rule-color= !c
+  :-webkit-column-rule-color= !c
+  :column-rule-color= !c
+
+=column-rule(!w, !s = "solid", !c = " ")
+  +column-rule-width(!w)
+  +column-rule-style(!s)
+  +column-rule-color(!c)