groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/demo/groundworkdocs.scss

@@ -0,0 +1,102 @@
+.logo {
+  position: relative;
+  top: -0.5em;
+  a {
+    text-decoration: none;
+    color: #2B2B2D;
+    &:visited {
+      text-decoration: none;
+      color: #2B2B2D;
+    }
+  }
+  img {
+    height: 2em;
+    position: relative;
+    top: 0.55em;
+    margin-right: 0.3em;
+  }
+}
+
+.snippet-container {
+  margin-top: 10px;
+}
+
+.desktop-only, .hide-on-desktop, .ipad-only, .hide-on-ipad, .small-tablet-only, .hide-on-small-tablet, .mobile-only, .hide-on-mobile {
+  padding: 0.25em;
+  color: #fff;
+}
+
+.demo {
+  .row {
+    background: #f6f6f6 url("#{image-path('groundworkcss/diag6-black.png')}") center repeat;
+    div {
+      background: #eee;
+      border: 1px dashed #ddd;
+    }
+  }
+  .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+    text-align: center;
+    min-height: 1em;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background: #1abc9c;
+    border: 1px dashed white;
+    margin-top: -1px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
+    -moz-box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
+    box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
+    color: white;
+    font-size: 0.8em;
+  }
+  .row:not(.equalize) {
+    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .whole.small-tablet, .half.small-tablet, .halves.small-tablet, .third.small-tablet, .thirds.small-tablet, .fourth.small-tablet, .fourths.small-tablet, .fifth.small-tablet, .fifths.small-tablet, .sixth.small-tablet, .sixths.small-tablet, .seventh.small-tablet, .sevenths.small-tablet, .eighth.small-tablet, .eighths.small-tablet, .ninth.small-tablet, .ninths.small-tablet, .tenth.small-tablet, .tenths.small-tablet, .eleventh.small-tablet, .elevenths.small-tablet, .twelfth.small-tablet, .twelfths.small-tablet {
+    background: #3498db;
+  }
+  .whole.mobile, .half.mobile, .halves.mobile, .third.mobile, .thirds.mobile, .fourth.mobile, .fourths.mobile, .fifth.mobile, .fifths.mobile, .sixth.mobile, .sixths.mobile, .seventh.mobile, .sevenths.mobile, .eighth.mobile, .eighths.mobile, .ninth.mobile, .ninths.mobile, .tenth.mobile, .tenths.mobile, .eleventh.mobile, .elevenths.mobile, .twelfth.mobile, .twelfths.mobile {
+    background: #2ecc71;
+  }
+  &.reordering {
+    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+      background: #e74c3c;
+    }
+  }
+  &.centering {
+    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+      background: #f1c40f;
+    }
+  }
+  &.offsetting {
+    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+      background: #34495e;
+    }
+  }
+  &.equal-columns {
+    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
+      background: #3498db;
+    }
+  }
+  .two-up-ipad {
+    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
+      background: #f1c40f;
+    }
+  }
+  .two-up-small-tablet {
+    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
+      background: #e67e22;
+    }
+  }
+  .two-up-mobile {
+    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
+      background: #f02475;
+    }
+    &.three-up-small-tablet {
+      background: #9b59b6;
+    }
+  }
+}

data/app/assets/stylesheets/groundworkcss/demo/jquery.snippet.scss

@@ -0,0 +1,35 @@
+@import "jquery.snippet.groundwork";
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
+* html .snippet-wrap .snippet-hide {bottom:25px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1em;line-height:1.8em;overflow:auto;position:relative;}
+.snippet-wrap pre.snippet-textonly {padding:2em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
+* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
+.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:1.5em;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
+.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
+.snippet-wrap li.box-mid {border-width:0 1px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}

data/app/assets/stylesheets/groundworkcss/groundwork-ie.scss

@@ -1,9 +1,11 @@
-/*! ============================================
- *             Legacy IE Support
- *          Last Updated:2013-6-23
- * ===========================================*/
+// ============================================
+//             Legacy IE Support
+//          Last Updated:2013-8-16
+// ============================================
 
 
+$container-width: 1200px !default;
+
 @import "settings";
 @import "core/all-core";
 
@@ -11,117 +13,82 @@
 
 input {
   &[type=checkbox], &[type=radio] {
-    padding:0;
-    background:none;
-    border:none;
-    display:inline-block;
-    width:auto !important;
-    height:auto !important;
+    padding: 0;
+    background: none;
+    border: none;
+    display: inline-block;
+    width: auto !important;
+    height: auto !important;
     @include rounded(0);
   }
 }
 
 html {
   &.lt-ie9 {
-    min-width:$max-width !important;
+    min-width: $container-width !important;
     body {
-      width:auto !important;
+      width: auto !important;
     }
     .container {
-      width:auto !important;
+      width: auto !important;
     }
     // forms
     input, select, textarea {
       &:focus {
-        border-color:$button-active;
+        border-color: $button-active;
       }
     }
     // custom select box
     span.select {
       &:after {
-        display:none;
+        display: none;
       }
       select {
-        padding:0;
-        height:2.1em;
-        vertical-align:top;
+        padding: 0;
+        height: 2.1em;
+        vertical-align: top;
         &:focus {
-          border:1px solid $button-active;
+          border: 1px solid $button-active;
         }
       }
     }
-    // social icons
-    .social-icon {
-      filter:none;
-    }
-    // modals
-    div.modal {
-      .close, .fullscreen {
-        padding:6px 7px;
-        top:2px;
-        right:2px;
-      }
-      .fullscreen {
-        right:auto;
-        left:2px;
-      }
-    }
   }
   &.lt-ie8 {
     // font awesome for IE7
     @import "icons/font-awesome-ie7";
-    // navigation
-    nav {
-      &.inline {
-        > ul {
-          li {
-            display:block;
-            float:left;
-            white-space-collapse:preserve;
-            ul {
-              width:100%;
-              li {
-                float:none;
-                width:100%;
-              }
-            }
-          }
-        }
-      }
-    }
     // typography
     h1, h2, h3, h4, h5, h6 {
-      line-height:1.5;
+      line-height: 1.5;
     }
     ul, ul.list, 
     ol, ol.list {
-      margin-left:0;
-      padding-left:25px;
+      margin-left: 0;
+      padding-left: 25px;
     }
     ul {
       &.list {
-        list-style:disc;
+        list-style: disc;
       }
     }
     ol {
       &.list {
-        list-style:decimal;
+        list-style: decimal;
         li {
-          padding:0;
+          padding: 0;
         }
       }
     }
     // buttons
     ul, ol {
       &.button-list {
-        margin:0;
-        padding:0;
+        margin: 0;
+        padding: 0;
       }
     }
     button, .button, a.button {
       &.dropdown {
         ul {
-          top:2em;
+          top: 2em;
         }
       }
     }

data/app/assets/stylesheets/groundworkcss/groundwork.scss

@@ -1,22 +1,21 @@
-/*! ============================================
- *       GroundworkCSS by Gary Hepting
- *          Last Updated:2013-6-25
- * ===========================================*/
+// ============================================
+//       GroundworkCSS by Gary Hepting
+//          Last Updated:2013-8-16
+// ============================================
 
 
 // custom settings
 @import "settings";                   // customizable settings
 
 // core
-@import "core/all-core";              // constants, defaults, mixins
-@import "base/all-base";              // reset, globals, grid, helpers, animations
+@import "core/all-core";              // constants, defaults, mixins, breakpoints, color palette
+@import "base/all-base";              // reset, globals, grid, flexbox, helpers
 
 // components
+@import "icons/all-icons";            // font awesome icons
 @import "type/all-type";              // typography, web fonts
-@import "icons/all-icons";            // font awesome
-@import "nav/all-nav";                // buttons, navigation, tabs
-@import "ui/all-ui";                  // messages, callouts, tables, tooltips, popovers, modals
-@import "form/all-form";              // forms, tiles
+@import "ui/all-ui";                  // navigation, buttons, boxes, messages, tables, tabs, forms
+@import "anim/all-animations";        // animations
 
 // responsive adjustments
-@import "responsive/all-responsive";  // responsive navigation, tabs
+@import "responsive/all-responsive";  // responsive (helpers, desktop, ipad, small-tablet, mobile)

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

@@ -1,7 +1,10 @@
 // =============================================
-//                  Icons
-//          Last Updated:2013-6-25
+//                   Icons
+//          Last Updated:2013-8-16
 // =============================================
 
 
+
+
+// icons
 @import "font-awesome";

data/app/assets/stylesheets/groundworkcss/icons/font-awesome/_extras.scss

@@ -7,9 +7,6 @@
 // Animated rotating icon
 .icon-spin {
   display: inline-block;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
   animation: spin 2s infinite linear;
 }
 
@@ -20,22 +17,6 @@ a .icon-spin {
   text-decoration: none;
 }
 
-@-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); }
@@ -43,45 +24,25 @@ a .icon-spin {
 
 // Icon rotations and mirroring
 .icon-rotate-90:before {
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 }
 
 .icon-rotate-180:before {
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
   transform: rotate(180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 }
 
 .icon-rotate-270:before {
-  -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
   transform: rotate(270deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 
 .icon-flip-horizontal:before {
-  -webkit-transform: scale(-1, 1);
-  -moz-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  -o-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 
 .icon-flip-vertical:before {
-  -webkit-transform: scale(1, -1);
-  -moz-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 

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

@@ -1,9 +1,9 @@
 // =============================================
 //                Responsive
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$responsive: true !default;
 
 
 // responsive adjustments

data/app/assets/stylesheets/groundworkcss/responsive/_desktop.scss

@@ -1,21 +1,144 @@
 // =============================================
 //                  Desktop
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$responsive: true !default;
 
 
 @mixin desktop {
-  @media #{$desktop} {
-    // conditional helpers
-    .hide-on-desktop { display: none !important; }
-    // spacer overrides
-    .zero-desktop { @include helper_reset(); }
-    .no-padding-desktop, .no-pad-desktop { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
-    .no-margin-desktop, .no-gap-desktop { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
-    .no-border-desktop { border: 0; }
-    @content;
+  @if $responsive {
+    @media #{$desktop} {
+      // conditional helpers
+      .hide-on-desktop { display: none !important; }
+      // spacer overrides
+      .zero-desktop { @include helper_reset(); }
+      .no-padding-desktop, .no-pad-desktop { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
+      .no-margin-desktop, .no-gap-desktop { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
+      .no-border-desktop { border: 0; }
+      @if $spacer-classes {
+        .padded-desktop         { @include _padded;
+          &.double              { @include _padded(2); }
+          &.triple              { @include _padded(3); }
+        }
+        .pad-top-desktop        { @include _pad-top;
+          &.double              { @include _pad-top(2); }
+          &.triple              { @include _pad-top(3); }
+        }
+        .pad-right-desktop      { @include _pad-right;
+          &.double              { @include _pad-right(2); }
+          &.triple              { @include _pad-right(3); }
+        }
+        .pad-bottom-desktop     { @include _pad-bottom;
+          &.double              { @include _pad-bottom(2); }
+          &.triple              { @include _pad-bottom(3); }
+        }
+        .pad-left-desktop       { @include _pad-left;
+          &.double              { @include _pad-left(2); }
+          &.triple              { @include _pad-left(3); }
+        }
+        .gapped-desktop         { @include _gapped;
+          &.double              { @include _gapped(2); }
+          &.triple              { @include _gapped(3); }
+        }
+        .gap-top-desktop        { @include _gap-top;
+          &.double              { @include _gap-top(2); }
+          &.triple              { @include _gap-top(3); }
+        }
+        .gap-right-desktop      { @include _gap-right;
+          &.double              { @include _gap-right(2); }
+          &.triple              { @include _gap-right(3); }
+        }
+        .gap-bottom-desktop     { @include _gap-bottom;
+          &.double              { @include _gap-bottom(2); }
+          &.triple              { @include _gap-bottom(3); }
+        }
+        .gap-left-desktop       { @include _gap-left;
+          &.double              { @include _gap-left(2); }
+          &.triple              { @include _gap-left(3); }
+        }
+        .offset-desktop         { @include _offset;
+          &.double              { @include _offset(2); }
+          &.triple              { @include _offset(3); }
+        }
+        .offset-top-desktop     { @include _offset-top;
+          &.double              { @include _offset-top(2); }
+          &.triple              { @include _offset-top(3); }
+        }
+        .offset-right-desktop   { @include _offset-right;
+          &.double              { @include _offset-right(2); }
+          &.triple              { @include _offset-right(3); }
+        }
+        .offset-bottom-desktop  { @include _offset-bottom;
+          &.double              { @include _offset-bottom(2); }
+          &.triple              { @include _offset-bottom(3); }
+        }
+        .offset-left-desktop    { @include _offset-left;
+          &.double              { @include _offset-left(2); }
+          &.triple              { @include _offset-left(3); }
+        }
+      }
+      @if $positioning-classes {
+        .fixed-desktop           { @include _fixed; }
+        .fixed-top-desktop       { @include _fixed(top); }
+        .fixed-right-desktop     { @include _fixed(right); }
+        .fixed-bottom-desktop    { @include _fixed(bottom); }
+        .fixed-left-desktop      { @include _fixed(left); }
+        .fixed-middle-desktop    { @include _fixed(middle); }
+        .fixed-center-desktop    { @include _fixed(center); }
+        .absolute-desktop        { @include _absolute; }
+        .absolute-top-desktop    { @include _absolute(top); }
+        .absolute-right-desktop  { @include _absolute(right); }
+        .absolute-bottom-desktop { @include _absolute(bottom); }
+        .absolute-left-desktop   { @include _absolute(left); }
+        .absolute-middle-desktop { @include _absolute(middle); }
+        .absolute-center-desktop { @include _absolute(center); }
+        .static-desktop          { @include _static; }
+      }
+      @if $layout-classes {
+        .inline-desktop          { @include _inline; }
+        .block-desktop           { @include _block; }
+        .clear-desktop           { @include _clear; }
+        .center-desktop          { @include _center; }
+        .pull-right-desktop      { @include _pull-right; }
+        .pull-left-desktop       { @include _pull-left; }
+        .pull-none-desktop       { @include _pull-none; }
+      }
+      @if $border-classes {
+        .bordered-desktop        { @include _bordered; }
+        .border-top-desktop      { @include _border-top; }
+        .border-right-desktop    { @include _border-right; }
+        .border-bottom-desktop   { @include _border-bottom; }
+        .border-left-desktop     { @include _border-left; }
+      }
+      @if $typography-helpers {
+        .align-top-desktop       { @include _align-top; }
+        .align-right-desktop     { @include _align-right; }
+        .align-bottom-desktop    { @include _align-bottom; }
+        .align-left-desktop      { @include _align-left; }
+        .align-center-desktop    { @include _align-center; }
+        .justify-desktop         { @include _justify; }
+        .truncate-desktop        { @include _truncate; }
+      }
+      @if $rotation-classes {
+        .rotate-90-desktop       { @include _rotate-90; }
+        .rotate-90-ctr-desktop   { @include _rotate-90-ctr; }
+        .rotate-180-desktop      { @include _rotate-180; }
+        .rotate-180-ctr-desktop  { @include _rotate-180-ctr; }
+        .rotate-270-desktop      { @include _rotate-270; }
+        .rotate-270-ctr-desktop  { @include _rotate-270-ctr; }
+        .rotate-360-desktop      { @include _rotate-360; }
+        .rotate-360-ctr-desktop  { @include _rotate-360-ctr; }
+      }
+      @if $multi-column-classes {
+        @for $i from 1 through length($multi-column-names) {
+          .#{nth($multi-column-names, $i)}-desktop, .#{nth($multi-column-names, $i)}s-desktop {
+            @include _multi-column($i);
+          }
+        }
+      }
+      @content;
+    }
   }
 }
 
@@ -24,6 +147,8 @@
 //      desktop      //
 ///////////////////////
 
-@include desktop {
-  // do not remove -- required for desktop helpers
+@if $responsive {
+  @include desktop {
+    // do not remove -- required for desktop helpers
+  }
 }

data/app/assets/stylesheets/groundworkcss/responsive/_helpers-responsive.scss

@@ -1,16 +1,22 @@
-///////////////////////
-//    conditionals   //
-///////////////////////
+// =============================================
+//        Conditional Content Helpers
+//          Last Updated:2013-8-16
+// =============================================
 
-// desktop helpers
-.desktop-only { display: block; }
-.hide-on-desktop {}
-// ipad helpers
-.ipad-only { display: none !important; }
-.hide-on-ipad {}
-// small tablet helpers
-.small-tablet-only { display: none !important; }
-.hide-on-small-tablet {}
-// mobile helpers
-.mobile-only { display: none !important; }
-.hide-on-mobile {}
+$responsive: true !default;
+
+
+@if $responsive {
+  // desktop helpers
+  .desktop-only { display: block; }
+  .hide-on-desktop {}
+  // ipad helpers
+  .ipad-only { display: none !important; }
+  .hide-on-ipad {}
+  // small tablet helpers
+  .small-tablet-only { display: none !important; }
+  .hide-on-small-tablet {}
+  // mobile helpers
+  .mobile-only { display: none !important; }
+  .hide-on-mobile {}
+}