groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/type/_typography.scss

@@ -1,16 +1,74 @@
 // =============================================
 //                Typography
-//          Last Updated:2013-5-21
+//          Last Updated:2013-8-16
 // =============================================
 
+@import "webfonts";
+
+// typography defaults
+$type-tags:                 true !default;
+$type-elements:             "h1" "h2" "h3" "h4" "h5" "h6" "p"
+                            "ul" "ol" "dl"
+                            "q" "quote" "blockquote" "cite"
+                            "small" "big"
+                            "b" "strong"
+                            "em"
+                            "sup" "sub"
+                            "del" "strike"
+                            "code" "pre" !default;
+$type-colors:               true !default;
+$type-classes:              false !default;
+$type-classnames:           "h1" "h2" "h3" "h4" "h5" "h6" "p"
+                            "ul" "ol" "dl"
+                            "q" "quote" "blockquote" "cite"
+                            "small" "big" "large"
+                            "b" "bold" "strong"
+                            "em" "italic"
+                            "sup" "sub"
+                            "del" "strike"
+                            "code" "pre"
+                            "invalid" "valid"
+                            "unstyled" !default;
+$styled-lists:              true !default;
+$multi-column-classes:      true !default;
+$multi-column-names:        "one-column" "two-column" "three-column" "four-column" "five-column" !default;
+$info-color:                #3a87ad !default;
+$alert-text:                #ffffff !default;
+$error-color:               #b94a48 !default;
+$warning-color:             #FF971E !default;
+$success-color:             #468847 !default;
+$question-color:            #9855b4 !default;
+$ui-states:                 "info"  "alert" "warning" "error" "success" "question" !default;
+$ui-icons:                  "\f05a" "\f06a" "\f071"   "\f057" "\f058"   "\f059" !default;
+$ui-states-colors:          $info-color $alert-color $warning-color $error-color $success-color $question-color !default;
+$font-size:                 14px !default;
+$line-height:               1.5 !default;
+$heading-line-height:       1.3 !default;
+$headings-font:             nth($web-font-names, 1) !default;
+$links-underlined:          false !default;
+$links-active-underlined:   true !default;
+// shared defaults
+$background-color:          #ffffff !default;
+$font-family:               Helvetica, Arial, Geneva, sans-serif !default;
+$font-color:                #2b2b2d !default;
+$link-color:                #489AC1 !default;
+$link-active:               #198D98 !default;
+$code-text:                 #555555 !default;
+$code-background:           #ffffff !default;
+$selection-color:           $link-color !default;
+$selection-text:            #ffffff !default;
+$border-thickness:          1px !default;
+$border-style:              solid !default;
+$border-color:              #dddddd !default;
+$gutter:                    10px !default;
+$default-radius:            4px !default;
+$placeholderText-fallback:  true !default;
 
 
-
-// vertical rhythm
-@include establish-baseline;
-
 %document {
   font-family: $font-family;
+  font-size: $font-size;
+  line-height: $line-height;
   color: $font-color;
 }
 
@@ -22,57 +80,65 @@
 
 %links {
   color: $link-color;
+  @if $links-underlined == false {
+    text-decoration: none;
+  }
   @include transition(color 0.25s);
   &:hover, &:focus {
     color: $link-active;
-    text-decoration: underline;
+    @if $links-active-underlined {
+      text-decoration: underline;
+    }
   }
 }
 
 %heading {
-  margin-bottom: 15px;
+  margin-bottom: ($gutter * 1.5);
+  line-height: $heading-line-height;
+  @extend %#{$headings-font};
 }
 
 %h1 {
   @extend %heading;
   font-weight: 200;
-  @include adjust-font-size-to($base-font-size * 2.3333333333);
+  font-size: 2.3333333333em;
 }
 
 %h2 {
   @extend %heading;
   font-weight: 200;
-  @include adjust-font-size-to($base-font-size * 2);
+  font-size: 2em;
 }
 
 %h3 {
   @extend %heading;
   font-weight: 500;
-  @include adjust-font-size-to($base-font-size * 1.5);
+  font-size: 1.5em;
 }
 
 %h4 {
   @extend %heading;
   font-weight: 500;
-  @include adjust-font-size-to($base-font-size * 1.3333333333);
+  font-size: 1.3333333333em;
 }
 
 %h5 {
   @extend %heading;
   font-weight: 900;
-  @include adjust-font-size-to($base-font-size * 1.1666666667);
+  font-size: 1.1666666667em;
 }
 
 %h6 {
   @extend %heading;
   font-weight: 900;
-  @include adjust-font-size-to($base-font-size * 1.1666666667);
+  font-size: 1.1666666667em;
   text-transform: uppercase;
 }
 
 %p, %ul, %ol, %dl {
   margin-bottom: 10px;
   font-weight: normal;
+  line-height: 1.5;
 }
 
 %list {
@@ -93,15 +159,16 @@
 }
 
 %unstyled {
+  @extend %zero;
   list-style: none;
 }
 
-%ul-list {
+%ul-checklist {
   @extend %unstyled;
   margin-left: 0;
-  %list-item {
+  %checklist-item {
     &:before {
-      content: '\f00c';
+      content: $icon-check-empty;
       display: inline-block;
       width: 1.1em;
       margin-right: 0.25em;
@@ -113,6 +180,38 @@
       background-repeat: repeat;
       margin-top: 0;
     }
+    &[aria-checked~="true"], &[data-checked~="true"], &[checked="checked"], &.checked, &.completed {
+      &:before {
+        content: $icon-check;
+      }
+    }
+  }
+  &:not([readonly]) {
+    %checklist-item {
+      &:not([readonly]) {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+%ul-list {
+  @extend %unstyled;
+  margin-left: 0;
+  %list-item {
+    &:before {
+      content: $icon-circle;
+      display: inline-block;
+      width: 1.1em;
+      margin-right: 0.25em;
+      @include icon-FontAwesome();
+      font-size: 0.6em;
+      vertical-align: middle;
+      background-image: none;
+      background-position: 0% 0%;
+      background-repeat: repeat;
+      margin-top: 0;
+    }
   }
 }
 
@@ -143,34 +242,84 @@
   }
 }
 
+%small              { @include _small; }
+%medium             { @include _medium; }
+%big, %large        { @include _large; }
+%em, %italic        { font-style: italic; }
+%b, %bold, %strong  { font-weight: 900; }
+%sup                { @extend %relative, %small; top: -0.4em; }
+%sub                { @extend %relative, %small; top: 0.2em; }
+%monospace          { font-family: monospace; }
+%del, %strike       { text-decoration: line-through; }
+
+@mixin _multi-column($count: 2) {
+  column-count: $count;
+}
+
+%one-column {
+  @include _multi-column(1);
+}
+%two-column {
+  @include _multi-column(2);
+}
+%three-column {
+  @include _multi-column(3);
+}
+%four-column {
+  @include _multi-column(4);
+}
+%five-column {
+  @include _multi-column(5);
+}
+
+@if $multi-column-classes {
+  @for $i from 1 through length($multi-column-names) {
+    .#{nth($multi-column-names, $i)}, .#{nth($multi-column-names, $i)}s {
+      @extend %#{nth($multi-column-names, $i)};
+    }
+  }
+}
+
+@for $i from 1 through length($modifier-name) {
+  %#{nth($modifier-name, $i)} {
+    color: #{nth($modifier-text, $i)};
+  }
+}
+
+%q, %quote {
+  @extend %bold, %italic;
+  &:before {
+    content: "\201C"; // left quotation mark
+  }
+  &:after {
+    content: "\201D"; // right quotation mark
+  }
+}
+
 %blockquote {
+  @extend %relative, %bold;
   padding: 1.3em 4em 1em;
   color: $font-color;
-  @include adjust-font-size-to($base-font-size, 1.15);
-  font-weight: bold;
-  position: relative;
-  z-index: 0;
+  font-size: 1.15em;
   background: darken($background-color, 10%);
   @include border-radius($default-radius);
   &:before {
-    content: '\201C';
+    content: "\201C"; // left quotation mark
     color: darken($background-color, 20%);
-    font-size: 6em;
+    font-size: 4em;
     display: block;
     position: absolute;
-    top: 0.4em;
+    top: -0.2em;
     left: 0.1em;
-    z-index: -1;
   }
   &:after {
-    content: '\201D';
+    content: "\201D"; // right quotation mark
     color: darken($background-color, 20%);
-    font-size: 6em;
+    font-size: 4em;
     display: block;
     position: absolute;
-    top: 0.4em;
+    top: -0.2em;
     right: 0.1em;
-    z-index: -1;
   }
 }
 
@@ -179,12 +328,12 @@
   position: relative;
   left: -1em;
   margin-top: 0.25em;
-  @include adjust-font-size-to($base-font-size, 0.95);
+  font-size: 0.95em;
   font-weight: normal;
   font-style: normal;
   color: lighten($font-color, 15%);
   &:before {
-    content: '\2014';
+    content: "\2014"; // em dash
   }
 }
 
@@ -193,60 +342,24 @@
   cursor: help;
 }
 
-%small              { @extend %small; }
-%big, %large        { @extend %large; }
-%em, %italic        { font-style: italic; }
-%b, %bold, %strong  { font-weight: 900; }
-%sup                { @extend %small; }
-%sub                { @extend %small; }
-%monospace          { font-family: monospace; }
-%del, %strike       { text-decoration: line-through; }
-
-@for $i from 1 through length($modifier-name) {
-  %#{nth($modifier-name, $i)} {
-    color: #{nth($modifier-text, $i)};
-  }
-}
-
-%code {
+%pre {
   @extend %monospace;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	min-height: 1em;
-	display: inline-block;
-	background: lighten(gray, 30%);
-	border: none;
-	padding: 0 0.3em;
-	margin: 0 0.2em;
-	font-weight: normal;
-	line-height: inherit;
+  white-space: pre;
+  max-width: 100%;
+  overflow: auto;
 }
 
-%pre {
-  @extend %monospace;
-	$gutter-column: 2.6em;
-	color: darken(white, 5%);
-	background: #050505;
-  @include adjust-font-size-to($base-font-size, 1);
-	padding: 0.5em;
-	display: block;
-	border-left: #{$gutter-column} solid lighten(#050505, 20%);
-	counter-reset: linenumber;
-	%code {
-    display: block;
-		background: inherit;
-		margin: 0;
-		padding: 0;
-		&:before {
-			text-align: right;
-			color: lighten(gray, 10%);
-			counter-increment: linenumber;
-			content: counter(linenumber) ".";
-			position: absolute;
-			left: 0.65em;
-			width: #{$gutter-column};
-		}
-	}
+%code {
+  @extend %inline-block, %monospace;
+  white-space: no-wrap;
+  background: $code-background;
+  color: $code-text;
+  border: $border-thickness $border-style $border-color;
+  @include rounded($default-radius);
+  padding: 0 ($gutter / 2);
+  &.block {
+    padding: ($gutter / 2) $gutter;
+  }
 }
 
 %info             { color: $info-color; }
@@ -254,6 +367,7 @@
 %warning          { color: $warning-color; }
 %error, %invalid  { color: $error-color; }
 %success, %valid  { color: $success-color; }
+%question         { color: $question-color; }
 
 // responsive headings
 .js {
@@ -296,9 +410,9 @@
     @extend %abbr;
   }
   @for $i from 1 through length($type-elements) {
-		#{nth($type-elements, $i)} {
-			@extend %#{nth($type-elements, $i)};
-		}
+    #{nth($type-elements, $i)} {
+      @extend %#{nth($type-elements, $i)};
+    }
   }
 }
 
@@ -312,6 +426,20 @@
     @extend %ul-list;
     > li {
       @extend %list-item;
+      @for $i from 1 through length($ui-states) {
+        &.#{nth($ui-states, $i)} {
+          &:before {
+            content: "#{nth($ui-icons, $i)}"; // see $ui-icons
+            font-size: 1.2em;
+          }
+        }
+      }
+    }
+  }
+  ul.checklist {
+    @extend %ul-checklist;
+    > li {
+      @extend %checklist-item;
     }
   }
   ol.list {
@@ -335,6 +463,13 @@
             }
           }
         }
+        @for $i from 1 through length($ui-states) {
+          &.#{nth($ui-states, $i)} {
+            &:before {
+              background-color: #{nth($ui-states-colors, $i)};
+            }
+          }
+        }
       }
     }
 
@@ -344,6 +479,78 @@
   }
 }
 
+// @if $placeholderText-fallback {
+//   .no-js {
+//     .placeholderText, .placeholderText:nth-of-type(1), .placeholderText.placeholderOne {
+//       &:before {
+//         content: "Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla. Nulla non lectus sed nisl molestie malesuada. Proin in tellus sit amet nibh dignissim sagittis. Vivamus luctus egestas leo. Maecenas sollicitudin. Nullam rhoncus aliquam metus. Etiam egestas wisi a erat.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(2), .placeholderText.placeholderTwo {
+//       &:before {
+//         content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus. Curabitur sagittis hendrerit ante. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis condimentum augue id magna semper rutrum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Fusce consectetuer risus a nunc. Aliquam ornare wisi eu metus. Integer pellentesque quam vel velit. Duis pulvinar.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(3), .placeholderText.placeholderThree {
+//       &:before {
+//         content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia. Quisque tincidunt scelerisque libero. Maecenas libero. Etiam dictum tincidunt diam. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Suspendisse nisl. Sed convallis magna eu sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(4), .placeholderText.placeholderFour {
+//       &:before {
+//         content: "Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer vulputate sem a nibh rutrum consequat. Maecenas lorem. Pellentesque pretium lectus id turpis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Phasellus faucibus molestie nisl. Fusce eget urna. Curabitur vitae diam non enim vestibulum interdum. Nulla quis diam. Ut tempus purus at lorem.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(5), .placeholderText.placeholderFive {
+//       &:before {
+//         content: "In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu, urna. Nullam at arcu a est sollicitudin euismod. Praesent dapibus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(6), .placeholderText.placeholderSix {
+//       &:before {
+//         content: "Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam commodo dui eget wisi. Donec iaculis gravida nulla. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(7), .placeholderText.placeholderSeven {
+//       &:before {
+//         content: "Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(8), .placeholderText.placeholderEight {
+//       &:before {
+//         content: "Morbi leo mi, nonummy eget, tristique non, rhoncus non, leo. Nullam faucibus mi quis velit. Integer in sapien. Fusce tellus odio, dapibus id, fermentum quis, suscipit id, erat. Fusce aliquam vestibulum ipsum. Aliquam erat volutpat. Pellentesque sapien. Cras elementum. Nulla pulvinar eleifend sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque porta. Vivamus porttitor turpis ac leo.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(9), .placeholderText.placeholderNine {
+//       &:before {
+//         content: "Maecenas ipsum velit, consectetuer eu, lobortis ut, dictum at, dui. In rutrum. Sed ac dolor sit amet purus malesuada congue. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Suspendisse sagittis ultrices augue. Mauris metus. Nunc dapibus tortor vel mi dapibus sollicitudin. Etiam posuere lacus quis dolor. Praesent id justo in neque elementum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In convallis. Fusce suscipit libero eget elit. Praesent vitae arcu tempor neque lacinia pretium. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.";
+//       }
+//     }
+//     .placeholderText:nth-of-type(10), .placeholderText.placeholderTen {
+//       &:before {
+//         content: "Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu.";
+//       }
+//     }
+//     .placeholderText[data-placeholder-type="words"] {
+//       &:before {
+//         content: "Lorem";
+//       }
+//     }
+//     $words: "Lorem" "ipsum" "dolor" "sit" "amet" "consectetuer" "adipiscing" "elit" "nullam" "feugiat" "turpis" "at" "pulvinar" "vulputate" "erat" "libero" "tristique" "tellus" "nec" "bibendum" "odio" "risus" "sit" "amet" "ante" "aliquam" "erat" "volutpat" "nunc" "auctor" "mauris" "pretium" "quam" "et" "urna" "fusce" "nibh" "duis" "risus" "curabitur" "sagittis" "hendrerit" "ante" "aliquam" "erat" "volutpat" "vestibulum" "erat" "nulla" "ullamcorper" "nec" "rutrum" "non" "nonummy" "ac" "erat" "duis" "condimentum" "augue" "id" "magna" "semper" "rutrum" "nullam" "justo" "enim" "consectetuer" "nec" "ullamcorper" "ac" "vestibulum" "in" "elit" "proin" "pede" "metus" "vulputate" "nec" "fermentum" "fringilla" "vehicula" "vitae" "justo" "fusce" "consectetuer" "risus" "a" "nunc" "aliquam" "ornare" "wisi" "eu" "metus" "integer" "pellentesque" "quam" "vel" "velit" "duis" "pulvinar";
+//     @for $i from 1 through length($words) {
+//       $theseWords: "";
+//       @for $j from 1 through $i {
+//         $theseWords: $theseWords + " " + nth($words, $j);
+//       }
+//       .placeholderText[data-placeholder-type="words"][data-placeholder-amount="#{$i}"] {
+//         &:before {
+//           content: $theseWords;
+//         }
+//       }
+//     }
+//   }
+// }
+
 @if $type-colors {
   @for $i from 1 through length($modifier-name) {
     .#{nth($modifier-name, $i)} {

data/app/assets/stylesheets/groundworkcss/type/_webfonts.scss

@@ -1,13 +1,32 @@
 // =============================================
 //                 Web Fonts
-//          Last Updated:2013-4-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$web-font-classes:          true !default;
+$web-font-names:            "source-sans-pro"
+                            "museo-slab"
+                            "quicksand"
+                            !default;
+$web-font-files:            "sourcesanspro-regular-webfont"
+                            "museo-slab-500-webfont"
+                            "quicksand-regular-webfont"
+                            !default;
+$placeholder-fonts:         true !default;
+$placeholder-font-classes:  true !default;
+$placeholder-font-names:    "redacted"
+                            "redacted-script"
+                            "redacted-script-light"
+                            "redacted-script-bold"
+                            !default;
+$placeholder-font-files:    "redacted-regular"
+                            "redacted-script-regular"
+                            "redacted-script-light"
+                            "redacted-script-bold"
+                            !default;
 
 
 @for $i from 1 through length($web-font-files) {
-  // @include font-face('#{nth($web-font-names, $i)}', inline-font-files("#{nth($web-font-files, $i)}.eot", "#{nth($web-font-files, $i)}.woff", "#{nth($web-font-files, $i)}.ttf"));
   @font-face {
     font-family: '#{nth($web-font-names, $i)}';
     font-style: normal;
@@ -15,14 +34,38 @@
     src: url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.eot');
     src: url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.eot#iefix') format('embedded-opentype'), 
          url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.woff') format('woff'), 
-         url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.ttf') format('truetype');
+         url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.ttf') format('truetype'),
+         url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.svg##{nth($web-font-names, $i)}') format('svg');
   }
   %#{nth($web-font-names, $i)} {
     @include font-stack(#{nth($web-font-names, $i)});
   }
-  @if $webfont-classes {
+  @if $web-font-classes {
     .#{nth($web-font-names, $i)} {
       @extend %#{nth($web-font-names, $i)};
     }
   }
 }
+
+@if $placeholder-fonts {
+  @for $i from 1 through length($placeholder-font-files) {
+    @font-face {
+      font-family: '#{nth($placeholder-font-names, $i)}';
+      font-style: normal;
+      font-weight: normal;
+      src: url('#{$root_path}#{$fonts_path}#{nth($placeholder-font-files, $i)}.eot');
+      src: url('#{$root_path}#{$fonts_path}#{nth($placeholder-font-files, $i)}.eot#iefix') format('embedded-opentype'), 
+           url('#{$root_path}#{$fonts_path}#{nth($placeholder-font-files, $i)}.woff') format('woff'), 
+           url('#{$root_path}#{$fonts_path}#{nth($placeholder-font-files, $i)}.ttf') format('truetype'),
+           url('#{$root_path}#{$fonts_path}#{nth($placeholder-font-files, $i)}.svg##{nth($placeholder-font-names, $i)}') format('svg');
+    }
+    %#{nth($placeholder-font-names, $i)} {
+      @include font-stack(#{nth($placeholder-font-names, $i)});
+    }
+    @if $placeholder-font-classes {
+      .#{nth($placeholder-font-names, $i)} {
+        @extend %#{nth($placeholder-font-names, $i)};
+      }
+    }
+  }
+}

data/app/assets/stylesheets/groundworkcss/ui/_all-ui.scss

@@ -1,14 +1,16 @@
 // =============================================
 //                UI Elements
-//          Last Updated:2013-6-25
+//          Last Updated:2013-9-3
 // =============================================
 
 
 
 
 // ui elements
+@import "boxes";
+@import "buttons";
+@import "forms";
 @import "messages";
-@import "callouts";
+@import "nav";
 @import "tables";
-@import "tooltips";
-@import "modals";
+@import "tabs";