added susy example

examples/susy/bootstrap.rb

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

examples/susy/config.rb

@@ -0,0 +1,9 @@
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "src"
+images_dir = "images"
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true

examples/susy/src/_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

examples/susy/src/_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 */

examples/susy/src/screen.sass

@@ -0,0 +1,114 @@
+/*
+  Welcome to Susy. Use this file to define screen styles.
+  Import this file using the following HTML or equivalent:
+  <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
+
+
+@import defaults.sass
+
+
+/* @group STRUCTURE */
+
+#skip-links
+  ul
+    +no-style-list
+  a
+    +skip-link
+    width: 100%
+
+body
+  +susy
+
+#page
+  position: relative
+  +container
+  background: rgba(0,0,0,.10)
+
+h1, h2
+  +serif-family
+  text-transform: uppercase
+  text-align: center
+  background: rgba(0,0,0,.15)
+  letter-spacing= 1/14 + "em"
+
+h1 + p, h2 + p, p:first-child
+  margin-top: 0
+
+header[role="banner"], #site-nav
+  +full
+  h1
+    font-size: 1.5em
+    line-height: 2em
+
+#site-nav
+  text-align: center
+  padding: 1.5em
+  ul
+    +inline-block-list(.5em)
+
+#content
+  > aside
+    +columns(2)
+    &:first-child
+      +alpha
+    & + aside
+      +omega
+  section[role="main"]
+    +columns(6)
+    > section
+      +full(6)
+    .major
+      article
+        +columns(3,6)
+        & + article
+          +omega(6)
+    .minor
+      aside
+        +columns(2,6)
+      article
+        +columns(4,6)
+        +omega(6)
+        header, .body
+          +columns(2,4)
+        .body
+          +omega(4)
+        footer
+          +full(4)
+    
+footer[role="contentinfo"]
+  +full
+  border-top= 1/14 + "em dotted"
+  padding-top= 13/14 + "em"
+
+
+/* @end */
+
+  
+/* @group COMPONENTS by type */
+
+
+
+/* @end */
+
+
+/* @group OVERRIDES by content */
+
+
+
+/* @end */
+
+        
+/* @group OVERRIDES by page */
+
+
+
+/* @end */
+
+
+/* @group DEBUG */
+
+// Uncomment, adjust and use for debugging
+// #page
+//   +show-grid("your-grid-image.png")
+
+/* @end */