compass-edge 0.9.4 → 0.9.5.0

data/examples/ninesixty/extensions/ninesixty/sass/960/_text.sass

@@ -0,0 +1,59 @@
+!ninesixty_font_family ||= "Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif"
+
+=text(!font_family = !ninesixty_font_family)
+  body
+    :font= "13px/1.5" !font_family
+
+  a:focus
+    :outline 1px dotted invert
+
+  hr
+    :border-color #ccc
+    :border-style solid
+    :border-width 1px 0 0
+    :clear both
+    :height 0
+
+  h1
+    :font-size 25px
+
+  h2
+    :font-size 23px
+
+  h3
+    :font-size 21px
+
+  h4
+    :font-size 19px
+
+  h5
+    :font-size 17px
+
+  h6
+    :font-size 15px
+
+  ol
+    :list-style decimal
+
+  ul
+    :list-style square
+
+  li
+    :margin-left 30px
+
+  p,
+  dl,
+  hr,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ol,
+  ul,
+  pre,
+  table,
+  address,
+  fieldset
+    :margin-bottom 20px

data/examples/ninesixty/extensions/ninesixty/templates/project/grid.sass

@@ -0,0 +1,34 @@
+/*
+  960 Grid System ~ Core CSS.
+  Learn more ~ http://960.gs/
+  
+  Licensed under GPL and MIT.
+
+@import compass/utilities/general/reset.sass
+@import 960/grid.sass
+
++global-reset
+
+// The following generates the default grids provided by the css version of 960.gs
+.container_12
+  +grid-system(12)
+
+.container_16
+  +grid-system(16)
+
+// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
+
+!ninesixty_columns = 24
+.two-column
+  +grid-container
+  #header,
+  #footer,
+  #sidebar,
+  #main-content
+    +grid-unit-base
+  #header, #footer
+    +grid-width(24)
+  #sidebar
+    +grid-width(8)
+  #main-content
+    +grid-width(16)

data/examples/ninesixty/extensions/ninesixty/templates/project/manifest.rb

@@ -0,0 +1,2 @@
+stylesheet 'grid.sass', :media => "screen, projection"
+stylesheet 'text.sass', :media => "screen, projection"

data/examples/ninesixty/extensions/ninesixty/templates/project/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/susy/bootstrap.rb

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

data/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

data/examples/susy/extensions/susy/LICENSE.txt

@@ -0,0 +1,28 @@
+Copyright (c) 2009, Eric Meyer
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of the author nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/examples/susy/extensions/susy/README.mkdn

@@ -0,0 +1,235 @@
+Susy - Compass Plugin 
+=====================
+
+Susy is a semantic CSS framework creator entirely native to
+[Compass](http://compass-style.org/).
+Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that
+will never activate that bloody side-scroll bar. Susy sets your width on the
+outer element (`container`), adds a `max-width` of `100%` and builds the rest
+of your grid in percentages. The philosophy and technique are based on
+[Natalie Downe](http://natbat.net/)'s "[CSS
+Systems](http://natbat.net/2008/Sep/28/css-systems/)" - which introduces
+difficult math in the service of beautiful structure. With the power of
+Compass/Sass, Susy will do that math for you.
+
+Using simple mixins, columns can be created, suffixed, prefixed, and nested
+easily - and always in flexible percentages.
+
+Install 
+=======
+
+    sudo gem sources --add http://gemcutter.org/ 
+    sudo gem install compass-susy-plugin
+
+Create a Susy-based Compass Project 
+===================================
+
+    compass -r susy -f susy <project name>
+
+Then edit your `_base.sass`, `_defaults.sass`, `screen.sass` and `print.sass`
+files accordingly. A reset is added automatically, and includes help for some
+HTML5 elements.
+
+Philosophy and Goals
+--------------------
+
+The method comes from [Natalie Downe](http://natbat.net/)'s "[CSS
+Systems](http://natbat.net/2008/Sep/28/css-systems/)", but I'll cover it here.
+
+It is important for accessibility and usability that we are:
+
+* Responsive to text sizing: In order for our site to be accessible we need to
+  allow different font-sizes to be set by the client. In order to maintain
+  design integrity of proportions and line-lengths, the grid needs to respond
+  to those sizes.
+
+* Responsive to window sizing: In order to maintain usability across
+  platforms/monitors, our grid needs to respond to the size of the viewport.
+  This is mainly an issue as the viewport shrinks and we are given a
+  side-scroll bar. No one likes that. On the large end our design integrity
+  and line lengths are more important than taking up all the possible space.
+
+In order to achieve both goals we need to combine the best of the elastic
+(em-based) and fluid (%-based) models. The solution is simple: First we build
+a fluid grid, then place it inside an elastic shell, and apply a maximum width
+to that shell so that it never exceeds the size of the viewport. It's simple
+in theory, but daunting in practice, as you constantly have to adjust your
+math based on the context.
+
+But Susy harnesses the power of Compass and Sass to do all the math for you.
+
+Grid Basics
+===========
+
+* Set up your default grid values (total columns, column width, gutter
+  width, side gutter width), your base font size, and important mixins
+  in `_base.sass`.
+
+* 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.
+
+* 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.
+
+* Use `+alpha` and `+omega` to declare elements which include the first or
+  last column within their parent element (`+full` to declare both `+alpha`
+  and `+omega`). Note: `+alpha` is actually only needed in the very top level,
+  and does nothing in nested contexts. Neither is needed on a `+full` element.
+
+* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
+  left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
+  once.
+
+* In nested contexts, all of these mixins take an extra final argument, the
+  width in columns of the parent (nesting) element.
+
+That's it for the basics! Here's a sample Susy grid layout:
+
+    body
+      +susy
+     
+    #page
+      +container
+     
+    #brand
+      +full
+      +pad(1,1)
+      h1
+        +full(8)
+        +pad(1,2,8)
+        
+    #nav
+      +columns(2)
+      +alpha
+     
+    #content
+      +columns(8)
+      +omega
+      #description
+        +columns(5,8)
+      #credit
+        +columns(3,8)
+        +omega(8)
+
+Tutorial
+========
+
+For more details, read [the tutorial](http://www.oddbird.net/susy/tutorial/).  
+It's also included with Susy in the docs/ folder.
+
+Extra Utility Mixins 
+=====================
+
+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.
+
+* `+inline-block-list([!horizontalpadding])` - Make list items inline-block
+  when floating just won't do the trick (if you need them centered or right).
+
+* `+hide` - Hide content from visual browsers while keeping accessability
+  intact.
+
+* `+skip-link([!top = 0, !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`:
+
+* `+opacity(!opacity)` - add cross-browser opacity settings (takes a range of
+  0 to 1). `+transprent` and `+opaque` are available as shortcuts.
+
+* `+border-radius(!radius)` - Rounded corners in supporting browsers.
+  `+border-bottom-left-radius` etc. all work.
+
+* `+box-sizing(!model)` - Set the box sizing model in supporting browsers.
+
+* `+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
+================
+
+Susy is built for flexibility, so that you always write the code you want to
+write. While everything should 'just work' out of the box, there are plenty of
+advanced options hidden inside. Here's a few:
+
+* `!hacks` is a boolean constant that you can set in your base.sass file to
+  choose between using targeted hacks for IE (a variation of the star hack in
+  most cases) in your screen.css, or using a conditional-comment targeted
+  ie.css. All the needed mixins are available for either setting. `!hacks` is
+  true by default so there is no extra work maintaining multiple files unless
+  you want to.
+
+    Example 1:
+    
+        !hacks = true
+    
+        #nav
+          +inline-block-list
+    
+    Example 2:
+    
+        !hacks = false
+      
+        (in screen.sass)
+        #nav
+          +inline-block-list
+        
+        (in ie.sass)
+        #nav li
+          +ie-inline-block
+
+    It requires more maintenance on your part, but the result is a
+    hack-free output.
+    
+    The Susy mixins that use either hacks or targeted mixins are
+    `+omega` (`+ie-omega([!right-floated = false])`), `+inline-block`
+    (`+ie-inline-block`), and `+inline-block-list` which sets
+    `+inline-block` on the list items.
+    
+    The ie-specific mixins only add the needed ie-specific adjustments,
+    so they need to be used in addition to their counterparts, not on
+    their own.
+
+* `gutter(!context)` is a function that you can call at any time to return the
+  size of a gutter in your given context using percentages. The number is
+  returned without units so that you can perform math on it. In order to use
+  it, you will have to add "%" to it.
+
+    Example:
+        
+        #nav
+          padding-right= gutter(5) + "%"
+
+* `columns(!number, !context)` returns the span of `!number` columns in
+  `!context` as a percentage (again without the units declared). This span
+  includes any gutters between the columns spanned.
+
+    Example:
+        
+        #nav
+          padding-left= columns(3,5) + "%"
+
+* `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.
+  
+    Example:
+    
+        #nav
+          border-bottom= px2em(2) + "em"

data/examples/susy/extensions/susy/compass-susy-plugin.gemspec

@@ -0,0 +1,35 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{compass-susy-plugin}
+  s.version = "0.7"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
+  s.authors = ["Eric Meyer"]
+  s.date = %q{2009-07-12}
+  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"]
+  s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/_base.sass", "templates/project/screen.sass", "templates/project/print.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "docs/tutorial/index.mkdn", "docs/tutorial/figures/susy_element.png", "docs/tutorial/figures/susy_grid.png", "compass-susy-plugin.gemspec"]
+  s.homepage = %q{http://github.com/ericam/compass-susy-plugin}
+  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-Susy-plugin", "--main", "README.mkdn"]
+  s.require_paths = ["lib"]
+  s.rubygems_version = %q{1.3.3}
+  s.summary = %q{A Compass grid system plugin.}
+
+  if s.respond_to? :specification_version then
+    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<compass>, [">= 0"])
+      s.add_development_dependency(%q<echoe>, [">= 0"])
+    else
+      s.add_dependency(%q<compass>, [">= 0"])
+      s.add_dependency(%q<echoe>, [">= 0"])
+    end
+  else
+    s.add_dependency(%q<compass>, [">= 0"])
+    s.add_dependency(%q<echoe>, [">= 0"])
+  end
+end

data/examples/susy/extensions/susy/docs/tutorial/build.sh

@@ -0,0 +1,141 @@
+#!/bin/bash
+
+tut_dir=`dirname ${0}`
+cd "${tut_dir}"
+tut_dir=`pwd`
+
+if [ ! -d "_build" ]; then
+    mkdir "_build"
+fi
+
+cp -pR code/* _build/
+cd _build
+
+# create activate and deactivate scripts
+cat > activate <<EOF
+#!/bin/bash 
+
+cd "${tut_dir}/_build"
+pushd ../../../lib > /dev/null
+libdir=\`pwd\`
+popd > /dev/null
+
+export OLD_RUBYLIB=\${RUBYLIB}
+export RUBYLIB=\${libdir}
+EOF
+
+cat > deactivate <<EOF
+#!/bin/bash
+
+export RUBYLIB=\${OLD_RUBYLIB}
+export OLD_RUBYLIB=
+EOF
+
+# activate so we can run compass later
+. activate
+
+# create the site index.html and place it in _common
+cat _tools/head.tpl.html \
+    | sed 's/{{ STYLE_PATH }}//; s/{{ BODY_CLASS }}/home/; s/{{ TITLE }}/A Grid Plugin for Compass/;' \
+    > _tools/home_head.html
+cat _tools/foot.tpl.html \
+    | sed 's/{{ STYLE_PATH }}//;' \
+    > _tools/home_foot.html
+cat _tools/home_head.html _tools/home_content.html _tools/home_foot.html > _common/index.html
+
+# copy the tutorial figures into site/
+if [ ! -d "site/tutorial" ]; then
+    mkdir site/tutorial
+fi
+cp -pR ../figures site/tutorial/
+
+# create the tutorial index.html
+perl _tools/Markdown.pl --html4tags ../index.mkdn > _tools/tutorial_content.html
+cat _tools/head.tpl.html \
+    | sed 's/{{ STYLE_PATH }}/..\//; s/{{ BODY_CLASS }}/tutorial/; s/{{ TITLE }}/A Tutorial/;' \
+    > _tools/tutorial_head.html
+cat _tools/foot.tpl.html \
+    | sed 's/{{ STYLE_PATH }}/..\//;' \
+    > _tools/tutorial_foot.html
+cat _tools/tutorial_head.html _tools/tutorial_content.html  _tools/tutorial_foot.html > site/tutorial/index.html
+
+# remove _tools
+rm -r _tools/
+
+# copy files in _common into each stage; also create diff.sh and use.sh
+for d in 01_target 02_container 03_structure site; do
+    cp -pR _common/* "${d}/"
+    pushd "${d}" > /dev/null
+    compass > /dev/null
+    popd > /dev/null
+    cat > "${d}/diff.sh" <<EOF
+#!/bin/bash
+
+pushd \`dirname \${0}\` > /dev/null
+name=\`basename \\\`pwd\\\`\`
+diff -r ${tut_dir}/code/\${name}/src/ src/
+popd > /dev/null
+EOF
+    chmod 755 "${d}/diff.sh"
+    cat > "${d}/use.sh" <<EOF
+#!/bin/bash
+
+pushd \`dirname \${0}\` > /dev/null
+name=\`basename \\\`pwd\\\`\`
+dest="${tut_dir}/code/\${name}/\${1}"
+if [ ! -f "\${dest}" ]; then
+    echo "File \${dest} does not exist; does this file belong in _common?"
+    exit 1
+fi
+cp "\${1}" "\${dest}"
+popd > /dev/null
+EOF
+    chmod 755 "${d}/use.sh"
+done
+
+# got everything out of common, remove it
+rm -r _common
+
+# move all stages into site/tutorial/
+for d in 01_target 02_container 03_structure; do
+    cp -pR "${d}" site/tutorial/
+    rm -r "${d}"
+done
+
+# create install script
+cat > install.sh <<EOF
+#!/bin/bash
+
+if [ -z "\${1}" ]; then
+    echo "Please provide a destination directory to install Susy site into."
+    exit 1
+fi
+
+if [ -e "\${1}" ]; then
+    read -n 1 -p "Destination \${1} already exists, remove it (y/n)?" yesno
+    echo
+    echo
+    if [ \$yesno != "y" ]; then
+        echo "Aborting."
+        exit 1
+    fi
+    rm -r \${1}
+fi
+
+
+echo "Installing Susy site to \${1}."
+
+pushd \`dirname \${0}\` > /dev/null
+base=\`pwd\`
+popd > /dev/null
+cp -pR "\${base}/site/" "\${1}" || exit 1
+
+find "\${1}" -name '*.sh' -exec rm {} \;
+echo "Installed."
+EOF
+chmod 755 install.sh
+
+# if we got an argument, go ahead and install there
+if [ ! -z "${1}" ]; then
+    ./install.sh "${1}"
+fi