groundworkcss 0.2.2

data/vendor/assets/stylesheets/groundworkcss/_rails-settings.scss

@@ -0,0 +1,202 @@
+// =============================================
+//              Custom Settings
+//          Last Updated:2013-6-17
+// =============================================
+
+
+
+
+///////////////////////
+//  custom settings  //
+///////////////////////
+
+// framework options
+// $classes:             true;       // enable CSS class selectors     (WIP)
+// $tags:                true;       // 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
+//							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;
+// $aria:                true;       // enable Aria role selectors     (WIP)
+
+// file paths
+$root_path:           '/assets/';      // path to HTML document root (relative from $css_path)
+$css_path:            'stylesheets/groundworkcss/';  // path to CSS output (relative from HTML document root)
+$images_path:         'images/groundworkcss/';  // path to images (relative from $root_path)
+$fonts_path:          'fonts/groundworkcss/';  // path to fonts (relative from $root_path)
+$boxsizing_path:      'javascripts/groundworkcss/libs/boxsizing.htc';  // path to box sizing polyfill (change to absolute path from HTML document root)
+
+// layout/grid settings
+// $max-width:           1200px;     // max container width (i.e. - 960px)
+// $gutter:              10px;       // gutter spacing
+
+// break points
+// $mobile:              "only screen and (max-width:480px)";
+// $small-tablet:        "only screen and (max-width:767px)";
+// $ipad:                "only screen and (min-width:768px) and (max-width:1024px)";
+// $desktop:             "only screen and (min-width:1025px)";
+
+
+
+///////////////////////
+//       colors      //
+///////////////////////
+
+// base styles
+// $background-color:    #ffffff;
+// $font-color:          #2b2b2d;
+$base-font-size:         14px;      // base font size for vertical rhythm
+$base-line-height:       17px;      // base line height for vertical rhythm
+// $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;
+
+// $state-name:   'disabled'       'info'       'alert'       'warning'       'error'       'success';
+// $state-code:   $disabled-color  $info-color  $alert-color  $warning-color  $error-color  $success-color;
+// $state-text:   $white           $white       $white        $white          $white        $white;
+
+// 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';
+// $modifier-code:   $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt;
+// $modifier-text:   $white    $white   $white     $white     $white     $white  $white   $white        $white;
+
+// rounded corners
+// $radius:              4px;
+
+
+
+///////////////////////
+//   reset elements  //
+///////////////////////
+
+// elements that will be reset (trim this to include only the elements that are used in your markup)
+// $reset: true;
+// $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 sub sup del strike
+//                   blockquote cite pre code time address
+//                   a img center hr
+//                   form fieldset legend label input textarea button
+//                   table caption tbody thead tfoot tr th td
+//                   iframe object canvas audio video;
+
+
+
+///////////////////////
+//     web fonts     //
+///////////////////////
+
+// font names
+// $web-font-names:      Average Sans,
+//                       American Typewriter;
+// 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;
+
+
+
+///////////////////////
+//      modals       //
+///////////////////////
+
+// overlay
+// $overlay-color:                   #0b0b0b;                    // Color of overlay screen
+// $overlay-opacity:                 0.5;                        // Opacity of overlay screen
+// $shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
+
+// spacing
+// $popup-padding-left:              8px;                        // Padding from left and from right side
+// $popup-padding-left-mobile:       6px;                        // Same as above, but is applied when width of window is less than 800px
+
+// $z-index-base:                    500;                        // Base z-index of popup
+
+// controls
+// $include-arrows:                  true;                       // Include styles for nav arrows
+// $controls-opacity:                0.65;                       // Opacity of controls
+// $controls-color:                  #FFF;                       // Color of controls
+// $inner-close-icon-color:          #333;                       // Color of close button when inside
+// $controls-text-color:             #CCC;                       // Color of preloader and "1 of X" indicator
+// $controls-text-color-hover:       #FFF;                       // Hover color of preloader and "1 of X" indicator
+// $IE7support:                      true;                       // Very basic IE7 support
+
+// Inline-type options
+// $modal-max-width:                 $max-width;                 // Maximum width of inline modals
+
+// Iframe-type options
+// $include-iframe-type:             true;                       // Enable Iframe-type popups
+// $iframe-padding-top:              ($gutter*4);                       // Iframe padding top
+// $iframe-background:               #000;                       // Background color of iframes
+// $iframe-max-width:                $max-width;                      // Maximum width of iframes
+// $iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
+
+// Image-type options
+// $include-image-type:              true;                       // Enable Image-type popups
+// $image-padding-top:               ($gutter*4);                       // Image padding top
+// $image-padding-bottom:            ($gutter*4);                       // Image padding bottom
+// $include-mobile-layout-for-image: true;                       // Removes paddings from top and bottom
+
+// Image caption options
+// $caption-title-color:             #F3F3F3;                    // Caption title color
+// $caption-subtitle-color:          #BDBDBD;                    // Caption subtitle color

data/vendor/assets/stylesheets/groundworkcss/_settings.scss

@@ -0,0 +1 @@
+@import "rails-settings";

data/vendor/assets/stylesheets/groundworkcss/base/_all.scss

@@ -0,0 +1,11 @@
+// =============================================
+//       GroundworkCSS by Gary Hepting
+//          Last Updated:2013-4-24
+// =============================================
+
+
+// reset (box sizing)
+@import "reset";
+@import "global";
+@import "grid";
+@import "helpers";

data/vendor/assets/stylesheets/groundworkcss/base/_animations.scss

@@ -0,0 +1,29 @@
+// =============================================
+//          CSS Keyframe Animations
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+// spin (required by helpers)
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}

data/vendor/assets/stylesheets/groundworkcss/base/_global.scss

@@ -0,0 +1,64 @@
+// =============================================
+//               Global Styles
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+///////////////////////
+//   global styles   //
+///////////////////////
+%html {
+  width:100%;
+  height:100%;
+}
+
+%document {
+  width:100% !important;
+  min-height:100%;
+  background:$background-color;
+  margin:0;
+  padding:0;
+}
+
+%hr {
+  border:0;
+  border-bottom:1px solid $border-color;
+  margin:$gutter auto;
+  clear:both;
+}
+
+%img {
+  max-width:100%;
+  border:none;
+}
+
+@if $tags {
+  $elements: html hr img;
+  @for $i from 1 through length($elements) {
+		@if not index($tag-elements, nth($elements, $i)) == false {
+			#{nth($elements, $i)} {
+				@extend %#{nth($elements, $i)};
+			}
+		}
+  }
+  html, body {
+    @extend %document;
+  }
+  a img {
+    @extend %img;
+  }
+}
+
+@if $classes {
+  $names: html document hr img;
+  @for $i from 1 through length($names) {
+    .#{nth($names, $i)} {
+      @extend %#{nth($names, $i)};
+    }
+  }
+	.html, .body {
+		@extend %document;
+	}
+}

data/vendor/assets/stylesheets/groundworkcss/base/_grid.scss

@@ -0,0 +1,172 @@
+// =============================================
+//    Fractional grid system by Gary Hepting
+//          Last Updated:2013-4-24
+//
+//    ***** REQUIRES BORDER BOX SIZING *****
+//
+// =============================================
+
+
+
+
+///////////////////////////////////////////////
+//    grid system - placeholders & classes   //
+///////////////////////////////////////////////
+
+%container {
+  max-width: $max-width;
+  margin: 0 auto;
+}
+
+%row {
+  @extend %clear;
+  width: $one-whole;
+}
+
+@mixin _column() {
+  float: left;
+  position: relative;
+  min-height: 1px;
+}
+
+%column {
+  @include _column;
+}
+
+%centered {
+  float: none !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+@if $classes {
+  .container          { @extend %container; }
+  .row                { @extend %row; }
+  .column             { @extend %column; }
+  .centered           { @extend %centered; }
+}
+
+$selectors: if($classes, "%" ".", "%");
+
+$numbers: one two three four five six seven eight nine ten eleven twelve;
+$fractions: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
+$fractions-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
+$adapters: $one-half $one-third $one-fourth $one-fifth;
+
+// function to generate the grid code (placeholders and optionally, classes)
+@for $i from 1 through length($selectors) {
+  @for $j from 1 through length($numbers) {
+    #{nth($selectors, $i) + nth($fractions, $j)},
+    #{nth($selectors, $i) + nth($fractions-plural, $j)} {
+      width: percentage(1 / $j);
+      @extend %column;
+      @for $width from 1 through $j {
+        &#{nth($selectors, $i) + nth($numbers, $width)} {
+          width: percentage($width / $j);
+          @extend %column;
+        }
+      }
+      @for $right-left-skip from 1 through $j - 1 {
+        &#{nth($selectors, $i) + "right-" + nth($numbers, $right-left-skip)} {
+          left: percentage($right-left-skip / $j);
+        }
+        &#{nth($selectors, $i) + "left-" + nth($numbers, $right-left-skip)} {
+          right: percentage($right-left-skip / $j);
+        }
+        &#{nth($selectors, $i) + "skip-" + nth($numbers, $right-left-skip)} {
+          margin-left: percentage($right-left-skip / $j);
+        }
+      }
+    }
+  }
+}
+
+// small-tablet grid adapters
+@media #{$small-tablet} {
+  @for $i from 1 through 4 {
+    .#{nth($numbers, ($i + 1))}-up-small-tablet {
+      width: nth($adapters, $i) !important;
+      clear: none !important;
+      float: left !important;
+    }
+  }
+}
+// mobile grid adapters
+@media #{$mobile} {
+  @for $i from 1 through 4 {
+    .#{nth($numbers, ($i + 1))}-up-mobile {
+      width: nth($adapters, $i) !important;
+      clear: none !important;
+      float: left !important;
+    }
+  }
+}
+
+// grid classes responsive
+@mixin grid-responsive($both: true) {
+  // responsive grid
+  %half, %halves,
+  %third, %thirds,
+  %fourth, %fourths,
+  %fifth, %fifths,
+  %sixth, %sixths,
+  %seventh, %sevenths,
+  %eighth, %eighths,
+  %ninth, %ninths,
+  %tenth, %tenths,
+  %eleventh, %elevenths,
+  %twelfth, %twelfths#{if($classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
+    @if $both {
+      &:not(.small-tablet):not(.mobile):not(.two-up-mobile):not(.three-up-mobile):not(.four-up-mobile):not(.five-up-mobile):not(.two-up-small-tablet):not(.three-up-small-tablet):not(.four-up-small-tablet):not(.five-up-small-tablet) {
+        @include grid-collapse();
+      }
+    }
+    @else {
+      &:not(.mobile):not(.two-up-mobile):not(.three-up-mobile):not(.four-up-mobile):not(.five-up-mobile) {
+        @include grid-collapse();
+      }
+    }
+  }
+}
+
+@mixin grid-collapse() {
+  width:100% !important;
+  float:none;
+  clear:both;
+  // reset push
+  &%right-one,
+  &%right-two,
+  &%right-three,
+  &%right-four,
+  &%right-five,
+  &%right-six,
+  &%right-seven,
+  &%right-eight,
+  &%right-nine,
+  &%right-ten,
+  &%right-eleven#{if($classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")}  { left:0; }
+  // reset pull
+  &%left-one,
+  &%left-two,
+  &%left-three,
+  &%left-four,
+  &%left-five,
+  &%left-six,
+  &%left-seven,
+  &%left-eight,
+  &%left-nine,
+  &%left-ten,
+  &%left-eleven#{if($classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")}   { right:0; }
+  // reset offset
+  &%skip-one,
+  &%skip-two,
+  &%skip-three,
+  &%skip-four,
+  &%skip-five,
+  &%skip-six,
+  &%skip-seven,
+  &%skip-eight,
+  &%skip-nine,
+  &%skip-ten,
+  &%skip-eleven#{if($classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")}   { margin-left:0; }
+}