compass-edge 0.9.1

data/examples/ninesixty/src/text.sass

@@ -0,0 +1,10 @@
+/*
+  960 Grid System ~ Text CSS.
+  Learn more ~ http://960.gs/
+  
+  Licensed under GPL and MIT.
+  
+
+@import 960/text.sass
+
++text

data/examples/yui/bootstrap.rb

@@ -0,0 +1,3 @@
+require File.join(File.dirname(__FILE__), '..', 'downloader')
+
+install_from_github('chriseppstein', 'yui-compass-plugin', 'yui')

data/examples/yui/divisions.html.haml

@@ -0,0 +1,179 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title Yahoo Grid Divisions Example
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+    :javascript
+      function changeTemplate() {
+        var templateClass = document.getElementById("current-template").value;
+        document.getElementById("doc4").className = templateClass;
+      }
+    %style{:type => "text/css"}
+      :sass
+        .yui-b
+          border: 1px dotted #ccc
+  %body
+    #doc4.yui-t2
+      #hd
+        %h1 Yahoo Grid Divisions Example
+      #bd
+        .yui-b
+          %h3 YUI Examples
+          %ul
+            %li
+              %a{:href=>"templates.html"} Template Presets
+            %li
+              %a{:href=>"typography.html"} Typography
+            %li
+              %a{:href=>"divisions.html"} Grid Divisions
+          %label{:for => "current-template"} Select Template Preset
+          %select{:id=>"current-template", :onchange => "changeTemplate()"}
+            %option{:value => "yui-t1"}= ".yui-t1"
+            %option{:value => "yui-t2", :selected => "selected"}= ".yui-t2"
+            %option{:value => "yui-t3"}= ".yui-t3"
+            %option{:value => "yui-t4"}= ".yui-t4"
+            %option{:value => "yui-t5"}= ".yui-t5"
+            %option{:value => "yui-t6"}= ".yui-t6"
+              
+        #yui-main
+          .yui-b
+            %h2 50/50 Division
+            %hr
+            .yui-g
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/33/33 Division
+            %hr
+            .yui-gb
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Middle
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 67/33 Division
+            %hr
+            .yui-gc
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/67 Division
+            %hr
+            .yui-gd
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 75/25 Division
+            %hr
+            .yui-ge
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 25/75 Division
+            %hr
+            .yui-gf
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+      #ft
+        Copyright © 2008. All Rights Reserved. 
+        

data/examples/yui/extensions/yui/stylesheets/_yui.sass

@@ -0,0 +1,7 @@
+@import yui/modules/base.sass
+@import yui/modules/fonts.sass
+@import yui/modules/grids.sass
+=yui
+  +yui-base
+  +yui-base-fonts
+  +yui-grids

data/examples/yui/extensions/yui/stylesheets/yui/modules/_base.sass

@@ -0,0 +1,70 @@
+=yui-base
+  body
+    :margin 10px
+
+  h1
+    :font-size 138.5%
+
+  h2
+    :font-size 123.1%
+
+  h3
+    :font-size 108%
+
+  h1, h2, h3
+    :margin 1em 0
+
+  h1,h2, h3, h4, h5, h6, strong, dt
+    :font-weight bold
+
+  optgroup
+    :font-weight normal
+
+  abbr, acronym
+    :border-bottom 1px dotted #000
+    :cursor help
+
+  em
+    :font-style italic
+
+  del
+    :text-decoration line-through
+
+  blockquote, ul, ol, dl
+    :margin 1em
+
+  ol,ul,dl
+    :margin-left 2em
+
+  ol li
+    :list-style decimal outside
+
+  ul li
+    :list-style disc outside
+
+  dl dd
+    :margin-left 1em
+
+  th, td
+    :border 1px solid #000
+    :padding .5em
+
+  th
+    :font-weight bold
+    :text-align center
+
+  caption
+    :margin-bottom .5em
+    :text-align center
+
+  sup
+    :vertical-align super
+
+  sub
+    :vertical-align sub
+
+  p, fieldset, table, pre
+    :margin-bottom 1em
+
+  button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"]
+    padding: 1px

data/examples/yui/extensions/yui/stylesheets/yui/modules/_fonts.sass

@@ -0,0 +1,45 @@
+!yui_default_base_font_size ||= 13px
+!yui_default_base_line_height ||= 1.231
+!yui_default_font_family ||= "arial,helvetica,clean,sans-serif"
+
+// Sets the font size specified in pixels using percents so that the base
+// font size changes and 1em has the correct value. When nesting font size
+// declarations, within the DOM tree, the base_font_size must be the parent's
+// effective font-size in pixels.
+// Usage Examples:
+//   .big
+//     +font-size(16px)
+//   .bigger
+//     +font-size(18px)
+//   .big .bigger
+//     +font-size(18px, 16px)
+//
+// For more information see the table found at http://developer.yahoo.com/yui/fonts/#fontsize
+=font-size(!size, !base_font_size = !yui_default_base_font_size)
+  :font-size= percentage(!size / !base_font_size)
+
+// Sets the base fonts for a page, this should be mixed into the top level of a stylesheet.
+=yui-base-fonts(!family = !yui_default_font_family, !size = !yui_default_base_font_size, !line_height = !yui_default_base_line_height)
+  body
+    :font
+      :size= !size
+      :family= !family
+    :line-height= !line_height
+    :*font-size small
+    :*font x-small
+
+  select,
+  input,
+  button,
+  textarea,
+  button
+    :font 99% arial,helvetica,clean,sans-serif
+
+  table
+    :font-size inherit
+    :font 100%
+
+  pre, code, kbd, samp, tt
+    :font-family monospace
+    :*font-size 108%
+    :line-height 100%

data/examples/yui/extensions/yui/stylesheets/yui/modules/_grids.sass

@@ -0,0 +1,385 @@
+// This is a port of YUI Grids version 2.6.0
+// Note: This is not really tested yet. Use at your own risk.
+
+@import compass/utilities/general/float.sass
+@import fonts.sass
+
+=yui-grids
+  +yui-grids-init
+  +yui-grid-templates
+  +yui-grid-divisions
+
+=yui-grid-templates
+  #doc
+    +yui-document(750px)
+  #doc2
+    +yui-document(950px)
+  #doc3
+    +yui-document("fluid")
+  #doc4
+    +yui-document(974px)
+  /* Section: Preset Template Rules (.yui-t[1-6])
+  .yui-t1
+    +yui-two-column-left-template(160px)
+  .yui-t2
+    +yui-two-column-left-template(180px)
+  .yui-t3
+    +yui-two-column-left-template(300px)
+  .yui-t4
+    +yui-two-column-right-template(180px)
+  .yui-t5
+    +yui-two-column-right-template(240px)
+  .yui-t6
+    +yui-two-column-right-template(300px)
+  .yui-t7
+    +yui-one-column-template
+
+=yui-group-clearing
+  zoom: 1
+  &:after
+    content: "."
+    display: block
+    height: 0
+    clear: both
+    visibility: hidden
+
+=yui-grids-init(!header = "#hd", !footer = "#ft", !body = "#bd")
+  /* Section: General Rules
+  body
+    :text-align center
+  @if !header
+    #{!header}
+      +yui-group-clearing
+  @if !footer
+    #{!footer}
+      +yui-group-clearing
+  @if !body
+    #{!body}
+      +yui-group-clearing
+
+=em-size(!style, !px_size, !base_font_size = !yui_default_base_font_size)
+  :#{!style}= 1em * !px_size / !base_font_size
+
+=em-size-hacked(!style, !px_size, !base_font_size = !yui_default_base_font_size)
+  +em-size(!style, !px_size, !base_font_size)
+  +em-size("*"+!style, !px_size * 39 / 40, !base_font_size)
+
+// All documents must have these styles
+=yui-document-base(!min_width = false)
+  :margin auto
+  :text-align left
+  @if !min_width
+    :min-width= !min_width
+
+=yui-block-base
+  :position relative
+  :_position static
+
+=yui-main-block
+  :float none
+  :width auto
+
+// Creates a fixed width document container
+// Pass "fluid" for the width to create a document that grows with the width of the browser.
+=yui-document(!width, !min_width = false, !base_font_size = !yui_default_base_font_size)
+  +yui-document-base(!min_width)
+  @if !width == "fluid"
+    :margin auto 10px
+    :width auto
+  @else
+    +em-size-hacked("width", !width, !base_font_size)
+
+=yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+  +yui-document(!document_width, !min_width, !base_font_size)
+  #{!block_selector}
+    +yui-block-base
+    :float left
+    +em-size-hacked("width", !column_width, !base_font_size)
+  #{!main_selector}
+    :width 100%
+    :float right
+    :margin-left -25em
+    #{!block_selector}
+      +yui-main-block
+      +em-size("margin-left", !column_width + 13px, !base_font_size)
+      // t3 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
+      @if !column_width > 180px
+        +em-size("*margin-left", (!column_width + 15px)  * 39 / 40, !base_font_size)
+      @else
+        +em-size("*margin-left", (!column_width + 14px)  * 39 / 40, !base_font_size)
+
+=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+  +yui-document(!document_width, !min_width, !base_font_size)
+  #{!block_selector}
+    +yui-block-base
+    :float right
+    +em-size-hacked("width", !column_width, !base_font_size)
+  #{!main_selector}
+    :width 100%
+    :float left
+    :margin-right -25em
+    #{!block_selector}
+      +yui-main-block
+      +em-size("margin-right", !column_width + 13px, !base_font_size)
+      // t5 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
+      @if !column_width > 180px
+        +em-size("*margin-right", (!column_width + 15px)  * 39 / 40, !base_font_size)
+      @else
+        +em-size("*margin-right", (!column_width + 14px)  * 39 / 40, !base_font_size)
+
+=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+  +yui-document(!document_width, !min_width, !base_font_size)
+  #{!main_selector}
+    #{!block_selector}
+      +yui-main-block
+      :display block
+      :margin 0 0 1em 0
+
+=yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b")
+  #{!block_selector}
+    +yui-block-base
+  #{!main_selector}
+    :width 100%
+    #{!block_selector}
+      +yui-main-block
+
+=yui-grid-divisions(!unit = ".yui-u", !g_50_50 = ".yui-g", !g_33_33_33 = ".yui-gb", !g_67_33 = ".yui-gc", !g_33_67 = ".yui-gd", !g_75_25 = ".yui-ge", !g_25_75 = ".yui-gf")
+
+  /* Section: Grids and Nesting Grids
+
+  /* from #yui-main, .yui-g .yui-u .yui-g
+  #{nest(!g_50_50, !unit, !g_50_50)}
+    width: 100%
+
+  /* Children generally take half the available space
+  #{nest(!g_33_33_33, !unit)},
+  #{nest(!g_50_50, !g_33_33_33, !unit)},
+  #{nest(!g_33_33_33, !g_50_50)},
+  #{nest(!g_33_33_33, !g_33_33_33)},
+  #{nest(!g_33_33_33, !g_67_33)},
+  #{nest(!g_33_33_33, !g_33_67)},
+  #{nest(!g_33_33_33, !g_75_25)},
+  #{nest(!g_33_33_33, !g_25_75)},
+  #{nest(!g_67_33, !unit)},
+  #{nest(!g_67_33, !g_50_50)},
+  #{nest(!g_33_67, !unit)}
+    float: left
+
+  /* Float units (and sub grids) to the right
+  #{nest(!g_50_50, !unit)},
+  #{nest(!g_50_50, !g_50_50)},
+  #{nest(!g_50_50, !g_33_33_33)},
+  #{nest(!g_50_50, !g_67_33)},
+  #{nest(!g_50_50, !g_33_67)},
+  #{nest(!g_50_50, !g_75_25)},
+  #{nest(!g_50_50, !g_25_75)},
+  #{nest(!g_67_33, !unit)},
+  #{nest(!g_33_67, !g_50_50)},
+  #{nest(!g_50_50, !g_67_33, !unit)},
+  #{nest(!g_75_25, !unit)},
+  #{nest(!g_75_25, !g_50_50)},
+  #{nest(!g_25_75, !g_50_50)},
+  #{nest(!g_25_75, !unit)}
+    float: right
+
+  /* Float units (and sub grids) to the left
+  #{!g_50_50},
+  #{!g_33_33_33},
+  #{!g_67_33},
+  #{!g_33_67},
+  #{!g_75_25},
+  #{!g_25_75},
+  #{nest(!g_50_50, !g_67_33)},
+  #{nest(!g_50_50, !g_75_25)},
+  #{nest(!g_67_33, "div.first")}
+    div.first
+      float: left
+
+  #{!g_50_50}
+    #{!unit},
+    #{!g_50_50},
+    #{!g_33_33_33},
+    #{!g_67_33},
+    #{!g_33_67},
+    #{!g_75_25},
+    #{!g_25_75}
+      width: 49.1%
+
+  #{nest(!g_33_33_33, !unit)},
+  #{nest(!g_50_50, !g_33_33_33, !unit)},
+  #{nest(!g_33_33_33, !g_50_50)},
+  #{nest(!g_33_33_33, !g_33_33_33)},
+  #{nest(!g_33_33_33, !g_67_33)},
+  #{nest(!g_33_33_33, !g_33_67)},
+  #{nest(!g_33_33_33, !g_75_25)},
+  #{nest(!g_33_33_33, !g_25_75)},
+  #{nest(!g_67_33, !unit)},
+  #{nest(!g_67_33, !g_50_50)},
+  #{nest(!g_33_67, !unit)}
+    width: 32%
+    margin-left: 1.99%
+
+  /* Give IE some extra breathing room for 1/3-based rounding issues
+  #{nest(!g_33_33_33, !unit)}
+    *margin-left: 1.9%
+    *width: 31.9%
+
+  #{nest(!g_50_50, !g_33_33_33)},
+  #{!g_33_33_33},
+  #{!g_67_33},
+  #{!g_33_67}
+    div.first
+      margin-left: 0
+
+  /* Section: Deep Nesting
+  #{!g_50_50},
+  #{!g_33_33_33},
+  #{!g_67_33},
+  #{!g_33_67},
+  #{!g_75_25},
+  #{!g_25_75}
+    #{!g_50_50}
+      #{!unit}
+        width: 49%
+        *width: 48.1%
+        *margin-left: 0
+
+  #{nest(!g_50_50, !g_50_50, !unit)}
+    width: 48.1%
+
+  #{!g_50_50},
+  #{!g_33_33_33}
+    #{!g_33_33_33}
+      div.first
+        *margin-right: 0
+        *width: 32%
+        _width: 31.7%
+
+  #{nest(!g_50_50, !g_67_33, "div.first")},
+  #{nest(!g_67_33, "div.first")},
+  #{nest(!g_33_67, !g_50_50)},
+  #{nest(!g_33_67, !unit)}
+    width: 66%
+
+  #{nest(!g_33_33_33, !g_50_50, "div.first")}
+    *margin-right: 4%
+    _margin-right: 1.3%
+
+  #{!g_33_33_33}
+    #{!g_67_33},
+    #{!g_33_67}
+      div.first
+        *margin-right: 0
+
+  #{!g_33_33_33}
+    #{!g_33_33_33},
+    #{!g_67_33}
+      #{!unit}
+        *margin-left: 1.8%
+        _margin-left: 4%
+
+  #{nest(!g_50_50, !g_33_33_33, !unit)}
+    _margin-left: 1.0%
+
+  #{nest(!g_33_33_33, !g_33_67, !unit)}
+    *width: 66%
+    _width: 61.2%
+
+  #{nest(!g_33_33_33, !g_33_67, "div.first")}
+    *width: 31%
+    _width: 29.5%
+
+  #{!g_50_50},
+  #{!g_33_33_33}
+    #{!g_67_33}
+      #{!unit}
+        width: 32%
+        _float: right
+        margin-right: 0
+        _margin-left: 0
+
+  #{nest(!g_33_33_33, !g_67_33, "div.first")}
+    width: 66%
+    *float: left
+    *margin-left: 0
+
+  #{!g_33_33_33}
+    #{!g_75_25},
+    #{!g_25_75}
+      #{!unit}
+        margin: 0
+
+  #{nest(!g_33_33_33, !g_33_33_33, !unit)}
+    _margin-left: .7%
+
+  #{nest(!g_33_33_33, !g_50_50)},
+  #{nest(!g_33_33_33, !g_33_33_33)}
+    div.first
+      *margin-left: 0
+
+  #{!g_67_33},
+  #{!g_33_67}
+    #{!g_50_50}
+      #{!unit}
+        *width: 48.1%
+        *margin-left: 0
+
+  #{!g_33_67},
+  #{nest(!g_33_33_33, !g_33_67)}
+    div.first
+      width: 32%
+
+  #{nest(!g_50_50, !g_33_67, "div.first")}
+    _width: 29.9%
+
+  #{nest(!g_75_25, !unit)},
+  #{nest(!g_75_25, !g_50_50)},
+  #{nest(!g_25_75, "div.first")}
+    width: 24%
+
+  #{nest(!g_75_25, "div.first")},
+  #{nest(!g_25_75, !g_50_50)},
+  #{nest(!g_25_75, !unit)}
+    width: 74.2%
+
+  #{!g_33_33_33}
+    #{!g_75_25},
+    #{!g_25_75}
+      div#{!unit}
+        float: right
+
+  #{!g_33_33_33}
+    #{!g_75_25},
+    #{!g_25_75}
+      div.first
+        float: left
+
+  /* Width Accommodation for Nested Contexts
+  #{!g_33_33_33}
+    #{nest(!g_75_25, !unit)},
+    #{nest(!g_25_75, "div.first")}
+      *width: 24%
+      _width: 20%
+
+  /* Width Accommodation for Nested Contexts
+  #{!g_33_33_33}
+    #{nest(!g_75_25, "div.first")},
+    #{nest(!g_25_75, !unit)}
+      *width: 73.5%
+      _width: 65.5%
+
+  /* Patch for GD within GE
+  #{nest(!g_75_25, "div.first", !g_33_67, !unit)}
+    width: 65%
+
+  #{nest(!g_75_25, "div.first", !g_33_67, "div.first")}
+    width: 32%
+
+  /* @group Clearing
+  #{!g_50_50},
+  #{!g_33_33_33},
+  #{!g_67_33},
+  #{!g_33_67},
+  #{!g_75_25},
+  #{!g_25_75}
+    +yui-group-clearing