groundworkcss 0.4.4 → 2.0.0

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

@@ -1,12 +1,21 @@
 // =============================================
 //    Fractional grid system by Gary Hepting
-//          Last Updated:2013-4-24
+//          Last Updated:2013-8-16
 //
 //    ***** REQUIRES BORDER BOX SIZING *****
 //
 // =============================================
 
-
+$numerators:              "one"    "two"    "three"  "four"    "five"   "six"    "seven"    "eight"   "nine"   "ten"    "eleven"    "twelve" !default;
+$denominators:            "whole"  "half"   "third"  "fourth"  "fifth"  "sixth"  "seventh"  "eighth"  "ninth"  "tenth"  "eleventh"  "twelfth" !default;
+$denominators-plural:     "wholes" "halves" "thirds" "fourths" "fifths" "sixths" "sevenths" "eighths" "ninths" "tenths" "elevenths" "twelfths" !default;
+$grid-classes:            true !default;
+$grid-adapter-classes:    true !default;
+$grid-adapters:           $one-whole $one-half $one-third $one-fourth $one-fifth !default;
+$grid-adapters-clearfix:  15 !default;
+$container-width:         1200px !default;
+$gutter:                  10px !default;
+$responsive:              true !default;
 
 
 ///////////////////////////////////////////////
@@ -14,7 +23,11 @@
 ///////////////////////////////////////////////
 
 %container {
-  max-width: $max-width;
+  @if $responsive {
+    max-width: $container-width;
+  } @else {
+    width: $container-width;
+  }
   margin: 0 auto;
 }
 
@@ -75,39 +88,124 @@ $selectors: if($grid-classes, "%" ".", "%");
   }
 }
 
-// small-tablet grid adapters
-@media #{$small-tablet} {
-  @for $i from 1 through length($grid-adapters) {
-    .#{nth($numerators, ($i))}-up-small-tablet {
-      width: nth($grid-adapters, $i) !important;
-      clear: none !important;
-      float: left !important;
-      left: 0 !important;
-      right: 0 !important;
+@if $grid-adapter-classes {
+  @media #{$tablet} {
+    // grid adapters
+    @for $i from 1 through length($grid-adapters) {
+      .#{nth($numerators, ($i))}-up {
+        width: nth($grid-adapters, $i) !important;
+        clear: none !important;
+        float: left !important;
+        left: 0 !important;
+        right: 0 !important;
+      }
+    }
+    // grid adapters nth clearfix
+    @for $i from 1 through length($grid-adapters) {
+      $nth-clears: "";
+      @for $j from 1 through $grid-adapters-clearfix {
+        $nth-clears: $nth-clears + "&:nth-child(#{($i * $j) + 1})";
+        @if $j < $grid-adapters-clearfix {
+          $nth-clears: $nth-clears + ", ";
+        }
+      }
+      .#{nth($numerators, ($i))}-up {
+        #{$nth-clears} {
+          clear: both !important;
+        }
+      }
     }
   }
 }
-// grid adapter nth clearfix
-@media #{$small-tablet} and #{$not-mobile} {
-  @for $i from 1 through length($grid-adapters) {
-    .#{nth($numerators, ($i))}-up-small-tablet {
-      &:nth-child(#{$i + 1}) {
-        clear: both !important;
+
+@if $responsive and $grid-adapter-classes {
+  // ipad grid adapters
+  @media #{$ipad} {
+    @for $i from 1 through length($grid-adapters) {
+      .#{nth($numerators, ($i))}-up-ipad {
+        width: nth($grid-adapters, $i) !important;
+        clear: none !important;
+        float: left !important;
+        left: 0 !important;
+        right: 0 !important;
       }
     }
   }
-}
-// mobile grid adapters
-@media #{$mobile} {
-  @for $i from 1 through length($grid-adapters) {
-    .#{nth($numerators, ($i))}-up-mobile {
-      width: nth($grid-adapters, $i) !important;
-      clear: none !important;
-      float: left !important;
-      left: 0 !important;
-      right: 0 !important;
-      &:nth-child(#{$i + 1}) {
-        clear: both !important;
+  // ipad grid adapters nth clearfix
+  @media #{$ipad} and #{$tablet} and #{$not-mobile} {
+    @for $i from 1 through length($grid-adapters) {
+      $nth-clears: "";
+      @for $j from 1 through $grid-adapters-clearfix {
+        $nth-clears: $nth-clears + "&:nth-child(#{($i * $j) + 1})";
+        @if $j < $grid-adapters-clearfix {
+          $nth-clears: $nth-clears + ", ";
+        }
+      }
+      .#{nth($numerators, ($i))}-up-ipad {
+        #{$nth-clears} {
+          clear: both !important;
+        }
+      }
+    }
+  }
+  // small-tablet grid adapters
+  @media #{$small-tablet} and #{$not-mobile} {
+    @for $i from 1 through length($grid-adapters) {
+      .#{nth($numerators, ($i))}-up-small-tablet {
+        width: nth($grid-adapters, $i) !important;
+        clear: none !important;
+        float: left !important;
+        left: 0 !important;
+        right: 0 !important;
+      }
+    }
+  }
+  // small-tablet grid adapters nth clearfix
+  @media #{$small-tablet} and #{$not-mobile} {
+    @for $i from 1 through length($grid-adapters) {
+      $nth-clears: "";
+      @for $j from 1 through $grid-adapters-clearfix {
+        $nth-clears: $nth-clears + "&:nth-child(#{($i * $j) + 1})";
+        @if $j < $grid-adapters-clearfix {
+          $nth-clears: $nth-clears + ", ";
+        }
+      }
+      .#{nth($numerators, ($i))}-up-small-tablet {
+        #{$nth-clears} {
+          clear: both !important;
+        }
+      }
+    }
+  }
+  // mobile grid adapters
+  @media #{$mobile} {
+    @for $i from 1 through length($grid-adapters) {
+      .#{nth($numerators, ($i))}-up-mobile {
+        width: nth($grid-adapters, $i) !important;
+        clear: none !important;
+        float: left !important;
+        left: 0 !important;
+        right: 0 !important;
+        &:nth-child(#{$i + 1}) {
+          clear: both !important;
+        }
+      }
+    }
+  }
+  // mobile grid adapters nth clearfix
+  @media #{$mobile} {
+    @for $i from 1 through length($grid-adapters) {
+      $nth-clears: "";
+      @for $j from 1 through $grid-adapters-clearfix {
+        $nth-clears: $nth-clears + "&:nth-child(#{($i * $j) + 1})";
+        @if $j < $grid-adapters-clearfix {
+          $nth-clears: $nth-clears + ", ";
+        }
+      }
+      .#{nth($numerators, ($i))}-up-mobile {
+        #{$nth-clears} {
+          clear: both !important;
+        }
       }
     }
   }
@@ -115,7 +213,12 @@ $selectors: if($grid-classes, "%" ".", "%");
 
 // grid classes responsive
 @mixin grid-responsive($both: true) {
-  $nots: ':not(.mobile):not(.two-up-mobile):not(.three-up-mobile):not(.four-up-mobile):not(.five-up-mobile)'; // set up mobile $nots
+  $nots: ':not(.mobile)'; // set up mobile nots
+  @if $grid-adapter-classes {
+    @for $i from 1 through length($grid-adapters) {
+      $nots: $nots + ':not(.' + unquote("#{nth($numerators, ($i))}") + '-up-mobile)';
+    }
+  }
   %responsive-grid#{$both} { // reset grid
     width:100% !important;
     float:none;
@@ -133,7 +236,12 @@ $selectors: if($grid-classes, "%" ".", "%");
   @for $i from 1 through length($selectors) {
     @for $j from 2 through length($numerators) {
       @if $both {
-        $nots: ':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)'; // setup tablet $nots
+        $nots: $nots + ':not(.small-tablet)'; // setup tablet $nots
+        @if $grid-adapter-classes {
+          @for $i from 1 through length($grid-adapters) {
+            $nots: $nots + ':not(.' + unquote("#{nth($numerators, ($i))}") + '-up-small-tablet)';
+          }
+        }
       }
       #{nth($selectors, $i) + nth($denominators, $j) + $nots},
       #{nth($selectors, $i) + nth($denominators-plural, $j) + $nots} {
@@ -155,23 +263,3 @@ $selectors: if($grid-classes, "%" ".", "%");
     }
   }
 }
-
-@media #{$small-tablet} and #{$not-mobile} {
-  @for $i from 1 through length($grid-adapters) {
-    .#{nth($numerators, ($i))}-up-small-tablet {
-      &:nth-child(#{$i + 1}) {
-        clear: both !important;
-      }
-    }
-  }
-}
-
-@media #{$mobile} {
-  @for $i from 1 through length($grid-adapters) {
-    .#{nth($numerators, ($i))}-up-mobile {
-      &:nth-child(#{$i + 1}) {
-        clear: both !important;
-      }
-    }
-  }
-}

data/app/assets/stylesheets/groundworkcss/base/_hbox-vbox.scss

@@ -0,0 +1,101 @@
+.hbox {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+ 
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-align: stretch;
+ 
+  display: box;
+  box-orient: horizontal;
+  box-align: stretch;
+}
+ 
+.hbox > * {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  display: block;
+}
+ 
+.vbox {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+ 
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-align: stretch;
+ 
+  display: box;
+  box-orient: vertical;
+  box-align: stretch;
+}
+ 
+.vbox > * {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  display: block;
+}
+ 
+.spacer {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+ 
+.reverse {
+  -webkit-box-direction: reverse;
+  -moz-box-direction: reverse;
+  box-direction: reverse;
+}
+ 
+.boxFlex0 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+}
+ 
+.boxFlex1, .boxFlex {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+ 
+.boxFlex2 {
+  -webkit-box-flex: 2;
+  -moz-box-flex: 2;
+  box-flex: 2;
+}
+ 
+.boxGroup1 {
+  -webkit-box-flex-group: 1;
+  -moz-box-flex-group: 1;
+  box-flex-group: 1;
+}
+ 
+.boxGroup2 {
+  -webkit-box-flex-group: 2;
+  -moz-box-flex-group: 2;
+  box-flex-group: 2;
+}
+ 
+.start {
+  -webkit-box-pack: start;
+  -moz-box-pack: start;
+  box-pack: start;
+}
+ 
+.end {
+  -webkit-box-pack: end;
+  -moz-box-pack: end;
+  box-pack: end;
+}
+ 
+.center {
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+}

data/app/assets/stylesheets/groundworkcss/base/_helpers.scss

@@ -1,10 +1,42 @@
 // =============================================
 //              Layout Helpers
-//          Last Updated:2013-6-23
+//          Last Updated:2013-8-16
 // =============================================
 
+$positioning-classes: true !default;
 
-@import "animations"; // required for spin helpers
+$spacer-classes:      true !default;
+$spacer-helpers:      "padded" "pad-top" "pad-right" "pad-bottom" "pad-left"
+                      "gapped" "gap-top" "gap-right" "gap-bottom" "gap-left"
+                      "offset" "offset-top" "offset-right" "offset-bottom" "offset-left" !default;
+
+$spacer-mod-classes:  true !default;
+$spacer-modifiers:    "half" "double" "triple" !default;
+
+$size-classes:        true !default;
+$size-helpers:        "small" "medium" "large" !default;
+
+$layout-classes:      true !default;
+$layout-helpers:      "inline" "inline-block" "block"
+                      "hidden"
+                      "zero"
+                      "pull-right" "pull-left" "pull-none" "clear"
+                      "center" !default;
+
+$typography-classes:  true !default;
+$typography-helpers:  "align-top" "align-right" "align-bottom" "align-left" "align-center" "justify"
+                      "truncate" !default;
+
+$border-classes:      true !default;
+$border-helpers:      "bordered" "border-right" "border-left" "border-top" "border-bottom" !default;
+
+$radius-classes:      true !default;
+$radius-helpers:      "square" "round" !default;
+
+$rotation-classes:    true !default;
+$rotation-helpers:    "rotate-90" "rotate-90-ctr" "rotate-180" "rotate-180-ctr" "rotate-270" "rotate-270-ctr" "rotate-360" "rotate-360-ctr" !default;
+
+$transition-classes:  true !default;
 
 
 ///////////////////////
@@ -52,19 +84,23 @@
   @if $position == center {left: 50%;}
 }
 
+@mixin _relative                  { position: relative; }
 @mixin _static                    { position: static; }
 
-@mixin _inline                    { display:inline-block; width:auto; }
+@mixin _inline                    { display:inline; }
+@mixin _inline-block              { display:inline-block; width:auto; }
 @mixin _block                     { display:block; }
 @mixin _hidden                    { display:none !important; }
 
 @mixin _small                     { font-size:0.8em; }
+@mixin _medium                    { font-size:1em; }
 @mixin _large                     { font-size:1.5em; }
 
 @mixin _zero                      { margin:0; padding:0; }
 
 @mixin _pull-right                { float:right; }
 @mixin _pull-left                 { float:left; }
+@mixin _pull-none                 { float:none; }
 
 @mixin _bordered                  { border: 1px solid $border-color; }
 @mixin _border-top                { border-top:1px solid $border-color; }
@@ -86,27 +122,14 @@
 @mixin _square                    { @include border-radius(0); }
 @mixin _round                     { @include rounded(9999em); }
 
-@mixin _disabled                  { @include state(disabled,textOnly); }
-
-@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); }
-@mixin _spin-thrice               { @include _inline; @include spin(3); }
-@mixin _spin-fast                 { @include _inline; @include spin(infinite,1s); }
-@mixin _spin-fast-once            { @include _inline; @include spin(1,1s); }
-@mixin _spin-fast-twice           { @include _inline; @include spin(2,1s); }
-@mixin _spin-fast-thrice          { @include _inline; @include spin(3,1s); }
-@mixin _spin-slow                 { @include _inline; @include spin(infinite,5s); }
-@mixin _spin-slow-once            { @include _inline; @include spin(1,5s); }
-@mixin _spin-slow-twice           { @include _inline; @include spin(2,5s); }
-@mixin _spin-slow-thrice          { @include _inline; @include spin(3,5s); }
+@mixin _rotate-90                 { @include _inline-block; @include rotate(90deg); }
+@mixin _rotate-180                { @include _inline-block; @include rotate(180deg); }
+@mixin _rotate-270                { @include _inline-block; @include rotate(270deg); }
+@mixin _rotate-360                { @include _inline-block; @include rotate(360deg); }
+@mixin _rotate-90-ctr             { @include _inline-block; @include rotate(-90deg); }
+@mixin _rotate-180-ctr            { @include _inline-block; @include rotate(-180deg); }
+@mixin _rotate-270-ctr            { @include _inline-block; @include rotate(-270deg); }
+@mixin _rotate-360-ctr            { @include _inline-block; @include rotate(-360deg); }
 
 
 
@@ -118,64 +141,79 @@
 %clear, %clearfix { @include _clear;}
 
 %padded           { @include _padded;
+  &.half          { @include _padded(0.5); }
   &%double        { @include _padded(2); }
   &%triple        { @include _padded(3); }
 }
 %pad-top          { @include _pad-top;
+  &.half          { @include _pad-top(0.5); }
   &%double        { @include _pad-top(2); }
   &%triple        { @include _pad-top(3); }
 }
 %pad-right        { @include _pad-right;
+  &.half          { @include _pad-right(0.5); }
   &%double        { @include _pad-right(2); }
   &%triple        { @include _pad-right(3); }
 }
 %pad-bottom       { @include _pad-bottom;
+  &.half          { @include _pad-bottom(0.5); }
   &%double        { @include _pad-bottom(2); }
   &%triple        { @include _pad-bottom(3); }
 }
 %pad-left         { @include _pad-left;
+  &.half          { @include _pad-left(0.5); }
   &%double        { @include _pad-left(2); }
   &%triple        { @include _pad-left(3); }
 }
 
 %gapped           { @include _gapped;
+  &.half          { @include _gapped(0.5); }
   &%double        { @include _gapped(2); }
   &%triple        { @include _gapped(3); }
 }
 %gap-top          { @include _gap-top;
+  &.half          { @include _gap-top(0.5); }
   &%double        { @include _gap-top(2); }
   &%triple        { @include _gap-top(3); }
 }                   
 %gap-right        { @include _gap-right;
+  &.half          { @include _gap-right(0.5); }
   &%double        { @include _gap-right(2); }
   &%triple        { @include _gap-right(3); }
 }                   
 %gap-bottom       { @include _gap-bottom;
+  &.half          { @include _gap-bottom(0.5); }
   &%double        { @include _gap-bottom(2); }
   &%triple        { @include _gap-bottom(3); }
 }                   
 %gap-left         { @include _gap-left;
+  &.half          { @include _gap-left(0.5); }
   &%double        { @include _gap-left(2); }
   &%triple        { @include _gap-left(3); }
 }
 
 %offset           { @include _offset;
+  &.half          { @include _offset(0.5); }
   &%double        { @include _offset(2); }
   &%triple        { @include _offset(3); }
 }
 %offset-top       { @include _offset-top;
+  &.half          { @include _offset-top(0.5); }
   &%double        { @include _offset-top(2); }
   &%triple        { @include _offset-top(3); }
 }
 %offset-right     { @include _offset-right;
+  &.half          { @include _offset-right(0.5); }
   &%double        { @include _offset-right(2); }
   &%triple        { @include _offset-right(3); }
 }
 %offset-bottom    { @include _offset-bottom;
+  &.half          { @include _offset-bottom(0.5); }
   &%double        { @include _offset-bottom(2); }
   &%triple        { @include _offset-bottom(3); }
 }
 %offset-left      { @include _offset-left;
+  &.half          { @include _offset-left(0.5); }
   &%double        { @include _offset-left(2); }
   &%triple        { @include _offset-left(3); }
 }
@@ -196,19 +234,23 @@
 %absolute-middle  { @include _absolute(middle); }
 %absolute-center  { @include _absolute(center); }
 
+%relative         { @include _relative; }
 %static           { @include _static; }
 
 %inline           { @include _inline; }
+%inline-block     { @include _inline-block; }
 %block            { @include _block; }
 %hidden           { @include _hidden; }
 
 %small            { @include _small; }
+%medium           { @include _medium; }
 %big, %large      { @include _large; }
 
 %zero             { @include _zero; }
 
 %pull-right       { @include _pull-right; }
 %pull-left        { @include _pull-left; }
+%pull-none        { @include _pull-none; }
 
 %bordered         { @include _bordered; }
 %border-top       { @include _border-top; }
@@ -220,7 +262,7 @@
 %align-right      { @include _align-right; }
 %align-bottom     { @include _align-bottom; } // must have height (experimental)
 %align-left       { @include _align-left; }
-%align-center     { @include _align-center; }   
+%align-center     { @include _align-center; }
 %justify          { @include _justify; }
 
 %truncate         { @include _truncate; }
@@ -230,27 +272,14 @@
 %square           { @include _square; }
 %round            { @include _round; }
 
-%disabled         { @include _disabled; }
-
 %rotate-90        { @include _rotate-90; }
-%rotate-180       { @include _rotate-180; }
-%rotate-270       { @include _rotate-270; }
 %rotate-90-ctr    { @include _rotate-90-ctr; }
+%rotate-180       { @include _rotate-180; }
 %rotate-180-ctr   { @include _rotate-180-ctr; }
+%rotate-270       { @include _rotate-270; }
 %rotate-270-ctr   { @include _rotate-270-ctr; }
-
-%spin             { @include _spin; }
-%spin-once        { @include _spin-once; }
-%spin-twice       { @include _spin-twice; }
-%spin-thrice      { @include _spin-thrice; }
-%spin-fast        { @include _spin-fast; }
-%spin-fast-once   { @include _spin-fast-once; }
-%spin-fast-twice  { @include _spin-fast-twice; }
-%spin-fast-thrice { @include _spin-fast-thrice; }
-%spin-slow        { @include _spin-slow; }
-%spin-slow-once   { @include _spin-slow-once; }
-%spin-slow-twice  { @include _spin-slow-twice; }
-%spin-slow-thrice { @include _spin-slow-thrice; }
+%rotate-360       { @include _rotate-360; }
+%rotate-360-ctr   { @include _rotate-360-ctr; }
 
 
 
@@ -284,6 +313,7 @@
     &.middle        { @extend %absolute-middle; }
     &.center        { @extend %absolute-center; }
   }
+  .relative         { @extend %relative; }
   .static           { @extend %static; }
 }
 @if $typography-classes {
@@ -311,11 +341,6 @@
     .#{nth($rotation-helpers, $i)} { @extend %#{nth($rotation-helpers, $i)}; }
   }
 }
-@if $spin-classes {
-  @for $i from 1 through length($spin-helpers) {
-    .#{nth($spin-helpers, $i)} { @extend %#{nth($spin-helpers, $i)}; }
-  }
-}
 @if $spacer-classes {
   @for $i from 1 through length($spacer-helpers) {
     .#{nth($spacer-helpers, $i)} {
@@ -328,3 +353,11 @@
     }
   }
 }
+@if $transition-classes {
+  .transition {
+    @include transition();
+  }
+  .no-transition {
+    transition: none !important;
+  }
+}

data/app/assets/stylesheets/groundworkcss/base/_reset.scss

@@ -3,7 +3,19 @@
 //          Last Updated:2013-6-25
 // =============================================
 
-
+$reset:           true !default;
+$reset-elements:  "html" "body"
+                  "div" "span" "header" "footer" "aside" "nav" "menu" "main" "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"
+                  "q" "quote" "blockquote" "cite"
+                  "time" "address"
+                  "code" "pre"
+                  "a" "img" "center" "hr"
+                  "form" "fieldset" "legend" "label" "input" "textarea" "button"
+                  "table" "caption" "tbody" "thead" "tfoot" "tr" "th" "td"
+                  "iframe" "object" "canvas" "audio" "video" "embed" !default;
 
 
 %everything {

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

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

data/app/assets/stylesheets/groundworkcss/core/_constants.scss

@@ -1,19 +1,9 @@
 // =============================================
 //            Constant Variables
-//          Last Updated:2013-4-24
+//          Last Updated:2013-8-24
 // =============================================
 
 
-
-///////////////////////
-//       colors      //
-///////////////////////
-
-$white:               #ffffff;
-$black:               #111111;
-
-
-
 ///////////////////////
 //     fractions     //
 ///////////////////////