groundworkcss-rails 0.2.9 → 0.2.10

data/vendor/assets/stylesheets/groundworkcss-scss/{_helpers.scss → base/_helpers.scss}

@@ -1,12 +1,20 @@
+// =============================================
+//              Layout Helpers
+//          Last Updated:2013-4-24
+// =============================================
+
+
+@import "animations";   // required
+
+
 // ================================
-//    layout helpers: mixins 
+//             mixins
 // ================================
 
-@mixin _clear {
-  clear: both;
-  &:after {content:''; display:block; clear:both;}
+@mixin _clear                     { clear: both;
+  &:after                         { content:''; display:block; clear:both; }
 }
-@mixin _clearfix {@include _clear;}
+@mixin _clearfix                  { @include _clear; } // alias
 
 @mixin _padded($multiple: 1)      { padding: $gutter * $multiple; }
 @mixin _pad-top($multiple: 1)     { padding-top: $gutter * $multiple; }
@@ -32,33 +40,47 @@
 
 @mixin _inline                    { display:inline-block; width:auto; }
 @mixin _block                     { display:block; }
+@mixin _hidden                    { display:none !important; }
+
+@mixin _small                     { font-size:0.8em; }
+@mixin _large                     { font-size:1.5em; }
+
 @mixin _zero                      { margin:0; padding:0; }
+
 @mixin _pull-right                { float:right; }
 @mixin _pull-left                 { float:left; }
+
 @mixin _bordered                  { border: 1px solid $border-color; }
 @mixin _border-top                { border-top:1px solid $border-color; }
 @mixin _border-right              { border-right:1px solid $border-color; }
 @mixin _border-bottom             { border-bottom:1px solid $border-color; }
 @mixin _border-left               { border-left:1px solid $border-color; }
+
 @mixin _align-top                 { display:table-cell; vertical-align:top; } // must have height (experimental)
 @mixin _align-right               { text-align:right; }
 @mixin _align-bottom              { display:table-cell; vertical-align:bottom; } // must have height (experimental)
 @mixin _align-left                { text-align:left; }
 @mixin _align-center              { text-align:center; }
 @mixin _justify                   { text-align:justify; }
+
 @mixin _truncate                  { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+
 @mixin _center                    { @include _block; margin:0 auto; }
+
 @mixin _spacer                    { height:$gutter; }
-@mixin _round                     { @include rounded(9999px); } // function is found in _mixins.scss
+
+@mixin _square                    { @include rounded(0); }
+@mixin _round                     { @include rounded(9999px); }
+
 @mixin _disabled                  { @include state(disabled,textOnly); }
 
-// Seems like redundant rotate and spin mixins, but are there any side implications if we move "@include _inline;" into the rotate() and spin() mixin in _mixins.scss?
 @mixin _rotate-90                 { @include _inline; @include rotate(90deg); }
 @mixin _rotate-180                { @include _inline; @include rotate(180deg); }
 @mixin _rotate-270                { @include _inline; @include rotate(270deg); }
 @mixin _rotate-90-ctr             { @include _inline; @include rotate(-90deg); }
 @mixin _rotate-180-ctr            { @include _inline; @include rotate(-180deg); }
 @mixin _rotate-270-ctr            { @include _inline; @include rotate(-270deg); }
+
 @mixin _spin                      { @include _inline; @include spin; }
 @mixin _spin-once                 { @include _inline; @include spin(1); }
 @mixin _spin-twice                { @include _inline; @include spin(2); }
@@ -72,8 +94,11 @@
 @mixin _spin-slow-twice           { @include _inline; @include spin(2,5s); }
 @mixin _spin-slow-thrice          { @include _inline; @include spin(3,5s); }
 
+
+
+
 // ================================
-//    layout helpers: placeholders
+//          placeholders
 // ================================
 
 %clear, %clearfix { @include _clear;}
@@ -98,6 +123,7 @@
   &%double        { @include _pad-left(2); }
   &%triple        { @include _pad-left(3); }
 }
+
 %gapped           { @include _gapped;
   &%double        { @include _gapped(2); }
   &%triple        { @include _gapped(3); }
@@ -118,8 +144,9 @@
   &%double        { @include _gap-left(2); }
   &%triple        { @include _gap-left(3); }
 }
+
 %stick            { @include _stick;
-  &%top           { @include _stick(top); } // Will this compile position:fixed and z:1 twice? Have to check.
+  &%top           { @include _stick(top); }
   &%right         { @include _stick(right); }
   &%bottom        { @include _stick(bottom); }
   &%left          { @include _stick(left); }
@@ -129,31 +156,47 @@
 
 %inline           { @include _inline; }
 %block            { @include _block; }
+%hidden           { @include _hidden; }
+
+%small            { @include _small; }
+%big, %large      { @include _large; }
+
 %zero             { @include _zero; }
+
 %pull-right       { @include _pull-right; }
 %pull-left        { @include _pull-left; }
+
 %bordered         { @include _bordered; }
 %border-top       { @include _border-top; }
 %border-right     { @include _border-right; }
 %border-bottom    { @include _border-bottom; }
 %border-left      { @include _border-left; }
+
 %align-top        { @include _align-top; } // must have height (experimental)
 %align-right      { @include _align-right; }
 %align-bottom     { @include _align-bottom; } // must have height (experimental)
 %align-left       { @include _align-left; }
 %align-center     { @include _align-center; }   
 %justify          { @include _justify; }
+
 %truncate         { @include _truncate; }
+
 %center           { @include _center; }
+
 %spacer           { @include _spacer; }
+
+%square           { @include _square; }
 %round            { @include _round; }
+
 %disabled         { @include _disabled; }
-%rotate-90        { @include _rotate-90; } // As mentioned above, might be referring to redundant mixins.
+
+%rotate-90        { @include _rotate-90; }
 %rotate-180       { @include _rotate-180; }
 %rotate-270       { @include _rotate-270; }
 %rotate-90-ctr    { @include _rotate-90-ctr; }
 %rotate-180-ctr   { @include _rotate-180-ctr; }
 %rotate-270-ctr   { @include _rotate-270-ctr; }
+
 %spin             { @include _spin; }
 %spin-once        { @include _spin-once; }
 %spin-twice       { @include _spin-twice; }
@@ -168,22 +211,23 @@
 %spin-slow-thrice { @include _spin-slow-thrice; }
 
 
+
+
 // ================================
-//    layout helpers: classes
+//            classes
 // ================================
 
 @if $classes {
 
-  $helpers: inline block zero pull-right pull-left bordered border-right border-left border-top border-bottom align-top align-right align-bottom align-left align-center justify truncate center spacer round rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr spin spin-once spin-twice spin-thrice spin-fast spin-fast-once spin-fast-twice spin-fast-thrice spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
-
-  // function to generate the helpers
+  // function to generate the simple helpers
+  $helpers: inline block hidden small large zero pull-right pull-left bordered border-right border-left border-top border-bottom align-top align-right align-bottom align-left align-center justify truncate center spacer square round rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr spin spin-once spin-twice spin-thrice spin-fast spin-fast-once spin-fast-twice spin-fast-thrice spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
   @for $i from 1 through length($helpers) {
     .#{nth($helpers, $i)} { @extend %#{nth($helpers, $i)}; }
   }
 
+  // function to generate the spacers (with nested modifiers)
   $spacers: padded pad-top pad-right pad-bottom pad-left gapped gap-top gap-right gap-bottom gap-left;
   $modifiers: double triple;
-  // function to generate the spacers
   @for $i from 1 through length($spacers) {
     .#{nth($spacers, $i)} {
       @extend %#{nth($spacers, $i)};
@@ -193,12 +237,11 @@
     }
   }
 
+  // manual declaration of the more complex helpers
   .clear, .clearfix { @extend %clear;
     &:after         { content:''; display:block; clear:both; }
   }
-
-  .disabled         { @include state(disabled,textOnly); }
-
+  .disabled         { @extend %disabled; }
   .stick            { @extend %stick;
     &.top           { @extend %top; }
     &.right         { @extend %right; }

data/vendor/assets/stylesheets/groundworkcss-scss/{_reset.scss → base/_reset.scss}

@@ -1,6 +1,6 @@
 // =============================================
-//         CSS Reset by Gary Hepting 
-//          Last Updated:2013-1-3
+//                  CSS Reset
+//          Last Updated:2013-4-24
 // =============================================
 
 
@@ -30,48 +30,53 @@
 //  |                  B  O  R  D  E  R                  |
 //  | ---------------------------------------------------|
 //
-//  NOTE: Padding and border are calculated within an 
-//        element's specified width instead of its total 
+//  NOTE: Padding and border are calculated within an
+//        element's specified width instead of its total
 //        width being increased by these properties
 //
 //
 // =======================================================
 
-*, *:after, *:before {
-  -ms-box-sizing:border-box;              // IE 10+
-  -o-box-sizing:border-box;               // Opera
-  -moz-box-sizing:border-box;             // Firefox
-  -webkit-box-sizing:border-box;          // Webkit (Safari, Chrome, etc)
-  box-sizing:border-box;                  // IE 8-9 & Other
-  *behavior: url($boxsizing_path);        // IE 6-7  -- Thank Schepp for the polyfill for legacy IE browsers: https://github.com/Schepp/box-sizing-polyfill
+%everything {
+  @include box-sizing(border-box);
+  *behavior: url($boxsizing_path);  // IE 6-7  -- Thank Schepp for the polyfill for legacy IE browsers: https://github.com/Schepp/box-sizing-polyfill
 }
 
+%document {
+  -webkit-text-size-adjust:none;
+  line-height:1;
+}
 
-
-
-///////////////////////
-//  optimized reset  //
-///////////////////////
-html, body, div, span, 
-h1, h2, h3, h4, h5, h6, p, 
-ol, ul, li, dl, dt, dd, 
-a, img, blockquote, cite, 
-em, small, strong, b, u, i, time, address, center, 
-form, fieldset, legend, label, input, textarea, select, button, 
-table, caption, tbody, tfoot, thead, tr, th, td, 
-header, footer, aside, menu, nav, section, article, details, 
-pre, code, iframe, object, canvas, audio, video {
+%html5-elements {
   margin:0;
   padding:0;
   border: 0;
+  font-size:1em;
+  font:inherit;
+  vertical-align:baseline;
 }
 
+%block-elements {
+  display:block;
+}
 
+%table-elements {
+  border-collapse:collapse;
+  border-spacing:0;
+}
 
-
-///////////////////////
-// HTML5 display fix //
-///////////////////////
-header, footer, aside, menu, nav, section, article, details {
-  display:block;
+@if $reset {
+  *, *:after, *:before {
+    @extend %everything;
+  }
+  // reset all $reset-elements (configured in _variables.scss)
+  @for $i from 1 through length($reset-elements) {
+    #{nth($reset-elements, $i)} { @extend %html5-elements; }
+  }
+  header, footer, aside, menu, nav, section, article, details {
+    @extend %block-elements;
+  }
+  table {
+    @extend %table-elements;
+  }
 }

data/vendor/assets/stylesheets/groundworkcss-scss/core/_all.scss

@@ -0,0 +1,11 @@
+// =============================================
+//       GroundworkCSS by Gary Hepting
+//          Last Updated:2013-4-24
+// =============================================
+
+
+// core
+@import "compass";      // required (http://compass-style.org/install/)
+@import "constants";    // required
+@import "defaults";     // required
+@import "mixins";       // required

data/vendor/assets/stylesheets/groundworkcss-scss/{_variables.scss → core/_constants.scss}

@@ -1,68 +1,17 @@
-///////////////////////
-//      settings     //
-///////////////////////
-$max-width:           1200px;     // max container width (i.e. - 960px)
-$gutter:              10px;       // gutter spacing
-$classes:             true;       // enable CSS class selectors     (WIP)
-$tags:                true;       // enable semantic tag selectors  (WIP)
-$aria:                true;       // enable Aria role selectors     (WIP)
+// =============================================
+//            Constant Variables
+//          Last Updated:2013-4-24
+// =============================================
 
 
-// file paths
-$css_path:            'css/';     // path to CSS output (relative from HTML document root)
-$root_path:           '../';      // path to HTML document root (relative from $css_path)
-$images_path:         'images/';  // path to images (relative from $root_path)
-$fonts_path:          'font/';    // path to fonts (relative from $root_path)
-$boxsizing_path:      '/js/libs/boxsizing.htc';  // path to box sizing polyfill (change to absolute path from HTML document root)
-
 
 ///////////////////////
 //       colors      //
 ///////////////////////
 
-// base styles
-$background-color:    #ffffff;
-$font-color:          #2b2b2d;
-$font-size:           14px;
-$font-family:         Helvetica, Arial, Geneva, sans-serif;
-// links
-$link-color:          #489AC1;
-$link-active:         #198D98;
-// selection
-$selection-color:     $link-color;
-$selection-text:      #ffffff;
-// borders
-$border-color:        #dddddd;
-// buttons
-$button-color:        #1DABB8;
-$button-border-color: darken($button-color,10%);
-$button-active:       #198D98;
-$button-text:         #ffffff;
-$button-active-text:  #ffffff;
-// disabled
-$disabled-color:      gray;
-// info
-$info-color:          #3a87ad;
-$info-background:     #d9edf7;
-$info-border:         #bce8f1;
-// alert
-$alert-color:         #c09853;
-$alert-background:    #fcf8e3;
-$alert-border:        #fbeee0;
-// error
-$error-color:         #b94a48;
-$error-background:    #f2dede;
-$error-border:        #eed3d7;
-// warning
-$warning-color:       #FF971E;
-$warning-background:  #FFE5C7;
-$warning-border:      #FFDBB3;
-// success
-$success-color:       #468847;
-$success-background:  #dff0d8;
-$success-border:      #d6e9c6;
-// rounded corners
-$radius:              4px;
+$white:               #ffffff;
+$black:               #111111;
+
 
 
 ///////////////////////

data/vendor/assets/stylesheets/groundworkcss-scss/core/_defaults.scss

@@ -0,0 +1,150 @@
+// =============================================
+//              Custom Settings
+//          Last Updated:2013-4-25
+// =============================================
+
+
+
+
+///////////////////////
+//  custom settings  //
+///////////////////////
+
+// framework options
+$classes:             true !default;       // enable CSS class selectors     (WIP)
+$tags:                true !default;       // enable semantic tag selectors  (WIP)
+$tag-elements: html body
+							div span header footer aside nav menu section article details
+							h1 h2 h3 h4 h5 h6 p
+							ol ul li dl dt dd
+							em small big strong b u i sub sup del strike
+							blockquote cite pre code time address
+							a img center hr
+							form fieldset legend label input textarea select button
+							table caption tbody thead tfoot tr th td
+							iframe object canvas audio video !default;
+
+$aria:                true !default;       // enable Aria role selectors     (WIP)
+
+// file paths
+$root_path:           '../' !default;      // path to HTML document root (relative from $css_path)
+$css_path:            'css/' !default;     // path to CSS output (relative from HTML document root)
+$images_path:         'images/' !default;  // path to images (relative from $root_path)
+$fonts_path:          'font/' !default;    // path to fonts (relative from $root_path)
+$boxsizing_path:      '/js/libs/boxsizing.htc' !default;  // path to box sizing polyfill (change to absolute path from HTML document root)
+
+// layout/grid settings
+$max-width:           1200px !default;     // max container width (i.e. - 960px)
+$gutter:              10px !default;       // gutter spacing
+
+
+
+///////////////////////
+//       colors      //
+///////////////////////
+
+// base styles
+$background-color:    #ffffff !default;
+$font-color:          #2b2b2d !default;
+$font-size:           14px !default;
+$font-family:         Helvetica, Arial, Geneva, sans-serif !default;
+
+// links
+$link-color:          #489AC1 !default;
+$link-active:         #198D98 !default;
+
+// selection
+$selection-color:     $link-color !default;
+$selection-text:      #ffffff !default;
+
+// borders
+$border-color:        #dddddd !default;
+
+// buttons
+$button-color:        #1DABB8 !default;
+$button-border-color: darken($button-color,10%) !default;
+$button-active:       #198D98 !default;
+$button-text:         #ffffff !default;
+$button-active-text:  #ffffff !default;
+
+// disabled
+$disabled-color:      gray !default;
+
+// info
+$info-color:          #3a87ad !default;
+$info-background:     #d9edf7 !default;
+$info-border:         #bce8f1 !default;
+
+// alert
+$alert-color:         #c09853 !default;
+$alert-background:    #fcf8e3 !default;
+$alert-border:        #fbeee0 !default;
+
+// error
+$error-color:         #b94a48 !default;
+$error-background:    #f2dede !default;
+$error-border:        #eed3d7 !default;
+
+// warning
+$warning-color:       #FF971E !default;
+$warning-background:  #FFE5C7 !default;
+$warning-border:      #FFDBB3 !default;
+
+// success
+$success-color:       #468847 !default;
+$success-background:  #dff0d8 !default;
+$success-border:      #d6e9c6 !default;
+
+$state-name:    disabled         info         alert         warning         error         success        !default;
+$state-code:   $disabled-color  $info-color  $alert-color  $warning-color  $error-color  $success-color  !default;
+$state-text:   $white           $white       $white        $white          $white        $white          !default;
+
+// modifier colors
+$green:               #2ecc71 !default;
+$blue:                #3498db !default;
+$purple:              #9b59b6 !default;
+$yellow:              #f1c40f !default;
+$orange:              #e67e22 !default;
+$red:                 #e74c3c !default;
+$pink:                #f02475 !default;
+$turquoise:           #1abc9c !default;
+$asphalt:             #34495e !default;
+
+$modifier-name:    green     blue     purple     yellow     orange     red     pink     turquoise     asphalt  !default;
+$modifier-code:   $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt  !default;
+$modifier-text:   $white    $white   $white     $white     $white     $white  $white   $white        $white    !default;
+
+// rounded corners
+$radius:              4px !default;
+
+
+
+///////////////////////
+//   reset elements  //
+///////////////////////
+
+// elements that will be reset (trim this to include only the elements that are used in your markup)
+$reset: true !default;
+$reset-elements:  html body
+                  div span header footer aside nav menu section article details
+                  h1 h2 h3 h4 h5 h6 p
+                  ol ul li dl dt dd
+                  em small big strong b u i
+                  blockquote cite pre code time address
+                  a img center hr
+                  form fieldset legend label input textarea select button
+                  table caption tbody thead tfoot tr th td
+                  iframe object canvas audio video !default;
+
+
+
+///////////////////////
+//     web fonts     //
+///////////////////////
+
+// font names (no spaces or special characters, these are used to build selectors)
+$web-font-names:      AverageSans,
+                      AmericanTypewriter !default;
+// font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
+$web-font-files:      average-sans-webfont,
+                      americantypewriterstd-bold !default;