facades 0.0.1 → 0.0.2

data/README.md

@@ -1,24 +1,106 @@
-# Facades
+#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. 
 
-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. 
 
-## CSS / SASS
+###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.
 
-Facades includes several mixins and includes for setting up a few defaults within your css. 
+	$font-size:12px;
+	$line-height:24px;
+	
+	@import 'facades/reset';  // Will automatically setup the vertical rhythm
 
-### 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.
+###Layout
+Mixins are provided for a fixed grid, forms, and grid debugging. 
 
-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.
+**Grid Setup**
+	
+	$grid-width: 960px; 		// Full width of the container
+	$grid-columns: 24; 			// Total number of columns
+	$grid-gutter-width: 10px;	// Spacing between each column
+	
+	@import 'facades/layout/grid'; /( or include 'facades/layout')
+	#wrapper{ @include container; }
+
+To debug grid alignment, a shortcut to the Compass' grid background is provided.
+
+	#wrapper{ @include debug-grid; }
+
+### Mixins
+Below is a list of available mixins
+	
+	Interface
+	-----------------------
+	tool-tip
+	
+	Forms
+	----------------------
+	form-field-list
+	form-split-field-list
+	form-field
+	form-input
+	form-select
+	form-textarea
+	form-errors
+	form-error-message
+	form-field-hint
+	
+	Grid (based off of the blueprint grid)
+	---------------------
+	column
+	push
+	pull
+	append
+	prepend
+	span (function) // width:span(2);
+	
+	Text
+	----------------------
+	leading (shortcut to Compass adjust-leading-to)
+	font-size (shortcut to Compass adjust-font-size-to)
+	
+	Utility
+	----------------------
+	position (shorthand position relative/fixed/absolute)
+	
+##Helpers
+
+###Layout Helpers
+
+**Variables**
+Setup variables via templates to be used within your layout. 
+
+* `page_id` The id of the current page, useful for targeting with CSS. Defaults to "controller_action" in Rails
+* `page_title` Used to populate the title of the page
+* `keywords` Used to populate the keywords meta tag
+* `description` Used to populate the description meta tag
+
+To assign variables, pass their value to the method. To display, use the method without any arguments
+	
+	# index.html.erb
+	<%= page_id('home') %>
+	
+	# In your layout
+	body id="<%= page_id %>"
+	
+**Misc**
 
-### 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:
+`meta_tag` A shortcut for creating HTML meta tags. 
 
-* `$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)
+	<%= meta_tag('name', 'content') %> #=> <meta name="name" content="content" />
+	
+`robot_meta_tag` A shortcut for defining a robot meta tag based on the Rails.env. Useful to keep spiders out of your staging environments
 
-To debug grid alignment, a shortcut to the Compass' grid background is provided. `@include debug-grid;` into your container element to debug.
+	# In any environment but production
+	<%= robot_meta_tag %> #=> <meta name="robots" content="noindex, nofollow" />
+	
+	# In production
+	<%= robot_meta_tag %> #=> <meta name="robots" content="index, follow" />
+	
+`button_link` Shortcut for creating a link class="button" with an optional icon
 
+	<%= button_link 'Link Text', some_path, icon: 'image.png' %>  #=> <a href='#' class='button'><img src='image.png' /></a>
+	

data/app/helpers/facades_helper.rb

@@ -1,7 +1,6 @@
 module FacadesHelper
-  
-  include Facades::Helpers::Layout
-  include Facades::Helpers::Navigation
+
+  include Facades::Helpers
   
   def facade_assets
     content = if_ie(8) do

data/lib/facades/engine.rb

@@ -2,6 +2,8 @@
 module Facades
   class Engine < Rails::Engine 
     
+    require 'facades/helpers'
+    
     initializer 'facades assets' do |app|
     end
        

data/lib/facades/helpers/navigation.rb

@@ -36,6 +36,7 @@ module Facades
         wrapper === false ? child_link : content_tag(wrapper, child_link, wrapper_attrs)
         
       end
+      alias :nav_link_to :nav_link
       
       def sub_nav_link(text, path, attrs = {}, wrapper = :li, container = :ol, &block)
         wrapper_attrs = attrs.delete(:wrapper)

data/lib/facades/helpers.rb

@@ -0,0 +1,15 @@
+module Facades
+  module Helpers
+    extend ActiveSupport::Concern
+    
+    autoload :Layout,     'facades/helpers/layout'
+    autoload :Navigation, 'facades/helpers/navigation'
+    autoload :Elements,   'facades/helpers/elements'
+    
+    included do
+      include Facades::Helpers::Layout
+      include Facades::Helpers::Navigation
+      include Facades::Helpers::Elements
+    end    
+  end
+end

data/lib/facades/sass_ext/form_elements.rb

@@ -0,0 +1,46 @@
+module Facades
+  module SassExt
+    module FormElements
+  
+      def fields_of_type(*args)
+        types = args.collect do |type|
+          send(:"#{type}_input_types")
+        end
+        Sass::Script::String.new(types.join(", "))
+      end
+      
+      private
+      
+      def all_input_types
+        [:checkbox, :password, :radio, :select, :string, :textarea].collect{ |t| send(:"#{t}_input_types") }.flatten.compact
+      end
+      
+      def checkbox_input_types
+        "input[type=checkbox]"
+      end
+      alias :check_input_types :checkbox_input_types
+      
+      def password_input_types
+        "input[type=password]"
+      end
+      
+      def radio_input_types
+        "input[type=radio]"
+      end
+      
+      def select_input_types
+        "select"
+      end
+      
+      def string_input_types
+        %w{email password text}.collect{ |t| "input[type=#{t}]" }        
+      end
+      
+      def textarea_input_types
+        "textarea"
+      end
+
+    end
+    
+  end
+end

data/lib/facades/sass_ext.rb

@@ -0,0 +1,15 @@
+require 'sass'
+
+module Facades
+  module SassExt
+    autoload :FormElements, 'facades/sass_ext/form_elements'
+  end
+end
+
+module Sass::Script::Functions
+  include Facades::SassExt::FormElements
+end
+
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+end

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

@@ -1,5 +1,5 @@
 @import 'facades/typography/rhythm';
-
+@import "compass/typography/lists/inline-block-list";
 // 
 // Establishes a default baseline for vertical rhythm
 // CSS Reset from html5doctor.com
@@ -42,14 +42,8 @@ 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); }
+h1,h2,h3,h4,h5,h6{ font-weight:normal;}
+@include font-scaling;
 
 a{ text-decoration:underline; color:$link-color;
 	&:hover{ color:$link-hover-color; }
@@ -66,14 +60,17 @@ 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, ol{ margin:0 1.5em rhythm(1, $font-size) 0; padding-left: 1.5em; 
+	li{ @include adjust-font-size-to($font-size); 
+		ol, ul{ margin:0; }
+	}
+}
 ul{ list-style-type: $unordered-list-type; }
 ol{ list-style-type: $ordered-list-type; }
-dl{ margin: 0 0 1.5em 0;
+dl{ margin: 0 0 rhythm(1, $font-size) 0;
 	dt{ font-weight: bold; } 
 }
-dd{ margin-left: 1.5em; }
+dd{ margin:0 1.5em rhythm(1, $font-size) 1.5em;  }
 table{ margin-bottom: 1.4em; width: 100%; 
 	th{ font-weight: bold; }
 	thead th{ background: $table-header-color; }
@@ -81,4 +78,6 @@ table{ margin-bottom: 1.4em; width: 100%;
 	table.striped tr:nth-child(even) td,
 	table tr.even td{ background:$table-stripe-color; }
 }
-
+nav{
+	ol, ul{ @include inline-block-list(1em); @include margin-trailer(1, $font-size); }
+}

data/lib/facades/stylesheets/facades/_ui.scss

@@ -0,0 +1 @@
+@import 'facades/ui/tool-tip';

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

@@ -25,16 +25,19 @@ $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; 
+	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
+	border-style:solid;
+	border-width:1px;	
 	&: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;	
+	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
+	margin:0.5em; padding:5px;
+	border-style:solid;
+	border-width:1px;		
 }
 
 // Default input styling
@@ -42,8 +45,10 @@ $error-border-color: #E41D38 !default;
 	&.text,
 	&[type=text],
 	&[type=password],
-	&[type=email]{ 
-		@include form-field($font-size, $input-size, $normal-border, $focus-border, $border-radius); padding:.65em;
+	&[type=email]{ 		
+		@include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
+		border-style:solid;
+		border-width:1px;
 	}
 	&[type=checkbox],
 	&[type=radio]{
@@ -100,29 +105,34 @@ $error-border-color: #E41D38 !default;
 
 // 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;
+	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 ); }
+		#{$form-hint-selector}{ @include form-field-hint; }
+		#{$form-error-message-selector}{ @include form-error-message( $error-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; 		
+		display:block; 
+		font-size:12px;
+		height:20px;
 	}
+	#{fields_of_type(select)}{ @include form-select; }
+	#{fields_of_type(string, checkbox, radio)}{ @include form-input; }
+	#{fields_of_type(textarea)}{ @include form-textarea; }
+	
+	label abbr{ outline:none; border:none; color:red; }
 	fieldset{ border:none; }
 }

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

@@ -15,14 +15,15 @@ $grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
   @return $grid-width / $grid-columns * $n - $grid-gutter-width;
 }
 
-@mixin column-base($gutter: $gutter-width){
+@mixin column-base($gutter: $grid-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);
+@mixin column($n, $last:false){
+	@include column-base($grid-gutter-width);
+	@if $last{ margin-right:0; }
 	width:span($n);
 }
 
@@ -49,8 +50,9 @@ $grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
 
 @import 'compass/layout/grid-background';
 $grid-background-column-color: #eef2f9;
+$grid-background-offset: ceil($grid-gutter-width / 2);
 $grid-background-baseline-color: rgba(0,0,0,0.15);
-$grid-background-gutter-color: #fff;
+$grid-background-gutter-color: rgba(255,255,255,0);
 $grid-background-total-columns: $grid-columns;
 $grid-background-column-width: $grid-column-width;
 $grid-background-gutter-width: $grid-gutter-width;
@@ -58,5 +60,6 @@ $grid-background-baseline-height: #{($line-height / $font-size)}em;
 
 
 @mixin debug-grid{
+	background-color:transparent;
 	@include grid-background;
 }

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

@@ -7,9 +7,21 @@
 // Shorthand overrides for Compass' adjust-font-size/leading-to
 // because well.. they are freakin long.
 //
-@mixin font-size($size, $lines){
+@mixin font-size($size, $lines: lines-for-font-size($size)){
 	@include adjust-font-size-to($size, $lines);
 }
-@mixin leading($size, $lines){
+@mixin leading($size, $lines: lines-for-font-size($size)){
 	@include adjust-leading-to($size, $lines);
-}
+}
+
+// Basic font scaling based on a typography scale. Its not perfect, but hey its nice lookin.
+// Scales h1-h6 and sets paragraphs.
+@mixin font-scaling($base: $font-size, $scale: 24px 22px 20px 18px 16px 14px){
+	$offset:1.618;
+	$scale: compact($scale);
+	@for $i from 1 through 6 {
+		$sizing: floor((nth($scale, $i) * $offset) - ($base / $offset));
+		h#{$i}{ @include adjust-font-size-to($sizing, 1); @include margin-trailer(1, $sizing); }
+	}
+	p{  @include adjust-font-size-to($font-size); @include margin-trailer(1, $font-size); }
+}

data/lib/facades/stylesheets/facades/ui/_tool-tip.scss

@@ -0,0 +1,43 @@
+@import "compass/typography/lists/inline-block-list";
+//
+// Creates a pure CSS tool tip using border-styles
+//
+$tool-tip-color:#333 !default;
+$tool-tip-text-color:#fff !default;
+
+@mixin tool-tip($color: false, $dir: bl, $size: 7px, $text-color: $tool-tip-text-color){
+	$text-color: if($text-color, $text-color, if(luminance($color) == dark, #fff, #333) );
+	background:$color;
+	color:$text-color;
+	padding:.75em 1em;
+	position:relative;
+	@include inline-block; 
+	
+	&:after{
+		content:"";
+		display:block;
+		position:absolute;
+		width:0;
+		border-width:$size $size 0;
+		border-style:solid;
+		border-color:$color transparent;
+		border-color:inherit transparent;
+		@if( $dir == bl or $dir == br ){ bottom: -$size; }
+		@if( $dir == tl or $dir == tr ){ top: -$size; }
+		@if( $dir == tl or $dir == bl ){ left:1em; }
+		@if( $dir == tl or $dir == bl ){ right:1em; }
+		@if( $dir == left ){ 
+			left:-$size;
+			border-width:$size ($size * 1.8) $size 0;
+		}
+		@if( $dir == right ){ 
+			right:-$size; 
+			border-width:$size 0 $size ($size * 1.8);			
+		}
+		@if( $dir == right or $dir == left ){ 
+			top:50%;
+			margin-top:-$size;
+			border-color:transparent $color;
+		}
+	}		
+}

data/lib/facades/stylesheets/facades/utilities/_site-map.scss

@@ -0,0 +1,18 @@
+#sitemap{ @include inline-block-list(0); text-align:center; width:100%; padding-top:25px;
+	ol{ margin:0; padding:0; @include clearfix; }
+	li{ vertical-align:top; margin:0 10px 15px 10px; }
+	li.single{ float:left !important;
+		ol{ text-align:left !important; padding-top:15px; margin:0 -10px;
+			li{ display:block !important; float:none !important; }
+		}
+	}
+	li.multi{ float:left;
+		ol{ white-space:nowrap; padding-top:15px; margin:0 -10px;
+			li{ float:left; }
+		}
+	}
+	a{ @include inline-block; margin:0px; padding:2px 15px; @include border-radius(3px); @include box-shadow(rgba(100,100,100,0.5), 2px, 2px, 1px, 0);
+		@include background(linear-gradient(top, #b2cd23, darken(#b2cd23, 7%))); border:2px solid darken(#b2cd23, 5%); color:white; text-decoration:none;
+		font-weight:bold; @include single-text-shadow(darken(#b2cd23, 15%), 1px, 1px, 1px); 
+	}
+}

data/lib/facades/version.rb

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

data/lib/facades.rb

@@ -7,12 +7,6 @@ module Facades
     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
 
@@ -25,6 +19,7 @@ end
 Facades.enable_html5 = true
 Facades.debug_html   = true
 
+require 'facades/sass_ext'
 require 'compass'
 Compass::Frameworks.register('facades',
   :stylesheets_directory => File.join(File.dirname(__FILE__), 'facades/stylesheets'),

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: facades
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,12 +9,12 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-07-30 00:00:00.000000000 -04:00
+date: 2011-08-01 00:00:00.000000000 -04:00
 default_executable: 
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70302667237140 !ruby/object:Gem::Requirement
+  requirement: &70254468244960 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -22,10 +22,10 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70302667237140
+  version_requirements: *70254468244960
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70302667236100 !ruby/object:Gem::Requirement
+  requirement: &70254468244340 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -33,7 +33,7 @@ dependencies:
         version: '0.11'
   type: :runtime
   prerelease: false
-  version_requirements: *70302667236100
+  version_requirements: *70254468244340
 description: Facades includes various helpers, methods, and compass/sass mixins for
   simplifying frontend development.
 email:
@@ -51,15 +51,21 @@ files:
 - lib/facades.rb
 - lib/facades/debug/html.rb
 - lib/facades/engine.rb
+- lib/facades/helpers.rb
 - lib/facades/helpers/elements.rb
 - lib/facades/helpers/layout.rb
 - lib/facades/helpers/navigation.rb
+- lib/facades/sass_ext.rb
+- lib/facades/sass_ext/form_elements.rb
 - lib/facades/stylesheets/facades/_layout.scss
 - lib/facades/stylesheets/facades/_reset.scss
-- lib/facades/stylesheets/facades/_util.css.scss
+- lib/facades/stylesheets/facades/_ui.scss
+- lib/facades/stylesheets/facades/_utilities.scss
 - lib/facades/stylesheets/facades/layout/_forms.scss
 - lib/facades/stylesheets/facades/layout/_grid.scss
 - lib/facades/stylesheets/facades/typography/_rhythm.scss
+- lib/facades/stylesheets/facades/ui/_tool-tip.scss
+- lib/facades/stylesheets/facades/utilities/_site-map.scss
 - lib/facades/version.rb
 - spec/facades/helpers/elements_spec.rb
 - spec/facades/helpers/layout_helpers_spec.rb