compass 0.8.17 → 0.10.0.pre1

data/examples/susy/extensions/susy/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/examples/susy/extensions/susy/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/examples/susy/extensions/susy/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/examples/susy/extensions/susy/sass/susy/_grid.sass

@@ -0,0 +1,128 @@
+//** The Susy Grid **//
+// Updated 11.20.2009 by Eric A. Meyer
+
+
+// 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
+!side_gutter_width ||= !gutter_width
+
+
+// Susy will set your outer shell based on the variables above.
+!container_width = container(!total_cols, !col_width, !gutter_width, !side_gutter_width)
+
+
+// Set on the outer grid-containing element(s).
+=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).
+//  - Context is required on any nested elements.
+//  - Context MUST NOT be declared on a top-level element.
+// By default a grid-column is floated left with a right gutter.
+//  - Override those with +float("right"), +alpha or +omega
+=columns(!n, !context = false)
+  // the column is floated left
+  +float("left")
+  // the width of the column is set as a percentage of the context
+  width= columns(!n, !context) + "%"
+  // the right gutter is added as a percentage of the 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) + "%"
+
+=suffix(!n, !context = false)
+  padding-right= columns(!n, !context) + gutter(!context) + "%"
+
+
+// Set as a shortcut for both 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. Recommended that you pass the
+// actual nested contexts (when nested) rather than a true/false argument
+// for the sake of consistency. Effect is the same.
+=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, !dir = "right", !hack = false)
+  !s = side_gutter()
+  @if !dir == "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 + "%"
+
+
+// Sets the direction that +omega elements are floated
+//  - Override !omega_float globally or set +float locally to change
+!omega_float ||= "right"
+
+
+// Set omega on the last element of a row to take side-gutters 
+// and the page edge into account. Set the !nested argument for nested columns. 
+// It is recommended that you pass the actual nested context when nested, 
+// rather than a true/false argument, for the sake of consistency. Effect is the same.
+=omega(!nested = false)
+  +float(!omega_float)
+  @if !nested
+    margin-right: 0
+  @else
+    margin-right= side_gutter() + "%"
+  @if !hacks
+    /* ugly hacks for IE6-7 */
+    +ie-omega(!nested, !omega_float, true)
+    /* 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/examples/susy/extensions/susy/sass/susy/_reset.sass

@@ -0,0 +1,7 @@
+/* @group reset */
+@import compass/reset.sass
+
+// HTML5 block-level elements need some help too.
+article, aside, dialog, figure, footer, header, hgroup, menu, nav, section
+  display: block
+/* @end */

data/examples/susy/extensions/susy/sass/susy/_susy.sass

@@ -0,0 +1,23 @@
+//** Susy **//
+// Updated 11.20.2009 by Eric A. Meyer
+
+
+// Tell susy whether you are using hacks or conditional comments.
+!hacks ||= true
+
+
+// Import all the Important Stuff.
+@import utils.sass
+@import text.sass
+@import grid.sass
+
+
+// Set Susy on your BODY element to get things started.
+=susy(!align = "center")
+  // 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
+

data/examples/susy/extensions/susy/sass/susy/_text.sass

@@ -0,0 +1,15 @@
+//** Susy Text Settings **//
+// Updated 11.20.2009 by Eric A. Meyer
+
+
+// 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"

data/examples/susy/extensions/susy/sass/susy/_utils.sass

@@ -0,0 +1,81 @@
+//** Susy Utilities **//
+// Updated 11.20.2009 by Eric A. Meyer
+
+
+// An extension of the Compass Core Utilities
+@import compass/utilities.sass
+
+
+// Apply to you container element(s) to show a grid image.
+//  - You need to supply the image. Susy can't do everything.
+=show-grid(!src)
+  background:
+    image= image_url(!src)
+    repeat: repeat 
+    position= side_gutter() + "% 0"
+
+
+// Brings IE in line with inline-block display
+//  - Using hacks if called automatically because !hacks == true
+//  - Or not, if you call it from ie.sass because !hacks == false
+=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(true)
+
+
+// An inline-block list that works in IE
+// For those awkward moments when a floated horizontal list just wont cut it
+// NOTE: 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
+    +inline-block
+    white-space: no-wrap
+    padding:
+      left= !hpad
+      right= !hpad
+
+
+// Hide an element from the viewport, but keep it around for accessability
+=hide
+  position: absolute
+  top: -9999em
+
+
+// Apply to skip-to-content accessibility links 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

data/examples/susy/extensions/susy/templates/project/_base.sass

@@ -0,0 +1,62 @@
+//**
+//  Susy: Fixed-Elastic-Fluid grids without all the math
+//  By: Eric A. Meyer and OddBird Collective
+//  Site: www.oddbird.net/susy/
+//**
+
+// 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
+!side_gutter_width = !gutter_width
+
+
+// OMEGA_FLOAT
+// By default, +omega elements are floated right.
+// You can override that globally here:
+// !omega_float = "right"
+
+
+// HACKS
+// Are you using hacks or conditional comments? Susy makes both possible.
+// Leave this as 'true' to use hacks, set it as false for conditional comments.
+// Conditional comments will require overrides for +omega, +inline-block and
+// several other mixins.
+// !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
+
+
+// COLORS
+// Set any colors you will need later.
+!main = #194C66
+!alt = #CC6633
+
+
+// FONTS
+// Give yourself some font stacks to work with.
+=sans-family
+  font-family: Helvetica, Arial, sans-serif
+
+=serif-family
+  font-family: Baskerville, Palatino, serif
+
+
+// OTHER MIXINS
+// Mixins set here will be available in defaults, screen, print and IE
+// Or anywhere you import either base.sass or defaults.sass

data/examples/susy/extensions/susy/templates/project/_defaults.sass

@@ -0,0 +1,147 @@
+//** DEFAULT STYLES **//
+// Don't forget to set your default styles.
+
+
+// Get all the details and mixins from base.sass
+@import base.sass
+// Reset browser defaults, and prepare block-level HTML5 elements
+@import susy/reset.sass
+
+
+/* @group defaults */
+
+body
+  +sans-family
+  color= !main
+
+/* @group links */
+
+\:focus
+  outline= 1px "dotted" !alt
+
+a
+  &:link, &:visited
+    color= !alt
+  &:focus, &:hover, &:active
+    color= !alt - #222
+    text-decoration: none
+
+/* @end */
+
+
+/* @group headers */
+
+h1, h2, h3, h4, h5, h6
+  font-weight: bold
+
+/* @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"
+
+th
+  :font-weight bold
+
+/* @end */
+
+
+/* @group block tags */
+
+p
+  :margin= !base_line_height 0
+
+=list-default(!ol = false)
+  :margin= !base_line_height
+  @if !ol
+    :list-style decimal
+  @else
+    :list-style disc
+
+=no-style-list
+  +no-bullets
+  :margin 0
+  :padding 0
+
+ol
+  +list-default("ol")
+
+ul
+  +list-default
+
+blockquote
+  :margin= !base_line_height
+  +serif-family
+
+/* @end */
+
+
+/* @group inline tags */
+
+cite
+  :font-style italic
+
+em
+  :font-style italic
+
+strong
+  :font-weight bold
+
+ins
+  :text-decoration underline
+
+del
+  :text-decoration line-through
+
+q
+  :font-style italic
+  em
+    :font-style normal
+
+/* @end */
+
+
+/* @group replaced tags */
+
+img
+  :vertical-align bottom
+
+/* @end */
+
+
+/* @end */