facades 1.0.0 → 1.0.1

data/src/scss/facades/_icons.scss

@@ -3,59 +3,59 @@
 @import 'facades/icons/legacy';
 
 /*
-	CSS Psuedo font-face icons
-	Creates an inline font-face icon using $icon-font-family.
-	------------------------------------------------------------------
+  CSS Psuedo font-face icons
+  Creates an inline font-face icon using $icon-font-family.
+  ------------------------------------------------------------------
 */
 
 @mixin icon($name, $size: $font-size, $psuedo: before, $adjust-sizing: true){
-	@if unquote($size) == before or unquote($size) == after{
-		$psuedo: $size;
-		$size: $font-size;
-	}
-	
-	$psuedo:unquote($psuedo);
-	
-	@if $legacy-icon-format{ @include icon-expression($name, $size, $psuedo); }
-	@else{
-		&:#{$psuedo}{
-			font-family:$icon-font-family;
-			@include icon-content($name);
-		}	
-	}
-	
+  @if unquote($size) == before or unquote($size) == after{
+    $psuedo: $size;
+    $size: $font-size;
+  }
+  
+  $psuedo:unquote($psuedo);
+  
+  @if $legacy-icon-format{ @include icon-expression($name, $size, $psuedo); }
+  @else{
+    &:#{$psuedo}{
+      font-family:$icon-font-family;
+      @include icon-content($name);
+    }  
+  }
+  
 }
 
 @mixin icon-before($name, $size: $font-size){
-	@include icon($name, $size, before);
+  @include icon($name, $size, before);
 }
 
 @mixin icon-after($name, $size: $font-size){
-	@include icon($name, $size, after);
+  @include icon($name, $size, after);
 }
 
 // Creates a square sprite-like icon 
 @mixin icon-rect($size: 24px, $name: false){
-	&{
-		overflow:hidden;
-		width:$size;
-		height:$size;
- 		line-height:$size;
-		font-size:ceil($size * 0.8);
-		white-space:nowrap;
-		display:inline-block;
-	}
-	
-	&:before{
-		line-height:1.1;
-		display:inline-block;
-		width:$size;
-		height:$size;
-		text-align:center;
-		@if $name{ @include icon-content($name); }
-	}
+  &{
+    overflow:hidden;
+    width:$size;
+    height:$size;
+     line-height:$size;
+    font-size:ceil($size * 0.8);
+    white-space:nowrap;
+    display:inline-block;
+  }
+  
+  &:before{
+    line-height:1.1;
+    display:inline-block;
+    width:$size;
+    height:$size;
+    text-align:center;
+    @if $name{ @include icon-content($name); }
+  }
 }
 
 @mixin icon-content($name){
-	content:"#{icon-glyph($name, $icon-pack)}";
+  content:"#{icon-glyph($name, $icon-pack)}";
 }

data/src/scss/facades/_mixins.scss

@@ -113,3 +113,13 @@ $experimental-support-for-khtml: false !default;
     @if ($width != auto){ width: $width; }
     @if ($height != auto){ height: $height; }
 }
+
+// helper for webkit smoothing
+@mixin font-smoothing($type: antialised){
+  -webkit-font-smoothing:$type;
+}
+
+// reversing text
+@mixin reverse-text{
+  unicode-bidi: bidi-override; direction: rtl
+}

data/src/scss/facades/_typography.scss

@@ -6,17 +6,17 @@
 // ----------------------------------------------------------------------------------------
 
 /*
-	Headings
-	------------------------------------
-	1. Fixes spacing and optimizes appearance
-	2. Sexier rendering in webkit and ios/android
-	
+  Headings
+  ------------------------------------
+  1. Fixes spacing and optimizes appearance
+  2. Sexier rendering in webkit and ios/android
+  
 */
 
 
 
 body{ 
-	font-family: $font-family;	
+  font-family: $font-family;  
 }
 
 @include establish-baseline($font-size);
@@ -27,194 +27,137 @@ a:visited { color: $link-visited-color; }
 a:hover { color: $link-hover-color; }
 a:focus { outline: thin dotted; }
 
-h1, h2, h3, h4, h5, h6 {	
-	margin:0;
-	font-weight: bold;	
-	text-rendering: optimizelegibility; // 1
-	-webkit-font-smoothing: subpixel-antialiased;
-	&.headline{
-		@include box-sizing(border-box);
-	}
-	// this fixes rhythm breakage introduced by the added tag
-	small{
-		@include inline-block(baseline);
-		margin:-.2em 0;
-		font-size:.75em;
-	}
+h1, h2, h3, h4, h5, h6 {  
+  margin:0;
+  font-weight: bold;  
+  text-rendering: optimizelegibility; // 1
+  -webkit-font-smoothing: subpixel-antialiased;
+  &.headline{
+    @include box-sizing(border-box);
+  }
+  // this fixes rhythm breakage introduced by the added tag
+  small{
+    @include inline-block(baseline);
+    margin:-.2em 0;
+    font-size:.75em;
+  }
 }
 
 @function _heading_size($num){
-	$sizes: $heading-font-sizes;
-	$orig: 30px 24px 18px 14px;
-	
-	@if $num > length($sizes){ @return nth($orig, $num); }
-	@return nth($sizes, $num);
+  $sizes: $heading-font-sizes;
+  $orig: 30px 24px 18px 14px;
+  
+  @if $num > length($sizes){ @return nth($orig, $num); }
+  @return nth($sizes, $num);
 }
 
+
 h1 {
-	@include font-size(_heading_size(1), 2);
-	&.headline{
-		@include leading(1, _heading_size(1));
-		@include margins(1, _heading_size(1));
-	}
+  @include font-size(_heading_size(1), 2);
+  @if $include-headline-styles == true{
+    &.headline{
+      @include leading(1, _heading_size(1));
+      @include margins(1, _heading_size(1));
+    }
+  }
 }
 
 h2 {
-	@include font-size(_heading_size(2));
-	@include margins(.5, _heading_size(2));
-	&.headline{
-		@include margins(1, _heading_size(2));
-	}
-	
+  @include font-size(_heading_size(2));
+  @include margins(.5, _heading_size(2));
+  @if $include-headline-styles == true{
+    &.headline{
+      @include margins(1, _heading_size(2));
+    }
+  }
 }
 
 h3 {
-	@include font-size(_heading_size(3));
-	@include margins(.5, _heading_size(3));
-	&.headline{
-		@include margins(.5, _heading_size(3));
-	}
-
+  @include font-size(_heading_size(3));
+  @include margins(.5, _heading_size(3));
+  @if $include-headline-styles == true{
+    &.headline{
+      @include margins(.5, _heading_size(3));
+    }
+  }
 }
 
 
 h4 {
-	@include font-size(_heading_size(4));
-	@include margins(.5, _heading_size(4));
-
+  @include font-size(_heading_size(4));
+  @include margins(.5, _heading_size(4));
 }
 
 h5 {
-	@include font-size(12px);
+  @include font-size(12px);
 }
 
 h6 {
-	@include font-size(11px);
-	text-transform:uppercase;
+  @include font-size(11px);
+  text-transform:uppercase;
 }
 
 
 /*
-	Headings
-	------------------------------------
+  Headings
+  ------------------------------------
 */
 
 p {
-	font-size:$font-size;
-	line-height:$line-height;
-	@include margins(0 1, $font-size);
+  font-size:$font-size;
+  line-height:$line-height;
+  @include margins(0 1, $font-size);
 }
 
 
 /*
-	Lists
-	------------------------------------
+  Lists
+  ------------------------------------
 */
 
 ul, ol {
-	@include font-size($font-size, 1);
-	@include margins(0 1, $font-size);
-	line-height:1;
-	margin-left: 1.6em;
-	padding:0;
-	
-	&.block{
-		margin-left:0;
-		list-style:none;
-	}
-	
-	ul, ol{
-		@include margins(.5, $font-size);
-	}
-	
+  @include font-size($font-size, 1);
+  @include margins(0 1, $font-size);
+  line-height:1;
+  margin-left: 1.6em;
+  padding:0;
+  
+  &.block{
+    margin-left:0;
+    list-style:none;
+  }
+  
+  ul, ol{
+    @include margins(.5, $font-size);
+  }
+  
 }
 
 
 
 ul {
-	list-style: disc;
+  list-style: disc;
 }
 
 ol {
-	list-style: decimal;
+  list-style: decimal;
 }
 
 li {
-	@include leading(1);
+  @include leading(1);
 }
 
 // for some reason older ie makes list items slightly smaller?
 .lt-ie9 li{
-	@include leading(1.01);
+  @include leading(1.01);
 }
 
 dl{
-	dt{ 
-		font-weight:bold; 
-	}
-	
-	dd{ 
-		margin:rhythm(.5) 0 rhythm(.5) rhythm(.5); 
-	}
-}
-
-/*
-	Misc items.
-	------------------------------------
-*/
-
-hr {
-	border: 0;
-	line-height:$line-height;
-	margin-bottom:.3em;
-	overflow:hidden;
-	height:1.25em;
-	@include box-sizing(content-box);
-	position:relative;
-	padding:0;
-	display:block;
-	border-top: 1px solid $horizontal-rule-color;
-	border-bottom:1px solid rgba(white,0);
-}
-
-html.lt-ie9{
-	hr{ margin-bottom:.4em; }
-}
-
-
-// useful for using email addresses in text. type the text
-// in reverse and apply this style.
-span.rev, a.rev{
-	unicode-bidi: bidi-override; 
-	direction: rtl
-}
-
-address {
-	display: block;
-	margin-bottom: $line-height;
-	line-height: $line-height;
-}
-
-code {
-	font-size:$font-size * .9;
-	@include leading(1, $font-size + 1px);
-	padding:1px .5em;
-	position:relative;
-	top:-1px;
-}
-
-pre {
-	display: block;
-	@include margins(0 1, 12px);
-	@include font-size(12px);
-	white-space: pre;
-	white-space: pre-wrap;
-	word-break: break-all;
-	padding:rhythm(0.5);
-	border-style:solid;
-	
-	code {
-		padding: 0;
-		background-color: transparent;
-	}
+  dt{ 
+    font-weight:bold; 
+  }
+  
+  dd{ 
+    margin:rhythm(.5) 0 rhythm(.5) rhythm(.5); 
+  }
 }

data/src/scss/facades/debug/_susy.scss

@@ -0,0 +1,20 @@
+$grid-background-column-color:rgba(black, 0.075) !default;
+
+@mixin debug-susy-grid($points){
+  #grid{ position:absolute; top:0px; right:$grid-padding; left:$grid-padding; bottom:0px; display:none;
+    @include susy-grid-background; z-index:10000;
+    @for $i from 1 to length($points){
+      @include at-breakpoint(nth($points, $i)){ 
+        @include susy-grid-background; 
+      }
+    }
+  }
+  
+  #grid:after{ position:fixed; top:0px; left:0px; z-index:10000; background:rgba(white, 0.5); display:block; padding:.25em 1em; font-size:11px; 
+    @for $i from 1 to length($points){
+      @include at-breakpoint(nth($points, $i)){ 
+        content:"#{$total-columns} | #{container-outer-width()} | #{columns-width()}"; 
+      }
+    }
+  }
+}

data/src/scss/facades/icons/_classes.scss

@@ -1,37 +1,37 @@
 @import 'facades/config';
 
 @mixin icon-classes($prefix:'icon-', $names: false){
-	
-	$prefix:unquote($prefix);
-	
-	[class^="#{$prefix}"]:before, [class*=" #{$prefix}"]:before{
-		display: inline; 
-		width: auto; 
-		height: auto; 
-		line-height: inherit; 
-		vertical-align: baseline;
-		font-weight:normal;
-		font-family:$icon-font-family;
-	}
-	
-	@if type-of($names) != list{
-		$names: icon-names($icon-pack);
-	}
-	
-	@each $ico in $names{
-		$ico: unquote($ico);
-		.#{$prefix}#{$ico}:before{ @include icon-content($ico); }
-	}
-	
-	.#{$prefix}large:before {
-	    vertical-align: top;
-			display:inline-block;
-		  font-size: 1.3333333333333333em;
-	}	
+  
+  $prefix:unquote($prefix);
+  
+  [class^="#{$prefix}"]:before, [class*=" #{$prefix}"]:before{
+    display: inline; 
+    width: auto; 
+    height: auto; 
+    line-height: inherit; 
+    vertical-align: baseline;
+    font-weight:normal;
+    font-family:$icon-font-family;
+  }
+  
+  @if type-of($names) != list{
+    $names: icon-names($icon-pack);
+  }
+  
+  @each $ico in $names{
+    $ico: unquote($ico);
+    .#{$prefix}#{$ico}:before{ @include icon-content($ico); }
+  }
+  
+  .#{$prefix}large:before {
+      vertical-align: top;
+      display:inline-block;
+      font-size: 1.3333333333333333em;
+  }  
 }
 
 @mixin icon-rect-classes{
-	.icon-16{ @include icon-rect(16px); }
-	.icon-32{ @include icon-rect(32px); }
-	.icon-24{ @include icon-rect(24px); }	
+  .icon-16{ @include icon-rect(16px); }
+  .icon-32{ @include icon-rect(32px); }
+  .icon-24{ @include icon-rect(24px); }  
 }

data/src/scss/facades/typography/_code.scss

@@ -0,0 +1,27 @@
+//---------------------------------------------------
+// Styles for code elements
+//---------------------------------------------------
+
+code {
+  font-size:$font-size * .9;
+  @include leading(1, $font-size + 1px);
+  padding:1px .5em;
+  position:relative;
+  top:-1px;
+}
+
+pre {
+  display: block;
+  @include margins(0 1, 12px);
+  @include font-size(12px);
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+  padding:rhythm(0.5);
+  border-style:solid;
+  
+  code {
+    padding: 0;
+    background-color: transparent;
+  }
+}

data/src/scss/facades/typography/_extra.scss

@@ -0,0 +1,34 @@
+//---------------------------------------------------
+// Extra typography styles
+//---------------------------------------------------
+
+hr {
+  border: 0;
+  line-height:$line-height;
+  margin-bottom:.3em;
+  overflow:hidden;
+  height:1.25em;
+  @include box-sizing(content-box);
+  position:relative;
+  padding:0;
+  display:block;
+  border-top: 1px solid $horizontal-rule-color;
+  border-bottom:1px solid rgba(white,0);
+}
+
+html.lt-ie9{
+  hr{ margin-bottom:.4em; }
+}
+
+
+// useful for using email addresses in text. type the text
+// in reverse and apply this style.
+span.rev, a.rev{
+  @include reverse-text;
+}
+
+address {
+  display: block;
+  margin-bottom: $line-height;
+  line-height: $line-height;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: facades
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-08-23 00:00:00.000000000 Z
+date: 2012-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -140,11 +140,14 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/facades/debug/grid.js
+- app/controllers/facades_controller.rb
 - app/helpers/facades_helper.rb
+- app/views/facades/style_guide.html.erb
 - config.ru
 - facades.gemspec
 - lib/facades.rb
 - lib/facades/helpers.rb
+- lib/facades/helpers/frontend.rb
 - lib/facades/helpers/layout.rb
 - lib/facades/helpers/navigation.rb
 - lib/facades/helpers/notifications.rb
@@ -195,6 +198,7 @@ files:
 - src/scss/facades/buttons/_gradient.scss
 - src/scss/facades/buttons/_shared.scss
 - src/scss/facades/buttons/_simple.scss
+- src/scss/facades/debug/_susy.scss
 - src/scss/facades/icons/_classes.scss
 - src/scss/facades/icons/_legacy.scss
 - src/scss/facades/layout/_lists.scss
@@ -217,6 +221,8 @@ files:
 - src/scss/facades/patterns/_pills.scss
 - src/scss/facades/patterns/_tabs.scss
 - src/scss/facades/patterns/_twipsy.scss
+- src/scss/facades/typography/_code.scss
+- src/scss/facades/typography/_extra.scss
 - src/scss/facades/typography/_tables.scss
 homepage: https://github.com/kurbmedia/facades
 licenses: []
@@ -232,7 +238,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2737179968248594604
+      hash: 61707918782527994
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -241,7 +247,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2737179968248594604
+      hash: 61707918782527994
 requirements: []
 rubyforge_project: facades
 rubygems_version: 1.8.23