facades 0.0.6 → 0.0.7

data/lib/facades/builders/table.rb

@@ -15,7 +15,7 @@ module Facades
       # Use the resource class's table_headings method first, options hash next
       # 
       def headings
-        return resource_class.table_attributes if resource_class.respond_to?(:table_headings)
+        return resource_class.table_attributes if resource_class.respond_to?(:table_attributes)
         [options[:headings]].flatten.compact
       end
       

data/lib/facades/helpers/layout.rb

@@ -25,15 +25,25 @@ module Facades
       # @param [String] site_id The site ID provided by google analytics
       # @return [String] script tag
       # 
-      def google_analytics(site_id)
-        content_tag(:script) do
-          ["var _gaq=[['_setAccount','#{site_id}'],['_trackPageview'],['_trackPageLoadTime']];",
-           "(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;",
-           "g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';",
-           "s.parentNode.insertBefore(g,s)}(document,'script'));"].join("")
-        end
+      def google_analytics(site_id, &block)
+        return "" if defined?(Rails) && Rails.env != "production"        
+        additional = capture(&block) if block_given?
+        additional ||= ""
+        content_tag(:script) do          
+          %Q{
+            var _gaq = _gaq || [];
+            _gaq.push(['_setAccount', #{site_id}]);
+            _gaq.push(['_trackPageview']);
+            #{additional}
+            (function() {
+              var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+            })();
+        	}
+      	end.html_safe
       end
-      
+    	
       ##
       # 
       # Creates a page id to be used for identifying a page for CSS/design purposes. If a variable

data/lib/facades/sass_ext/color.rb

@@ -25,6 +25,14 @@ module Facades
         mix(color, black, Sass::Script::Number.new(100 - dilution.value))
       end
       
+      # Converts a rgba to hex string, via compass ie_hex_str
+      def rgba_to_hex(color)
+        assert_type color, :Color
+        alpha = (color.alpha * 255).round
+        alphastr = alpha.to_s(16).rjust(2, '0')
+        Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+      end
+      
     end
   end
 end

data/lib/facades/sass_ext/funcs.rb

@@ -0,0 +1,33 @@
+module Facades
+  module SassExt
+    module Funcs
+
+      ##
+      # Compact via compass
+      # 
+      def compact(*args)
+        sep = :comma
+        if args.size == 1 && args.first.is_a?(Sass::Script::List)
+          list = args.first
+          args = list.value
+          sep  = list.separator
+        end
+        Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
+      end
+    
+      ##
+      # Joins a list with spaces or returns a single element if the 
+      # list only contains one item
+      # 
+      def spacify(list)
+        if list.is_a?(Sass::Script::List)
+          Sass::Script::List.new(list.value.dup, :space)
+        else
+          Sass::Script::List.new([list], :space)
+        end
+      end
+      
+   
+    end # Funcs
+  end # SassExt
+end # Facades

data/lib/facades/sass_ext.rb

@@ -4,7 +4,7 @@ module Facades
   end
 end
 
-['form_elements', 'color'].each do |req|
+['form_elements', 'color', 'funcs'].each do |req|
   require "facades/sass_ext/#{req}"
   Sass::Script::Functions.send(:include, Facades::SassExt.const_get(req.camelize))
 end

data/lib/facades/stylesheets/facades/_css3.scss

@@ -0,0 +1,93 @@
+$_vendor-prefixes: compact(-moz -webkit -o -ms);
+$_common-prefixes: compact(-moz -webkit -o);
+
+// Outputs vendor prefixed property names
+@mixin with-vendor-prefix($property, $values, $type: default){
+	$prefixes:if($type == default, $_vendor-prefixes, $_common-prefixes);
+	@each $prefix in $prefixes{
+		#{join(compact($prefix), compact($property), ",")}:$values;
+	}
+}
+
+@mixin background-size($size1: 100% auto, $size2: false, $size3: false, $size4: false, $size5: false){
+	$sizes: compact($size1, $size2, $size3, $size4, $size5);
+	@include with-vendor-prefix(background-size, $sizes, common);
+	background-size:$sizes;
+}
+
+@mixin border-radius($radius){
+	@include with-vendor-prefix(border-radius, $radius);
+	border-radius:$radius;
+}
+
+@mixin box-shadow($color, $horiz, $vert, $blur, $spread, $inner){
+	$props: compact();	
+	@if( $inset == true or $inset == inset ){
+		$props: join($props, inset);
+	}
+	
+	$props: join($props, compact($color $horiz $vert $blur $spread));
+	@include with-vendor-prefix(box-shadow, spacify($props));
+	box-shadow: spacify($props);
+}
+
+
+@mixin linear-gradient($pos, $g1, $g2:false, $g3:false, $g4:false, $g5:false, $g6:false, $g7:false, $g8:false, $g9:false, $g10:false){
+
+    $pos-type: type-of(nth($pos, 1));
+    @if ($pos-type == color) or (nth($pos, 1) == "transparent"){
+        $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5; $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
+        $pos: top; // Default position
+    }
+
+    $basic:  ($g1);
+    $webkit: color-stop($g1);
+
+    @each $grad in $g2 $g3 $g4 $g5 $g6 $g7 $g8 $g9 $g10{
+		@if $grad != false{
+			$basic: $basic + ',' + $grad;
+			$webkit: $webkit + ',' + color-stop($grad);
+		}
+    }
+
+    $basic:  unquote($basic);
+    $webkit: unquote($webkit);
+	
+    background-color: nth($g1, 1);
+    background: deprecated-webkit-gradient(linear, $basic) no-repeat;
+    background: -webkit-gradient(linear, $pos, $webkit) no-repeat;
+    background: -webkit-linear-gradient($pos, $basic) no-repeat;
+    background: -moz-linear-gradient($pos, $basic) no-repeat;
+    background: -ms-linear-gradient($pos, $basic) no-repeat;
+    background: -o-linear-gradient($pos, $basic) no-repeat;
+    background: linear-gradient($pos, $basic) no-repeat;
+}
+
+@mixin transition($properties:all, $duration: 1s, $delay:false, $function: false){
+	@include transition-property($properties);
+	@include transition-duration($duration);
+	@include transition-timing-function($function);
+	@include transition-delay($delay);
+}
+
+@mixin transition-property($properties: all) {
+	@include with-vendor-prefix(transition-duration, unquote($properties));
+	transition-property:spacify($properties);
+}
+
+
+@mixin transition-duration($duration: 1s) {
+	@include with-vendor-prefix(transition-duration, if(type-of($duration) == string, unquote($duration), $duration));
+	transition-duration:$duration;
+}
+
+@mixin transition-timing-function($function: false) {
+	@include with-vendor-prefix(transition-timing-function, unquote($function));
+	transition-timing-function:$function;
+}
+
+
+@mixin transition-delay($delay: false) {
+	@include with-vendor-prefix(transition-delay, if(type-of($delay) == string, unquote($delay), $delay));
+	transition-delay:$delay;
+}

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

@@ -2,5 +2,4 @@
 
 @import 'facades/layout/grid';
 @import 'facades/layout/forms';
-@import 'facades/layout/debug';
 @import 'facades/layout/dropdown-list';

data/lib/facades/stylesheets/facades/_setup.scss

@@ -17,12 +17,14 @@ $selection-color: 			 #ffffff !default;
 // Default font color and family
 // -------------------------------------------------
 $font-color: 		   #444 !default;
-$default-font-family: 'Helvetica Nueue', 'Helvetica', 'Arial', sans-serif !default;
+$font-family: 'Helvetica Nueue', 'Helvetica', 'Arial', sans-serif !default;
+$default-font-family: $font-family !default;
 $fixed-font-family:"andale mono", "lucida console", monospace !default;
 
 // Link colors
 // -------------------------------------------------
 $link-color: 		 #00e !default;
+$link-active-color:  lighten($link-color, 5%) !default;
 $link-hover-color:   lighten($link-color, 5%) !default;
 $link-visited-color: #551a8b !default;
 
@@ -37,6 +39,7 @@ $input-color: 				$font-color !default;
 $input-border-color:		#bbbbbb !default;
 $input-background-color: 	white !default;
 $input-padding:             0.65em 0.35em !default;
+$input-placeholder-color:   #888888;
 
 // Disabled state
 $disabled-input-color:			  #777 !default;
@@ -87,5 +90,15 @@ $invalid-input-border-color: $error-border-color !default;
 $invalid-input-background-color: $error-background-color !default;
 $invalid-input-color: $error-color !default;
 
+// Flash messages
+$flash-success-class: 'success';
+$flash-notice-class:  'notice';
+$flash-error-class:   'error';
+
+// Misc typography
+//-------------------------------------------------
+
+$horizontal-rule-color:#ccc !default;
+$horizontal-rule-size:1px !default;
 
 @import 'facades/utilities';

data/lib/facades/stylesheets/facades/_utilities.scss

@@ -23,10 +23,10 @@
 
 // Cross browser inline-block implementations
 @mixin inline-block {
-    &{ *display: inline; } // IE7
-  	display: -moz-inline-box;
+	&{ *display: inline; } // IE7
+	display: -moz-inline-box;
 	-moz-box-orient: vertical;
 	display: inline-block;
 	vertical-align: middle;
-    *vertical-align: auto; // IE7..again
+	*vertical-align: auto; // IE7..again
 }

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

@@ -0,0 +1,164 @@
+/* Arfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+	:: Grid
+	
+	This is the mobile-friendly, responsive grid that
+	lets Foundation work much of its magic.
+	
+	-------------------------------------------------- */
+
+$grid-width:		  980px !default;
+$_grid-column-widths: 4.3% 13% 21.68% 30.37% 39.1% 47.8% 56.5% 65.2% 73.9% 82.6% 91.3% 100%;
+$_grid-gutter-width:  4.4%;
+
+@mixin row{
+	width:100%;
+	max-width: $grid-width;
+	min-width: 727px;
+	margin:0 auto;
+	zoom:1;
+	
+	.row{
+		min-width:0;
+	}
+
+	&:before, &:after { content: ""; display: table; }
+	&:after { clear: both; }
+	zoom: 1;
+	
+	@media only screen and (max-width: 767px) {
+		min-width:0px;
+		width: 99%;
+	    min-width: 0;
+	    margin-left: 0;
+	    margin-right: 0;
+	}
+}
+
+@mixin container{
+	padding:0 20px;
+	margin:0 auto;
+	@media only screen and (max-width: 767px) {
+		padding:0;
+	}
+}
+
+@mixin column($num:1){
+	@if( $num < length($_grid-column-widths) ){
+		margin-left:$_grid-gutter-width;
+	}
+	float:left;
+	min-height:1px;
+	width:width($num);
+	
+	&.first, &:first-child{
+		margin-left:0;
+	}
+	
+	@media only screen and (max-width: 767px) {
+		width: width($num) / 3;
+	    margin-left: $_grid-gutter-width / 6;
+		margin-right: $_grid-gutter-width / 6;
+	}
+}
+
+@mixin offset($num:1){
+	$widths: 13.1% 21.8% 30.5% 39.2% 47.9% 56.6% 65.3% 74.0% 82.7% 91.4%;		
+	$childs: 8.7% 17.4% 26.1% 34.8% 43.5% 52.2% 60.9% 69.6% 78.3% 87% 95.7%;
+	margin-left:nth($widths, $num);
+	&:first-child{
+		margin-left:nth($childs, $num);
+	}
+	
+	@media only screen and (max-width: 767px) {
+		margin-left:0px;
+		&:first-child{ margin-left:0px; }
+	}
+}
+
+@mixin push($num:1){
+	position:relative;
+	left: (width($num) + $_grid-gutter-width);
+}
+
+@mixin pull($num:1){
+	position:relative;
+	right: (width($num) + $_grid-gutter-width);
+}
+
+@function width($cols:1){
+	@return nth($_grid-column-widths, $cols);
+}
+
+// Convert classes to top-level mixin
+	
+@mixin responsive-grid-classes{
+	.container { padding: 0 20px; }
+	
+	.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
+	/* To fix the grid into a certain size, set max-width to width */
+	.row .row { min-width: 0; }
+	
+	.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+	.column:first-child, .columns:first-child { margin-left: 0; }
+	
+	.row .one.columns 		{ width: 4.3%; }
+	.row .two.columns 		{ width: 13%; }
+	.row .three.columns 	{ width: 21.68%; }
+	.row .four.columns 		{ width: 30.37%; }
+	.row .five.columns 		{ width: 39.1%; }
+	.row .six.columns 		{ width: 47.8%; }
+	.row .seven.columns 	{ width: 56.5%; }
+	.row .eight.columns 	{ width: 65.2%; }
+	.row .nine.columns 		{ width: 73.9%; }
+	.row .ten.columns 		{ width: 82.6%; }
+	.row .eleven.columns 	{ width: 91.3%; }
+	.row .twelve.columns 	{ width: 100%; }
+	
+	.row .offset-by-one 	{ margin-left: 13.1%;  }
+	.row .offset-by-two 	{ margin-left: 21.8%;  }
+	.row .offset-by-three 	{ margin-left: 30.5%;  }
+	.row .offset-by-four 	{ margin-left: 39.2%;  }
+	.row .offset-by-five 	{ margin-left: 47.9%;  }
+	.row .offset-by-six 	{ margin-left: 56.6%;  }
+	.row .offset-by-seven 	{ margin-left: 65.3%;  }
+	.row .offset-by-eight 	{ margin-left: 74.0%;  }
+	.row .offset-by-nine 	{ margin-left: 82.7%;  }
+	.row .offset-by-ten 	{ margin-left: 91.4%;  }
+	
+	.row .centered { float: none; margin: 0 auto; }
+
+	.row .offset-by-one:first-child 	{ margin-left: 8.7%;  }
+	.row .offset-by-two:first-child 	{ margin-left: 17.4%;  }
+	.row .offset-by-three:first-child 	{ margin-left: 26.1%;  }
+	.row .offset-by-four:first-child 	{ margin-left: 34.8%;  }
+	.row .offset-by-five:first-child 	{ margin-left: 43.5%;  }
+	.row .offset-by-six:first-child 	{ margin-left: 52.2%;  }
+	.row .offset-by-seven:first-child 	{ margin-left: 60.9%;  }
+	.row .offset-by-eight:first-child 	{ margin-left: 69.6%;  }
+	.row .offset-by-nine:first-child 	{ margin-left: 78.3%;  }
+	.row .offset-by-ten:first-child 	{ margin-left: 87%;  }
+	.row .offset-by-eleven:first-child 	{ margin-left: 95.7%;  }
+	
+	/* Source Ordering */
+	.push-two 		{ left: 17.4% }
+	.push-three 	{ left: 26.1%; }
+	.push-four 		{ left: 34.8%; }
+	.push-five 		{ left: 43.5%; }
+	.push-six 		{ left: 52.2%; }
+	.push-seven 	{ left: 60.9%; }
+	.push-eight 	{ left: 69.6%; }
+	.push-nine 		{ left: 78.3%; }
+	.push-ten 		{ left: 87%; }
+	
+	.pull-two 		{ right: 17.4% }
+	.pull-three 	{ right: 26.1%; }
+	.pull-four 		{ right: 34.8%; }
+	.pull-five 		{ right: 43.5%; }
+	.pull-six 		{ right: 52.2%; }
+	.pull-seven 	{ right: 60.9%; }
+	.pull-eight 	{ right: 69.6%; }
+	.pull-nine 		{ right: 78.3%; }
+	.pull-ten 		{ right: 87%; }
+}

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

@@ -84,17 +84,24 @@ button, input[type="reset"], input[type="submit"], input[type="button"] {
 	-moz-background-clip: border-box;
 	-webkit-background-clip: border-box;
 	background-clip: border-box;
-	-webkit-border-radius: $button-border-radius;
-	-moz-border-radius: $button-border-radius;
-	border-radius: $button-border-radius;
-	border: 1px solid;
-	border-color: $button-border-color;
+	
+	@if $button-border-radius not 0px{
+		-webkit-border-radius: $button-border-radius;
+		-moz-border-radius: $button-border-radius;
+		border-radius: $button-border-radius;
+	}
+	
+	@if $button-border-color not none{
+		border: 1px solid;
+		border-color: $button-border-color;
+	}
+	
 	cursor: pointer;
 	color: $button-color;
 	font: bold 12px / 1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
 	outline: 0;
 	overflow: visible;
-	padding:$button-padding;
+	padding: $button-padding;
 	width: auto;
 	user-select:none;
 	// IE7
@@ -120,11 +127,18 @@ input[type="time"], input[type="url"], input[type="week"] {
 	-webkit-background-clip: padding;
 	background-clip: padding-box;
 	background-color: white;
-	border: 1px solid;
-	-webkit-border-radius: $input-border-radius;
-	-moz-border-radius: $input-border-radius;
-	border-radius: $input-border-radius;
-	border-color: $input-border-color;
+	
+	@if $input-border-color not none{
+		border: 1px solid;
+		border-color: $input-border-color;
+	}
+	
+	@if $input-border-radius not none and $input-border-radius not 0px{
+		-webkit-border-radius: $input-border-radius;
+		-moz-border-radius: $input-border-radius;
+		border-radius: $input-border-radius;
+	}
+	
 	color: $input-color;
 	outline: 0;
 	height:auto;
@@ -156,21 +170,21 @@ input[type="time"], input[type="url"], input[type="week"] {
 // Separate rule for IE, too.
 // Cannot stack with WebKit's.
 ::-webkit-input-placeholder {
-	color: #888888;
+	color: $input-placeholder-color;
 }
 
 input:-moz-placeholder, textarea:-moz-placeholder{
-	color: #888888; 
+	color: $input-placeholder-color;
 }
 
 input.placeholder-text, textarea.placeholder-text{
-	color: #888888; 
+	color: $input-placeholder-color;
 }
 
 :invalid {
-  // Suppress red glow that Firefox
-  // adds to form fields by default,
-  // even when user is still typing.
+	// Suppress red glow that Firefox
+	// adds to form fields by default,
+	// even when user is still typing.
 	-moz-box-shadow: none;
 	-webkit-box-shadow: none;
 	box-shadow: none; 
@@ -203,9 +217,13 @@ select[size]{ padding:0.35em; }
 // Tweaks for Safari + Chrome.
 @media (-webkit-min-device-pixel-ratio: 0) {
 	select {
-		background-image:url($select-arrow-image);
-		background-repeat: no-repeat;
-		background-position: right center;
+		
+		@if($select-arrow-image not false and $select-arrow-image not "" ){
+			background-image:url($select-arrow-image);
+			background-repeat: no-repeat;
+			background-position: 98% 50%;
+		}		
+		
 		padding-right: 20px; 
 	}
 	

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

@@ -1,25 +1,32 @@
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio[controls], canvas, video { 
-	display: inline-block;
+html {
+	cursor: default;
+	font-size: 100%;
+	overflow-y: scroll;
+	-webkit-tap-highlight-color: transparent;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
 }
 
+body, form, input, button, select, textarea{ font-size: 100%; margin: 0; }
+body { color:$font-color; margin: 0; font: $font-size $font-family; line-height: $line-height; }
 
-html { 
-	font-size: 100%; 
-	overflow-y: scroll; 
-	-webkit-overflow-scrolling: touch; 
-	-webkit-tap-highlight-color: rgba(0,0,0,0); 
-	-webkit-text-size-adjust: 100%; 
-	-ms-text-size-adjust: 100%; 
+a{ color:$link-color; 
+	&:active{ color:$link-active-color; }
+	&:hover{ color:$link-hover-color; }
+	&:visited{ color:$link-visited-color; }
+	&:active, &:hover{ outline:none; }
+	&:focus{ outline:none; }
 }
 
-body { margin: 0; font-size: 13px; line-height: 1.231; }
-body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+/* =============================================================================
+   Selection
+   ========================================================================== */
 
 /* 
  * These selection declarations have to be separate
  * No text-shadow: twitter.com/miketaylr/status/12228805301
- * Also: hot pink!
  */
 
 ::-moz-selection { background: $selection-background-color; color: $selection-color; text-shadow: none; }
@@ -27,50 +34,85 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
 
 
 /* =============================================================================
-   Links
+   Typography
    ========================================================================== */
 
-a { color: $link-color; }
-a:visited { color: $link-visited-color; }
-a:focus { outline: thin dotted; }
+/*
+ * Corrects styling not present in IE6/7/8/9 S5 C10
+ */
 
-/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
-a:hover, a:active { outline:none; outline: 0; color:$link-hover-color; }
+abbr { _border-bottom: expression(this.title ? '1px dotted' : 'none'); }
+abbr[title] { border-bottom: 1px dotted; }
 
+/*
+ * Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10
+*/
 
-/* =============================================================================
-   Typography
-   ========================================================================== */
+b, strong{ font-weight: bold; }
 
-abbr[title] { border-bottom: 1px dotted; }
+/*
+ * Corrects styling not present in S5 C10
+ */
 
-b, strong { font-weight: bold; }
+dfn{ font-style: italic; }
 
-blockquote { margin: 1em 40px; }
+/*
+ * Corrects styling not present in IE6/7/8/9
+ */
 
-dfn { font-style: italic; }
+mark{ background: #FF0; color: #000; }
 
-hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+hr{ 
+	display: block; 
+	height: 1px; 
+	border: 0; 
+	border-top: $horizontal-rule-size solid $horizontal-rule-color; 
+	margin: 1em 0; 
+	padding: 0; 
+}
 
-ins { background: #ff9; color: #000; text-decoration: none; }
 
-mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+/*
+ * Corrects font family displayed oddly in IE6 S5 C10
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
 
-/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
-pre, code, kbd, samp { font-family: $fixed-font-family, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
+pre, code, kbd, samp{ font-family: $fixed-font-family; _font-family: 'courier new', monospace; font-size: 1em; }
 
-/* Improve readability of pre-formatted text in all browsers */
-pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
 
-q { quotes: none; }
-q:before, q:after { content: ""; content: none; }
+pre{ white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
 
-small { font-size: 85%; }
+/*
+ * Addresses CSS quotes not supported in IE6/7
+ */
+
+q{ quotes: none; }
+
+/*
+ * Addresses quote property not supported in S4
+ */
+
+q:before, q:after{ content: ''; content: none; }
 
-/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
-sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
+/*
+ * Improves appearance in all browsers
+ */
+
+small, sub, sup{ font-size: 75%; }
+
+/*
+ * Improves appearance in all browsers
+ * gist.github.com/413930
+ */
+
+sub,sup { line-height: 0; position: relative; vertical-align: baseline; }
+sup{ top: -0.5em; }
+sub{ bottom: -0.25em; }
+
+small { font-size: 85%; }
 
 
 /* =============================================================================
@@ -87,20 +129,43 @@ nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
    ========================================================================== */
 
 /*
- * Improve image quality when scaled in IE7
- * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ * Corrects display not defined in IE6/7/8/9 & FF3
  */
 
-img { border: 0;  }
+
+audio { display: none; _display: expression(this.controls ? 'inline' : 'none'); *zoom: 1; }
+audio[controls] { display: inline-block; }
+
+/*
+ * 1. Improves readability when inside 'a' in all browsers
+ * 2. Improves visual appearance when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+	border: 0; /* 1 */
+}
 
 /*
- * Correct overflow displayed oddly in IE9 
+ * Corrects overflow displayed oddly in IE9 
  */
 
 svg:not(:root) {
     overflow: hidden;
 }
 
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/* 
+ * Improves visual appearance in all browsers
+ */
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
 
 /* =============================================================================
    Figures
@@ -169,14 +234,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
 /* Remove default vertical scrollbar in IE6/7/8/9 */
 textarea { overflow: auto; vertical-align: top; }
 
-
-/* =============================================================================
-   Tables
-   ========================================================================== */
-
-table { border-collapse: collapse; border-spacing: 0; }
-td { vertical-align: top; }
-
 /* =======================================================
    Print styles.
    Inlined to avoid required HTTP connection: h5bp.com/r

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

@@ -48,6 +48,8 @@ $font-scale: 0 2 4 6 8;
 	@return $lines;
 }
 
+body{ font:#{$font-size}/#{rhythm(1)} $default-font-family; }
+
 h1, h2, h3, h4, h5, h6, p, ol, ul{ 
 	-webkit-margin-before:0;
 	-webkit-margin-after:0;

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

@@ -1,9 +1,8 @@
-@import 'compass/css3';
 @mixin inset-text($offset-color, $lum:false, $down: false){
 	$lum: if($lum, $lum, luminance($offset-color));
 	$down: if($down, $down, -1px);
 	
 	$c: if($lum == dark, shade($offset-color, 40%), tint($offset-color, 70%)); 
 	$o: if($lum == dark, $down, 1px);
-	@include single-text-shadow($c, $o, $o, 0px);
+	text-shadow:#{$c}, $o, $o, 0px;
 }

data/lib/facades/stylesheets/facades/ui/_buttons.scss

@@ -1,10 +1,9 @@
 @import 'facades/utilities';
-@import 'compass/css3';
 
 @mixin button-base($radius: $button-border-radius){
 	@include inline-block;
 	text-align:center;
-	@if $radius not false{
+	@if $radius not false and $radius not none{
 		-webkit-border-radius:$radius;
 		-moz-border-radius:$radius;
 		border-radius:$radius;
@@ -12,7 +11,7 @@
 }
 
 @mixin simple-button($bg-color, $text-color:white, $radius: $button-border-radius){
-	@include button-base;
+	@include button-base;	
 	color:$text-color;
 	background-color:$bg-color;
 	border-top:1px solid lighten($bg-color, 4%);

data/lib/facades/stylesheets/facades/ui/_tabbed.scss

@@ -0,0 +1,5 @@
+@import 'facades/typography/lists';
+
+@mixin tabbed{
+	ul.tab-nav{ @include inline-list; }
+}

data/lib/facades/stylesheets/facades/utilities/_clearfix.scss

@@ -1,7 +1,11 @@
 // Cross browser clearfixing
 @mixin clearfix{
-	&:before, &:after { content: ""; display: table; }
-	&:after { clear: both; }
+	&:before, &:after{ 
+		content: ""; display: table; 
+	}	
+	&:after{ 
+		clear: both; 
+	}
 	zoom: 1;
 }
 

data/lib/facades/stylesheets/facades/utilities/_cursors.scss

@@ -1,3 +1,4 @@
 @mixin hand-cursor{
-	cursor:pointer; cursor:hand;
+	cursor: pointer; 
+	cursor: hand;
 }

data/lib/facades/support/rails.rb

@@ -6,7 +6,10 @@ module Facades
     
     require 'facades/helpers'
     require 'facades/builders/sprite'
+    require 'sass'
+    require 'sass/rails'
     
+    config.sass.load_paths << File.expand_path("../../stylesheets", __FILE__)
     Facades::Builders::Sprite
     
     initializer 'facades assets' do |app|

data/lib/facades/version.rb

@@ -1,3 +1,3 @@
 module Facades
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

data/lib/facades.rb

@@ -42,9 +42,16 @@ module Facades
 end
 
 require 'facades/sass_ext'
-require 'compass'
-Compass::Frameworks.register('facades',
-  :stylesheets_directory => File.join(File.dirname(__FILE__), 'facades/stylesheets'),
-  :templates_directory   => File.join(File.dirname(__FILE__), 'facades/templates'))
+
+begin
+  require 'compass'
+rescue LoadError
+end
+
+if defined?(Compass)
+  Compass::Frameworks.register('facades',
+    :stylesheets_directory => File.join(File.dirname(__FILE__), 'facades/stylesheets'),
+    :templates_directory   => File.join(File.dirname(__FILE__), 'facades/templates'))
+end
 
 require 'facades/support/rails' if defined?(Rails)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: facades
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-11-01 00:00:00.000000000Z
+date: 2012-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70268111367460 !ruby/object:Gem::Requirement
+  requirement: &70286004139240 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -21,7 +21,7 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70268111367460
+  version_requirements: *70286004139240
 description: ! 'Facades is a front-end development framework which takes '
 email:
 - brent@kurbmedia.com
@@ -55,28 +55,28 @@ files:
 - lib/facades/sass_ext.rb
 - lib/facades/sass_ext/color.rb
 - lib/facades/sass_ext/form_elements.rb
+- lib/facades/sass_ext/funcs.rb
 - lib/facades/stylesheets/facades/_common.scss
+- lib/facades/stylesheets/facades/_css3.scss
 - lib/facades/stylesheets/facades/_layout.scss
 - lib/facades/stylesheets/facades/_normalize.scss
 - lib/facades/stylesheets/facades/_setup.scss
 - lib/facades/stylesheets/facades/_typography.scss
 - lib/facades/stylesheets/facades/_ui.scss
 - lib/facades/stylesheets/facades/_utilities.scss
-- lib/facades/stylesheets/facades/layout/_debug.scss
 - lib/facades/stylesheets/facades/layout/_dropdown-list.scss
 - lib/facades/stylesheets/facades/layout/_forms.scss
 - lib/facades/stylesheets/facades/layout/_grid.scss
-- lib/facades/stylesheets/facades/legacy/_forms.scss
-- lib/facades/stylesheets/facades/legacy/_reset.scss
+- lib/facades/stylesheets/facades/layout/_responsive_grid.scss
 - lib/facades/stylesheets/facades/setup/_forms.scss
 - lib/facades/stylesheets/facades/setup/_ie.scss
 - lib/facades/stylesheets/facades/setup/_reset.scss
 - lib/facades/stylesheets/facades/typography/_baseline.scss
 - lib/facades/stylesheets/facades/typography/_lists.scss
-- lib/facades/stylesheets/facades/typography/_rhythm.scss
 - lib/facades/stylesheets/facades/typography/_shadow.scss
 - lib/facades/stylesheets/facades/ui/_buttons.scss
 - lib/facades/stylesheets/facades/ui/_flash-messages.scss
+- lib/facades/stylesheets/facades/ui/_tabbed.scss
 - lib/facades/stylesheets/facades/ui/_tool-tip.scss
 - lib/facades/stylesheets/facades/utilities/_clearfix.scss
 - lib/facades/stylesheets/facades/utilities/_color.scss
@@ -109,7 +109,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: facades
-rubygems_version: 1.8.7
+rubygems_version: 1.8.10
 signing_key: 
 specification_version: 3
 summary: Front-end development awesome-ness

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

@@ -1,18 +0,0 @@
-$line-height:24px !default;
-$font-size:12px !default;
-
-$grid-background-column-color: #eef2f9 !default;
-$grid-background-offset: ceil($grid-gutter-width / 2) !default;
-$grid-background-baseline-color: rgba(0,0,0,0.15) !default;
-$grid-background-gutter-color: rgba(255,255,255,0) !default;
-$grid-background-total-columns: $grid-columns !default;
-$grid-background-column-width: $grid-column-width !default;
-$grid-background-gutter-width: $grid-gutter-width !default;
-$grid-background-baseline-height: #{($line-height / $font-size)}em !default;
-
-@import 'compass/layout/grid-background';
-
-@mixin debug-grid{
-	background-color:transparent;
-	@include grid-background;
-}

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

@@ -1,130 +0,0 @@
-@import 'facades/utilities';
-
-// 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, $normal-border, $focus-border, $border-radius);
-	border-style:solid;
-	border-width:1px;
-	font-size:$font-size;
-	&: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, $normal-border, $focus-border, $border-radius);
-	margin:0.5em; padding:5px;
-	border-style:solid;
-	border-width:1px;		
-}
-
-@mixin form-button($font-size: $input-font-size, $radius: $input-border-radius){
-	-webkit-appearance: none;
-	-moz-border-radius: $radius;
-	-webkit-border-radius: $radius;
-	border-radius: $radius;
-	-moz-background-clip: padding;
-	-webkit-background-clip: padding;
-	background-clip: padding-box;
-	cursor:pointer; outline:0; overflow:visible; width:auto;	
-	//IE7
-	*padding-top: 2px;
-	*padding-bottom: 0px;
-}
-
-// 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],
-	&[type=url]{ 		
-		@include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
-		border-style:solid;
-		border-width:1px;
-	}
-	
-	&[type=checkbox],
-	&[type=radio]{
-		position: relative; vertical-align:top; top:3px; 
-		// IE8, IE9, IE10
-		top:0\0; *top: -3px; // IE7		
-		@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;
-	margin:0;
-  	vertical-align:middle;
-	::-moz-focus-inner{ border:0; padding:0; }
-	&: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; }
-	}
-}
-
-@mixin form-field-hints{
-	#{$form-hint-selector}{ @include form-field-hint; }
-}
-
-// 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{
-	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; }
-		#{$form-error-message-selector}{ @include form-error-message( $error-color ); }
-	}		
-
-	label abbr{ outline:none; border:none; color:red; }
-	fieldset{ border:none; }
-}

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

@@ -1,115 +0,0 @@
-@warn "facades/reset is depreciated. Please use facades/setup (with facades/setup/ie in your ie stylesheet) to support normalization over resetting.";
-
-$font-size:12px !default;
-$line-height:24px !default;
-$font-family:'Helvetica Nueue', Helvetica, Arial, sans-serif !default;
-$font-color:#333 !default;
-$fixed-font-family:"andale mono", "lucida console", monospace !default;
-
-// Link colors
-$link-color:#06c !default;
-$link-hover-color:#09f !default;
-$link-focus-color:$link-hover-color !default;
-$link-active-color:lighten(adjust-hue($link-color, 75deg), 10%) !default;
-$link-visited-color:darken($link-color, 10%) !default;
-
-// Lists
-$ordered-list-type:decimal !default;
-$unordered-list-type:disc !default;
-
-// Table striping
-$table-header-color:#bbb !default;
-$table-stripe-color:lighten($table-header-color, 20%) !default;
-
-@import 'facades/typography/rhythm';
-@import "compass/typography/lists/inline-block-list";
-// 
-// 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. 
-body{ 
-	font-size-adjust:100%;
-	-ms-text-size-adjust: none;
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-	@include normal-text; 
-	font-size:($font-size / 16px) * 1em;
-	line-height:($line-height / 16px) * 1em;
-}
-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;}
-@include font-scaling;
-
-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; }
-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 rhythm(1, $font-size) 0;
-	dt{ font-weight: bold; } 
-}
-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; text-align:left; }
-	th,td,caption{ padding: 4px 10px 4px 5px; }	
-}
-table.striped tr:nth-child(even) td, tr.even td{ background:$table-stripe-color; }
-nav{
-	ol, ul{ @include inline-block-list(1em); @include margin-trailer(1, $font-size); }
-}
-
-button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
-button, input { line-height: normal;  }
-button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
-input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
-input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

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

@@ -1,29 +0,0 @@
-@import "compass/typography/vertical_rhythm";
-@import "compass/utilities/general/clearfix";
-
-@warn "Use facades/typography/baseline. This module will be depreciated.";
-
-@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: lines-for-font-size($size)){
-	@include adjust-font-size-to($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));
-		#{$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); }
-}