facades 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+.DS_Store

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in facades.gemspec
+gemspec

data/README.md

@@ -0,0 +1,24 @@
+# Facades
+
+Facades is a gem designed to assist with front-end development and misc design. It includes a compass plugin / mixins, and various Rails view helpers to help with 
+common development tasks. 
+
+## CSS / SASS
+
+Facades includes several mixins and includes for setting up a few defaults within your css. 
+
+### Reset
+A HTML5-friendly reset is included to ensure elements like `aside`, `section` etc are setup properly. It also sets up a few typography defaults using Compass' 
+vertical-rhythm format.
+
+To configure, assign the variables to `$font-size` and `$line-height`.  These will default to 12px / 24px. Vertical-rhythm is defaulted to relative font sizes.
+
+### Layout
+Mixins are provided for a fixed grid, forms, and grid debugging. To setup a grid, `@include 'facades/layout/grid'` ( or simply `facades/layout`) and configure the following:
+
+* `$grid-width` The full width of the container in which your layout resides (default 960px)
+* `$grid-columns` The number of columns within the grid (default 24)
+* `$grid-gutter-width` The spacing between each column (default 10px)
+
+To debug grid alignment, a shortcut to the Compass' grid background is provided. `@include debug-grid;` into your container element to debug.
+

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/app/helpers/facades_helper.rb

@@ -0,0 +1,30 @@
+module FacadesHelper
+  
+  include Facades::Helpers::Layout
+  include Facades::Helpers::Navigation
+  
+  def facade_assets
+    content = if_ie(8) do
+      javascript_include_tag("https://html5shim.googlecode.com/svn/trunk/html5.js")
+    end
+    content.to_s.html_safe
+  end
+  
+  ##
+  # Render an IE conditional statement. By default conditionals use a less-than-or-equal-to format. Use the `specific`
+  # param to force only that version.
+  # 
+  # @param version [Integer] The IE version to target
+  # @param specific [Boolean] optional Target the IE version specificially. 
+  # 
+  # 
+  def if_ie(version, specific = false, &block)
+    content = capture(&block)
+    condition = specific ? "IE #{version}" : "lte IE #{version}"
+    str = "<!--[if #{condition}]>"
+  	str << content.html_safe.lstrip
+  	str << "<![endif]-->"
+  	str.html_safe
+  end
+    
+end

data/facades.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "facades/version"
+
+Gem::Specification.new do |s|
+  s.name        = "facades"
+  s.version     = Facades::VERSION
+  s.authors     = ["Brent Kirby"]
+  s.email       = ["brent@kurbmedia.com"]
+  s.homepage    = "https://github.com/kurbmedia/facades"
+  s.summary     = %q{Mixins, utilities, and helpers for front-end design/development with Compass / Rails}
+  s.description = %q{Facades includes various helpers, methods, and compass/sass mixins for simplifying frontend development.}
+
+  s.rubyforge_project = "facades"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+  
+  s.add_dependency('sass', ['~> 3.1'])
+  s.add_dependency('compass', ['>= 0.11'])
+  
+end

data/lib/facades/debug/html.rb

@@ -0,0 +1,6 @@
+module Facades
+  module Debug
+    module Html
+    end
+  end
+end

data/lib/facades/engine.rb

@@ -0,0 +1,9 @@
+# Stub engine to integrate asset pipeline.
+module Facades
+  class Engine < Rails::Engine 
+    
+    initializer 'facades assets' do |app|
+    end
+       
+  end
+end

data/lib/facades/helpers/elements.rb

@@ -0,0 +1,78 @@
+module Facades
+  module Helpers
+    ##
+    # 
+    # Generates misc html elements that aren't included in Rails core, or are custom.
+    #
+    module Elements
+      
+      ##
+      # Generates a "button" link tag. Simply a convenience method to skip adding 'class="button"' and also adds an +icon+ option
+      # @see Motr::Forms::Builder#button For form related buttons
+      # 
+      # @param [String] txt The link text
+      # @param [String] path The link href
+      # @param [Types] Name Description
+      # 
+      # @example Create a plain link.button 
+      #   button_link('Blog', '/blog') #=> <a href="/blog" class="button">Blog</a>
+      # @example Create a link.button with icon
+      #   button_link('Blog', '/blog', :icon => 'blog_image.png') #=> <a href="/blog" class="button"><img src="/images/blog_image.png" alt="Blog" /> Blog</a>
+
+      def button_link(txt, path, attrs = {}, incl_span = false)
+        image   = attrs.delete(:icon)
+        klasses = (attrs.delete(:class) || "").split(" ")
+        klasses << 'button'
+        klasses  = klasses.uniq.compact        
+        content  = ""
+        content <<  image_tag(image) unless image.nil?
+        content << (incl_span ? "<span>#{txt}</span>" : txt)
+        link_to content.html_safe, path, attrs.merge(:class => klasses.join(" "))
+      end
+      
+      ##
+      # 
+      # Convenience method for outputting all current flash messages. This allows you to avoid 
+      # using things like "if flash[:success]" and so on, which is far from DRY
+      # 
+      # @param [Hash] attrs Options to modify the html attributes and settings
+      # @option attrs [Symbol] closer Specify HTML to be appended to the message in case you want a "close" button/link. Defaults to "<span>X</span>"
+      # @option attrs [Symbol] wrapper Specify the HTML element which wraps each message. Defaults to :div
+      # 
+      # @example Output any available flash messages, appending a "closer" span
+      #   In your controller:
+      #     flash[:success] = "You did something awesome"
+      #   In your view or layout
+      #   <%= flash_messages :close => "<span>X</span>" %> #=> <div class="flash_message flash_message_success success">You did something awesome <span>X</span></div>
+      # 
+      # @example Output a message without a "close"
+      #   <%= flash_messages :close => false %> #=> <div class="flash_message flash_message_success success">You did something awesome</div>
+      #
+      #
+      def flash_messages(attrs = {})
+        
+        return if flash.nil? or flash.empty?
+        
+        wrapper = attrs.delete(:wrapper) || :div
+        closer  = attrs.delete(:closer)
+        unless closer === false
+          closer ||= "<span>X</span>"
+        end
+        klasses = (attrs.delete(:class) || "").split(" ")
+        klasses << "flash_message"  
+        content = ""    
+        
+        flash.each do |key, value|
+          klasses << "flash_message_#{key.to_s.underscore}"
+          msg_attrs = attrs.merge(:class => [key.to_s, klasses].flatten.join(' '))
+          content.concat content_tag(wrapper, "#{value} #{closer}".html_safe, msg_attrs).html_safe
+        end    
+        
+        content.html_safe    
+        
+      end
+      
+    end
+    
+  end
+end

data/lib/facades/helpers/layout.rb

@@ -0,0 +1,119 @@
+module Facades
+  module Helpers
+    ##
+    # 
+    # # Convenience helpers generally used in layout files
+    # 
+    module Layout
+      
+      ##
+      # 
+      # Allows easy assigning of meta tags from templates
+      # @param [Symbol] name Name of the meta tag (ie: keywords / description)
+      # @param [String] content The content to be used in the meta tag
+      # @return [String] A html meta tag with the name and content attributes set
+      # 
+      def meta_tag(name, content = nil)
+        return _retrieve_variable(:"__#{name}") if content.nil?
+        content = tag(:meta, :name => name, :content => content)
+        _create_variable(:"__#{name}", content, false)
+        content
+      end
+      
+      ##
+      # 
+      # Creates a page id to be used for identifying a page for CSS/design purposes. If a variable
+      # is defined, it will be used. If not, one will be generated from the current controller/action.
+      # 
+      # @param [String] content The string to be used as the page id.
+      # @return [String] The assigned page id
+      # @example Create a page_id and use it in the body tag
+      #   <%= page_id('home') %>
+      #   
+      #   <body id="<%= page_id %>"> #=> <body id="home">
+      # 
+      # @example Defaulting page id to controller/action
+      #   # IndexController#home
+      #   <body id="<%= page_id %>"> #=> <body id="index_home">
+      # 
+      # 
+      def page_id(content = nil)
+        _create_variable(:__page_id, content, false) and return unless content.nil?
+        return _retrieve_variable(:__page_id) if content_for?(:__page_id)
+        cname = controller.class.to_s.gsub(/controller$/i,'').underscore.split("/").join('_')
+        aname = controller.action_name
+        "#{cname}_#{aname}"
+      end
+      
+      ##
+      # 
+      # Convenienve method to create a page title for the <title></title> tag.
+      # 
+      # @param [String] content The text for the page title
+      # @return [String] The provided content
+      # @example Set the page title from a view template
+      #   <%= page_title('This is my page title') %>
+      # 
+      #   # In the layout:
+      #   <title><%= page_title %></title> #=> <title>This is my page title</title>
+      # 
+      def page_title(content = nil)
+        _create_variable(:__page_title, content, false) and return unless content.nil?
+        return _retrieve_variable(:__page_title) if content_for?(:__page_title)
+        return ""
+      end
+      
+      ##
+      # 
+      # Convenience method for content_for allowing for single-line variable creation. Also defines a method that can be
+      # re-used within a template.
+      # 
+      # @param [Symbol] var_name The name of the variable to create
+      # @param [String] content The content that variable defines
+      # @return [String] An empty string. Use the newly created method from +var_name+ to return the value
+      # 
+      # @example Setting a "page_class" variable
+      #   <% set_var(:page_class, 'cool') %>
+      #   <%= page_class %> #=> 'cool'
+      #
+      #  
+      def set_var(var_name, content)
+        _create_variable("#{var_name}", content) and return ''
+      end
+      
+      ##
+      # 
+      # Configures a "robots" meta tag based on the rails environment. In environments other than 'production'
+      # it sets the value to "noindex, nofollow" for each page that uses the layout in which it is called. This
+      # helps prevent spiders from crawling / indexing content when used on staging sites.
+      # 
+      # @return [String] A html meta tag for "robots" with the appropriate content attribute set
+      # 
+      def robot_meta_tag
+        tag(:meta, :name => 'robots', :content => (Rails.env.eql?('production') ? 'index, follow' : 'noindex, nofollow'))
+      end
+      
+      private
+      
+      def _create_variable(var, content, create_method = true) #:nodoc:
+        content_for(var.to_sym) do
+          content
+        end
+        return '' unless create_method
+        class_eval <<-MAKE_VAR, __FILE__, __LINE__ + 1
+          def #{var}
+            content_for(:#{var})
+          end
+          public :#{var}
+        MAKE_VAR
+      end
+            
+      def _retrieve_variable(var) #:nodoc:
+        (content_for?(var.to_sym) ? content_for(var.to_sym) : "")
+      end
+      
+    end
+    
+    
+  end
+end

data/lib/facades/helpers/navigation.rb

@@ -0,0 +1,130 @@
+module Facades
+  module Helpers
+    ##
+    # 
+    # Convenience helpers for building navigation lists, and defining 'on' states.
+    #
+    module Navigation
+      
+      ##
+      # 
+      # Creates a link wrapped in a list item, to be used within a list-based navigation.
+      # 
+      # @param [String] text The text used within the link
+      # @param [String] path The url used as the link's +href+ attribute
+      # @param [Hash] attrs Hash of attributes to be applied to the link. This format is the same as Rail's +link_to+ helper
+      # @option attrs [String] :active_class The class to use if this link is 'active'. Defaults to "on"
+      # @option attrs [Proc] :proc A callback which, when called, determines the active state of the link
+      # @option attrs [Regex] :matcher A regular expression to be matched against +path+
+      # @param [Symbol] wrapper The html tag to be used as the wrapper. Defaults to +:li+
+      # 
+      # @example Create a list item link to any page
+      #   nav_link('Home Page', '/home') #=> <li><a href="/home">Home Page</a>
+      # 
+      # @example 'Active state' functionality for the current page
+      #   nav_link('Current Page', '/current_url') #=> <li class="on"><a href="/current_url" class="on">Current Page</a></li>
+      # 
+      def nav_link(text, path, attrs = {}, wrapper = :li, &block)
+        
+        if block_given?
+          return sub_nav_link(text, path, attrs, wrapper, :ol, &block)
+        end
+        
+        link_attrs    = update_link_attrs(path, attrs)
+        wrapper_attrs = link_attrs.delete(:wrapper)      
+        child_link    = link_to(text, path, link_attrs)
+        wrapper === false ? child_link : content_tag(wrapper, child_link, wrapper_attrs)
+        
+      end
+      
+      def sub_nav_link(text, path, attrs = {}, wrapper = :li, container = :ol, &block)
+        wrapper_attrs = attrs.delete(:wrapper)
+        link_attrs    = update_link_attrs(path, attrs.merge(:wrapper => (attrs.delete(:item) || {}) ))
+        parent_link   = nav_link_to(text, path, attrs, false)
+        child_links   = content_tag(container, capture(&block), wrapper_attrs)
+        content_tag(container) do
+          content_tag(wrapper, (parent_link << child_links), wrapper_attrs)
+        end
+      end     
+      private :sub_nav_link
+      
+      ##
+      # 
+      # Creates a navigational list format, including a parent list / wrapper. Useful for nested list navigation
+      # @param [String] text The text used within the link
+      # @param [String] path The url used as the link's +href+ attribute
+      # @param [Hash] attrs Hash of attributes to be applied to the link. This format is the same as Rail's +link_to+ helper
+      # @option attrs [String] :active_class The class to use if this link is 'active'. Defaults to "on"
+      # @option attrs [Proc] :proc A callback which, when called, determines the active state of the link
+      # @option attrs [Regex] :matcher A regular expression to be matched against +path+
+      # @param [Symbol] wrapper The html tag to be used as the wrapper. Defaults to +:li+
+      # @param [Symbol] container The element that will be used as a container for the nested list
+      # @param [Block] &block A block containing the content of the nested items
+      # 
+      # @example Create a nested list navigation
+      #   nav do
+      #     nav_link('About Page', '/about')
+      #   end
+      # @example
+      #   <ol>
+      #     <li><a href="/home">Home Page</a>
+      #       <ol>
+      #           <li><a href="/about">Sub Page</a></li>
+      #       </ol>
+      #     </li>
+      #   </ol>
+      # 
+      def nav(container = :ol, html_attrs = {}, &block)
+        
+        wrapper_attrs = html_attrs.delete(:wrapper) || {}
+        
+        if Facades.enable_html5
+          content_tag(:nav, html_attrs) do
+            content_tag(container, capture(&block), wrapper_attrs)
+          end          
+        else
+          content_tag(container, capture(&block), html_attrs)
+        end
+        
+      end
+      
+      private
+      
+      # @private
+      def update_link_attrs(path, attrs)
+        
+        proc          = attrs.delete(:proc) || false
+        regex         = attrs.delete(:matcher) || false
+        klasses       = attrs.delete(:class).try(:split, ' ')
+        on_class      = attrs.delete(:active_class) || "on"
+        wrapper_attrs = attrs.delete(:wrapper) || {}
+        wklasses      = wrapper_attrs[:class].try(:split, ' ')
+        
+        klasses  ||= []
+        wklasses ||= []
+        
+        matcher = (proc || regex || request.path)
+        
+        active = case matcher
+          when Proc then proc.call(path)
+          when Regexp then request.path.match(regex)
+          when String then (request.path == path || request.path.match(/#{path}\/\w/im))
+          else raise Motr::Errors::InvalidOptions.new('Proc, Regexp or String required... passed #{matcher.class}.')
+        end
+        
+        if active
+          klasses  << on_class
+          wklasses << on_class
+        end
+
+        attrs.merge!(:class => klasses.join(" ")) unless klasses.compact.empty?
+        wrapper_attrs.merge!(:class => wklasses.join(" ")) unless wklasses.compact.empty?
+        
+        attrs.merge!(:wrapper => wrapper_attrs)
+                
+      end
+            
+    end
+    
+  end
+end

data/lib/facades/stylesheets/facades/_layout.scss

@@ -0,0 +1,2 @@
+@import 'facades/layout/grid';
+@import 'facades/layout/forms';

data/lib/facades/stylesheets/facades/_reset.scss

@@ -0,0 +1,84 @@
+@import 'facades/typography/rhythm';
+
+// 
+// Establishes a default baseline for vertical rhythm
+// CSS Reset from html5doctor.com
+//
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
+    margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;
+}
+body { line-height:1; }
+article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display:block; }
+nav ul { list-style:none; }
+blockquote, q { 
+	quotes:none; 
+	&:before, &:after{
+		content:'';
+		content:none;
+	}
+}
+
+a{ margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+ins { background-color:#ff9; color:#000; text-decoration:none; }
+mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
+table { border-collapse:collapse; border-spacing:0; }
+hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
+input, select { vertical-align:middle; }
+
+$base-font-size:   $font-size;
+$base-line-height: $line-height;
+
+// Establish a baseline by default. 
+@include establish-baseline($font-size);
+body{ 
+	font-size-adjust:none;
+	@include normal-text; 
+}
+img{ margin:0; }
+
+// Establish reasonable heading and font sizes, with line-heights based on vertical rhythm.
+
+h1,h2,h3,h4,h5,h6{ font-weight:normal; }
+h1{ @include font-size(32px, 2); }
+h2{ @include font-size(28px, 2); }
+h3{ @include font-size(26px, 2); }
+h4{ @include font-size(22px, 2); }
+h5{ @include font-size(16px, 1); }
+h6{ @include font-size(11px, 1); }
+p{ @include font-size($font-size, 1); }
+
+a{ text-decoration:underline; color:$link-color;
+	&:hover{ color:$link-hover-color; }
+	&:focus{ color:$link-focus-color; }
+	&:active{ color:$link-active-color; }
+	&:visited{ color:$link-visited-color; }
+}
+
+blockquote{ font-style:italic; }
+strong, dfn{ font-weight: bold; }
+em, dfn{ font-style: italic; }
+sup, sub{ line-height: 0; }
+abbr, acronym{ border-bottom: 1px dotted lighten($font-color, 10%); }
+address{ margin: 0 0 1.5em; font-style: italic; }
+pre{ margin: 1.5em 0; white-space:pre; }
+pre, code, tt{ @include fixed-width-text; }
+li ul, li ol{ margin: 0; }
+ul, ol{ margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
+ul{ list-style-type: $unordered-list-type; }
+ol{ list-style-type: $ordered-list-type; }
+dl{ margin: 0 0 1.5em 0;
+	dt{ font-weight: bold; } 
+}
+dd{ margin-left: 1.5em; }
+table{ margin-bottom: 1.4em; width: 100%; 
+	th{ font-weight: bold; }
+	thead th{ background: $table-header-color; }
+	th,td,caption{ padding: 4px 10px 4px 5px; }
+	table.striped tr:nth-child(even) td,
+	table tr.even td{ background:$table-stripe-color; }
+}
+

data/lib/facades/stylesheets/facades/_util.css.scss

@@ -0,0 +1,18 @@
+// From thoughtbot/bourbon
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+	@if type-of($position) == list {
+		$coordinates: $position;
+		$position: relative;
+	}
+
+	$top: nth($coordinates, 1);
+	$right: nth($coordinates, 2);
+	$bottom: nth($coordinates, 3);
+	$left: nth($coordinates, 4);
+  	position: $position;
+
+	@if not(unitless($top)){ top: $top; }
+	@if not(unitless($right)) { right: $right; }
+  	@if not(unitless($bottom)) { bottom: $bottom; }
+	@if not(unitless($left)) { left: $left; }
+}

data/lib/facades/stylesheets/facades/layout/_forms.scss

@@ -0,0 +1,128 @@
+// Default border radius used on inputs
+$input-border-radius:2px !default;
+// Default font size for form fields... slightly smaller than body font size
+$input-font-size: .95em !default;
+// Default input border color
+$unfocused-border-color:#bbbbbb !default;
+// Input border color when focused
+$focus-border-color: #666666 !default; 
+// Class used on fields which are invalid
+$form-error-class: 'field-with-error' !default;
+// Selector representing the error class and element used to display error messages
+$form-error-message-selector: 'span.error-for-field' !default;
+// Text color for field hints
+$form-hint-color: #ccc;
+// Selector for field hints
+$form-hint-selector: 'span.hint';
+// Default fieldset border color
+$fieldset-border-color: #ccc !default;
+// Default error text color
+$error-color: #bd132a !default;
+// Default error background color, applies to inputs / selects / textareas
+$error-bg-color: #fde0e4 !default;
+// Default error border color, applies to inputs / selects / textareas
+$error-border-color: #E41D38 !default;
+
+// Mixin for styling select boxes
+@mixin form-select( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include form-field($font-size, $input-size, $normal-border, $focus-border, $border-radius);
+	border-style:solid; 
+	&:focus{ outline:none; }
+	&[multiple=multiple]{ border-color:$unfocused-border-color; }
+}
+
+// Mixin for styling textareas
+@mixin form-textarea( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include form-field($font-size, $input-size, $normal-border, $focus-border, $border-radius);
+	margin:0.5em; padding:5px;	
+}
+
+// Default input styling
+@mixin form-input( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	&.text,
+	&[type=text],
+	&[type=password],
+	&[type=email]{ 
+		@include form-field($font-size, $input-size, $normal-border, $focus-border, $border-radius); padding:.65em;
+	}
+	&[type=checkbox],
+	&[type=radio]{
+		@include inline-block; margin-right:1em; vertical-align:baseline; width:auto;
+	}
+}
+
+// Global base styles for all input types
+@mixin form-field( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include border-radius($border-radius); 
+	font-size:$font-size; 
+	border-color:$normal-border;
+	&:focus{ outline:none; border-color:$focus-border; }
+}
+
+// Mixin for displaying errors and error messages on fields.
+@mixin form-errors( $color:$error-color, $border-color:$error-border-color, $bg-color:$error-bg-color ){
+	&.#{$form-error-class}{
+		input[type=text],
+		input[type=password], 
+		input[type=email], 
+		textarea{ 
+			border:1px solid $border-color; 
+			background:$bg-color; 
+		}
+		label{ color:$color; }
+		#{$form-hint-selector}{ display:none; }
+	}	
+}
+
+// Mixin for displaying form hints
+@mixin form-field-hint( $color: $form-hint-color ){
+	font-size:.95em; line-height:.95em; font-weight:normal; color:$color; display:block;
+}
+
+// Mixin for styling field error messages
+@mixin form-error-message($color: $error-color){	 
+	font-size:.95em; line-height:.95em; color:$error-color;  display:block; 
+}
+
+// Creates a column based list of fields within a form. Forms elements should be marked up using ordered lists for semantic value.
+@mixin form-split-field-list{
+	display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;
+	li{ float:left; margin:0 1em 0 0; vertical-align:middle; 
+		label, 
+		input{
+			&[type=text],
+			&[type=password],
+			&[type=email]{ display:block; }
+		}
+		select{ margin:.75em 0px; }
+	}
+}
+
+// Creates a single column list of fields within a form. Form elements should be marked up using ordered lists for semantic value.
+@mixin form-field-list{
+	ol{ list-style-type:none; margin:0px; padding:0px; padding-right:10px;		
+		li{ padding:.5em 0px;			
+			&.clear{ clear:both; }
+			&.buttons{ clear:both; padding:.25em 0px 0px 0px; }
+			&.inline label{ @include inline-block; }
+			&.multifield{
+				input, select{ @include inline-block; }
+			}
+			ol{ @include form-split-field-list; }
+			@include form-errors;
+			
+			#{$form-hint-selector}{ @include form-hint; }
+			#{$form-error-message-selector}{ @include form-error-messages( $color ); }
+			
+		}		
+		label{ display:block; }
+		@include form-select; @include form-input; @include form-textarea;
+	}
+	ol.inline li.label{ @include inline-block; }
+	label abbr{ outline:none; border:none; color:red; }
+	label{ 
+		font-size:12px; 
+		height:20px; 		
+	}
+	fieldset{ border:none; }
+}

data/lib/facades/stylesheets/facades/layout/_grid.scss

@@ -0,0 +1,62 @@
+// Fixed grid system based on a merge of Blueprint and 960gs.
+$grid-gutter-width:  10px !default;
+$grid-width: 	960px !default;
+$grid-columns:  24 !default;
+$grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
+
+@mixin container{
+	margin-left: auto;
+	margin-right: auto;
+	width: $grid-width;
+	@include pie-clearfix;
+}
+
+@function span($n){
+  @return $grid-width / $grid-columns * $n - $grid-gutter-width;
+}
+
+@mixin column-base($gutter: $gutter-width){
+	display: inline; float: left;
+	margin-left: $gutter / 2;
+	margin-right: $gutter / 2;
+}
+
+@mixin column($n, $cols: $grid-columns, $gutter: $grid-gutter-width){
+	@include column-base($gutter);
+	width:span($n);
+}
+
+@mixin first{ margin-left:0; }
+@mixin last{ margin-right:0; }
+
+@mixin prefix($n, $cols: $grid-columns){
+	padding-left: $grid-width / $cols * $n;
+}
+
+@mixin suffix($n, $cols: $grid-columns){
+	padding-right: $grid-width / $cols * $n;
+}
+
+@mixin push($n){
+	position:relative;
+	left: ($grid-width / $cols) * $n;
+}
+
+@mixin pull($n){
+	position:relative;
+	right: -($grid-width / $cols) * $n;
+}
+
+@import 'compass/layout/grid-background';
+$grid-background-column-color: #eef2f9;
+$grid-background-baseline-color: rgba(0,0,0,0.15);
+$grid-background-gutter-color: #fff;
+$grid-background-total-columns: $grid-columns;
+$grid-background-column-width: $grid-column-width;
+$grid-background-gutter-width: $grid-gutter-width;
+$grid-background-baseline-height: #{($line-height / $font-size)}em;
+
+
+@mixin debug-grid{
+	@include grid-background;
+}

data/lib/facades/stylesheets/facades/typography/_rhythm.scss

@@ -0,0 +1,15 @@
+@import "compass/typography/vertical_rhythm";
+@import "compass/utilities/general/clearfix";
+
+@mixin normal-text      { font-family: $font-family; color: $font-color; }
+@mixin fixed-width-text { font: 1em $fixed-font-family; line-height: 1.5; }
+
+// Shorthand overrides for Compass' adjust-font-size/leading-to
+// because well.. they are freakin long.
+//
+@mixin font-size($size, $lines){
+	@include adjust-font-size-to($size, $lines);
+}
+@mixin leading($size, $lines){
+	@include adjust-leading-to($size, $lines);
+}

data/lib/facades/version.rb

@@ -0,0 +1,3 @@
+module Facades
+  VERSION = "0.0.1"
+end

data/lib/facades.rb

@@ -0,0 +1,33 @@
+require 'active_support'
+require 'facades/version'
+
+module Facades
+  
+  module Debug
+    autoload :Html, 'facades/debug/html'
+  end
+  
+  module Helpers
+    autoload :Layout,     'facades/helpers/layout'
+    autoload :Navigation, 'facades/helpers/navigation'
+    autoload :Elements,   'facades/helpers/elements'
+  end
+  
+  mattr_accessor :enable_html5
+  mattr_accessor :debug_html
+
+  def setup(&block)
+    yield self
+  end
+  
+end
+
+Facades.enable_html5 = true
+Facades.debug_html   = true
+
+require 'compass'
+Compass::Frameworks.register('facades',
+  :stylesheets_directory => File.join(File.dirname(__FILE__), 'facades/stylesheets'),
+  :templates_directory   => File.join(File.dirname(__FILE__), 'facades/templates'))
+
+require 'facades/engine' if defined?(Rails)

data/spec/facades/helpers/elements_spec.rb

@@ -0,0 +1,86 @@
+require "spec_helper"
+
+describe Facades::Helpers::Elements, :type => :helper do
+
+  describe '#button_link' do
+
+    subject{ button_link("home", "/", attrs).to_html }
+    let(:attrs){ {} }
+    
+    it { should have_selector('a.button') }
+      
+    context 'when passing classes' do
+      let(:attrs){ { :class => 'test_class' } }
+      
+      it { should have_selector('a.test_class') }
+    end
+      
+    context 'when providing an icon' do        
+      
+      let(:attrs) do 
+        { icon: 'sample.png' }
+      end
+      
+      it 'adds an image to the link' do
+        subject.should have_selector('img')
+      end
+      it 'should use the icon attribute as the image' do
+        subject.first('img')[:src].should match "sample.png"
+      end
+    end
+      
+  end
+  
+  describe '#flash_messages' do
+    
+    let!(:flash) do
+      { success: 'test flash message' }
+    end
+    subject{ flash_messages(attrs).to_html }
+    
+    let(:attrs){ {} }
+    
+    context 'when rendering normally' do
+      
+      it 'wraps the content in a div.flash_message' do
+        should have_selector('div.flash_message')
+      end
+      it 'should have a span closer' do
+        subject.first('div').should have_selector('span')
+      end
+
+      it 'adds the flash key as a html class' do
+        should have_selector("div.success")
+      end    
+      it 'adds :key_flash_message as a html class' do
+        should have_selector("div.flash_message_success")
+      end
+    end
+    
+    context 'when passed false to :closer' do
+      
+      let(:attrs) do
+        { closer: false }
+      end      
+      it 'should not add a closer span' do
+        subject.first('div').should_not have_selector('span')
+      end
+    end
+    
+    context 'when span is passed to :wrapper' do
+      
+      let(:attrs) do
+        { wrapper: :span }
+      end
+      
+      it 'should not use a div wrapper' do
+        should_not have_selector('div')
+      end
+      it 'should have a span wrapper' do
+        should have_selector('span.flash_message')
+      end
+    end    
+    
+  end
+    
+end

data/spec/facades/helpers/layout_helpers_spec.rb

@@ -0,0 +1,5 @@
+require "spec_helper"
+
+describe Facades::Helpers::Layout, :type => :helper do
+    
+end

data/spec/facades/helpers/navigation_spec.rb

@@ -0,0 +1,4 @@
+require "spec_helper"
+
+describe Facades::Helpers::Navigation, :type => :helper do
+end

metadata

@@ -0,0 +1,96 @@
+--- !ruby/object:Gem::Specification
+name: facades
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Brent Kirby
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-07-30 00:00:00.000000000 -04:00
+default_executable: 
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70302667237140 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70302667237140
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &70302667236100 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70302667236100
+description: Facades includes various helpers, methods, and compass/sass mixins for
+  simplifying frontend development.
+email:
+- brent@kurbmedia.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- app/helpers/facades_helper.rb
+- facades.gemspec
+- lib/facades.rb
+- lib/facades/debug/html.rb
+- lib/facades/engine.rb
+- lib/facades/helpers/elements.rb
+- lib/facades/helpers/layout.rb
+- lib/facades/helpers/navigation.rb
+- lib/facades/stylesheets/facades/_layout.scss
+- lib/facades/stylesheets/facades/_reset.scss
+- lib/facades/stylesheets/facades/_util.css.scss
+- lib/facades/stylesheets/facades/layout/_forms.scss
+- lib/facades/stylesheets/facades/layout/_grid.scss
+- lib/facades/stylesheets/facades/typography/_rhythm.scss
+- lib/facades/version.rb
+- spec/facades/helpers/elements_spec.rb
+- spec/facades/helpers/layout_helpers_spec.rb
+- spec/facades/helpers/navigation_spec.rb
+has_rdoc: true
+homepage: https://github.com/kurbmedia/facades
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: facades
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: Mixins, utilities, and helpers for front-end design/development with Compass
+  / Rails
+test_files:
+- spec/facades/helpers/elements_spec.rb
+- spec/facades/helpers/layout_helpers_spec.rb
+- spec/facades/helpers/navigation_spec.rb