Remove dependency on scut and add since parameter to most sass constr…

…ucts
nice-digital · Jan 25, 2017 · b5ee1d9 · b5ee1d9
1 parent dc423ef
commit b5ee1d9
Show file tree

Hide file tree

Showing 28 changed files with 187 additions and 1,576 deletions.
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -36,6 +36,7 @@
 ///       </div>
 ///     </div>
 ///   </div>
+/// @since 0.1.0
 .tabs {
 
   // The list of tabs

diff --git a/src/stylesheets/components/_components-breadcrumbs.scss b/src/stylesheets/components/_components-breadcrumbs.scss
@@ -2,20 +2,22 @@
 /// @group components
 ////
 
-// See https://www.w3.org/WAI/WCAG20/Techniques/working-examples/G65/ex3.html
+/// breadcrumbs
+/// See https://www.w3.org/WAI/WCAG20/Techniques/working-examples/G65/ex3.html
+/// @since 0.1.0
 .breadcrumbs {
   @include font-size(0);
   list-style: none;
   margin: 0;
-  padding: scut-em(12 0);
+  padding: em(12 0);
 
   &__crumb {
     display: inline-block;
 
     &:before {
       @include nice-icon(angle-right);
       color: $colour-grey-1;
-      margin: scut-em(0 10);
+      margin: em(0 10);
     }
 
     &:first-child:before {

diff --git a/src/stylesheets/components/_components-buttons.scss b/src/stylesheets/components/_components-buttons.scss
@@ -2,6 +2,8 @@
 /// @group components
 ////
 
+/// Button
+/// @since 0.1.0
 .btn {
   @include remove-mz-focus-inner;
   @include font-size(0, 2.5);

diff --git a/src/stylesheets/components/_components-footer.scss b/src/stylesheets/components/_components-footer.scss
@@ -3,12 +3,13 @@
 ////
 
 /// Site footer
+/// @since 0.1.0
 .site-footer {
   @include font-size(-1);
   background: $colour-dark-grey;
   color: $colour-nice-white;
-  margin-top: scut-em(32px);
-  padding: scut-em(32px 0);
+  margin-top: em(32px);
+  padding: em(32px 0);
 
   @media print {
     display: none;
@@ -28,7 +29,7 @@
 
   &__logo {
     display: block;
-    margin: scut-em(0 0 32 0);
+    margin: em(0 0 32 0);
     text-decoration: none;
 
     .icon {
@@ -37,17 +38,17 @@
   }
 
   &__services {
-    margin: scut-em(0 0 32 0);
+    margin: em(0 0 32 0);
   }
 
   &__social {
     clear: both;
-    margin: scut-em(0 0 32 0);
+    margin: em(0 0 32 0);
   }
 
   &__nav {
     clear: both;
-    margin: scut-em(0 0 32 0);
+    margin: em(0 0 32 0);
   }
 
   &__copyright {
@@ -58,12 +59,12 @@
   @include mq($from: sm) {
     &__logo {
       float: left;
-      margin: scut-em(0 32 32 0);
+      margin: em(0 32 32 0);
     }
 
     &__services {
       float: left;
-      margin: scut-em(0 0 32 0);
+      margin: em(0 0 32 0);
     }
 
     &__social {
@@ -106,7 +107,7 @@
       @include font-size(-1, 1.3);
       color: $colour-grey-3;
       display: block;
-      padding: scut-em(8 0);
+      padding: em(8 0);
       text-decoration: none;
 
       &:hover {
@@ -121,7 +122,7 @@
     .icon {
       @include font-size(1);
       display: inline-block;
-      margin: scut-em(0 4 0 0);
+      margin: em(0 4 0 0);
       vertical-align: middle;
     }
   }
@@ -132,21 +133,21 @@
       border: 0;
       float: left;
       text-align: center;
-      width: scut-em(90px);
+      width: em(90px);
 
       &:first-child {
         border: 0;
       }
 
       a {
-        padding: scut-em(4px) 0 0;
+        padding: em(4px) 0 0;
       }
     }
 
     .icon {
       @include font-size(6);
       display: block;
-      margin: 0 auto scut-em(4px);
+      margin: 0 auto em(4px);
 
       // The following is needed for IE8 to go centrally aligned
       &:before {
@@ -164,7 +165,7 @@
     @include font-size(-1);
     display: inline-block;
     font-weight: normal;
-    margin: scut-em(0 8 0 0);
+    margin: em(0 8 0 0);
     padding: 0;
     vertical-align: top;
   }
@@ -186,7 +187,7 @@
 
   a {
     display: block;
-    padding: scut-em(0 4);
+    padding: em(0 4);
     text-decoration: none;
 
     &:focus,
@@ -205,7 +206,7 @@
   }
 
   a {
-    padding: scut-em(4 0);
+    padding: em(4 0);
     text-decoration: none;
   }
 
@@ -229,7 +230,7 @@
     }
 
     a {
-      padding: scut-em(0 8);
+      padding: em(0 8);
     }
   }
 }
diff --git a/src/stylesheets/components/_components-global.scss b/src/stylesheets/components/_components-global.scss
@@ -3,6 +3,7 @@
 ////
 
 /// Container
+/// @since 0.1.0
 %container {
   margin: auto;
   max-width: 1170px;
@@ -20,6 +21,7 @@
 ///     <div class="grid">
 ///     </div>
 ///   </div>
+/// @since 0.1.0
 .container {
   @extend %container;
 

diff --git a/src/stylesheets/components/_components-maintain-ratio.scss b/src/stylesheets/components/_components-maintain-ratio.scss
@@ -32,7 +32,7 @@
 ///       <div style="display: inline-block; height: 100%; vertical-align: middle;"></div>
 ///     </div>
 ///   </div>
-///
+/// @since 0.1.0
 .maintain-ratio {
   display: block;
   height: 0;

diff --git a/src/stylesheets/components/_components-panel.scss b/src/stylesheets/components/_components-panel.scss
@@ -4,6 +4,7 @@
 
 /// A panel is a container for visually separating content.
 /// Often used within a sidebar.
+/// @since 0.1.0
 .panel {
   background: $colour-panel;
   padding: 1em;

diff --git a/src/stylesheets/components/_components-phase.scss b/src/stylesheets/components/_components-phase.scss
@@ -11,6 +11,7 @@
 ///   - `__label` The label explaining
 ///
 /// @see .phase-tag
+/// @since 0.1.0
 .phase-banner {
   border-bottom: 1px solid $colour-border;
   display: table;
@@ -43,6 +44,7 @@
 /// @todo Do we also need a discover phase colour?
 ///
 /// @see .phase-banner
+/// @since 0.1.0
 .phase-tag {
   background-color: $colour-grey-1;
   color: $colour-nice-white;

diff --git a/src/stylesheets/components/_components-skiplinks.scss b/src/stylesheets/components/_components-skiplinks.scss
@@ -5,7 +5,7 @@
 .skip-links {
   &__link {
     left: -9999em;
-    margin: scut-em(0 0 0 16px);
+    margin: em(0 0 0 16px);
     position: absolute;
 
     &:focus {

diff --git a/src/stylesheets/experience.scss b/src/stylesheets/experience.scss
@@ -4,8 +4,7 @@
 @import 'vendor/normalize';
 
 // Vendor
-@import 'vendor/scut',
-'vendor/math',
+@import 'vendor/math',
 'vendor/is',
 'vendor/mq';
 

diff --git a/src/stylesheets/grid/_grid-helpers.scss b/src/stylesheets/grid/_grid-helpers.scss
@@ -36,6 +36,7 @@
 ///   <div class="test">
 ///     <div class="test__item">item</div>
 ///   </div>
+/// @since 0.1.0
 @mixin grid($reverse: false, $gutterless: false, $right: false, $center: false, $debug: false) {
   letter-spacing: -.31em;
   list-style: none;
@@ -67,29 +68,34 @@
 
 /// Reversed grids allow you to structure your source in the opposite order to how
 /// your rendered layout will appear
+/// @since 0.1.0
 @mixin grid-reverse {
   direction: rtl;
   text-align: left;
 }
 
 /// Gutterless grids have all the properties of regular grids, minus any spacing
 /// @see grid-item-gutterless
+/// @since 0.1.0
 @mixin grid-gutterless {
   margin-left: 0;
 }
 
 /// Align the entire grid to the right
+/// @since 0.1.0
 @mixin grid-right {
   text-align: right;
 }
 
 /// Centered grids align grid items centrally without needing to use push or pull classes
+/// @since 0.1.0
 @mixin grid-center {
   text-align: center;
 }
 
 /// Debug a grid by putting a highlight round it
 /// @see grid-item-debug
+/// @since 0.1.0
 @mixin grid-debug {
   outline: 4px dashed red;
 }
@@ -110,6 +116,7 @@
 ///     width: 100%;
 ///     @include grid-item($breakpoints: ( md: ( width: 50%, push: 25% ), lg: 20% ));
 ///   }
+/// @since 0.1.0
 @mixin grid-item($gutterless: false, $middle: false, $bottom: false, $debug: false, $breakpoints: null) {
   @include border-box;
   direction: ltr;
@@ -173,22 +180,26 @@
 }
 
 /// Gutterless grids have all the properties of regular grids, minus any spacing.
+/// @since 0.1.0
 @mixin grid-item-gutterless {
   padding-left: 0;
 }
 
 /// Align grid cell vertically to the middle
+/// @since 0.1.0
 @mixin grid-item-middle {
   vertical-align: middle;
 }
 
 /// Align grid cell vertically to the bottom
+/// @since 0.1.0
 @mixin grid-item-bottom {
   vertical-align: bottom;
 }
 
 /// Debug a grid item by putting a highlight round it
 /// @see grid-debug
+/// @since 0.1.0
 @mixin grid-item-debug {
   outline: 2px dashed blue;
 }
diff --git a/src/stylesheets/grid/_grid-settings.scss b/src/stylesheets/grid/_grid-settings.scss
@@ -2,5 +2,6 @@
 /// @group grid
 ////
 
-// The width of the spacing between grid items
-$nice-grid-gutter: scut-em(24px) !default;
+/// The width of the spacing between grid items
+/// @since 0.1.0
+$nice-grid-gutter: em(24px) !default;
diff --git a/src/stylesheets/helpers/_helpers-bem.scss b/src/stylesheets/helpers/_helpers-bem.scss
@@ -6,6 +6,7 @@
 /// @access public
 /// @param {String} $element - Element's name
 /// @link https://css-tricks.com/snippets/sass/bem-mixins/
+/// @since 0.1.0
 @mixin element($element) {
   &__#{$element} {
     @content;
@@ -16,20 +17,23 @@
 /// @access public
 /// @param {String} $modifier - Modifier's name
 /// @link https://css-tricks.com/snippets/sass/bem-mixins/
+/// @since 0.1.0
 @mixin modifier($modifier) {
   &--#{$modifier} {
     @content;
   }
 }
 
 /// @alias element
+/// @since 0.1.0
 @mixin e($element) {
   &__#{$element} {
     @content;
   }
 }
 
 /// @alias modifier
+/// @since 0.1.0
 @mixin m($modifier) {
   &--#{$modifier} {
     @content;

diff --git a/src/stylesheets/helpers/_helpers-glyphs.scss b/src/stylesheets/helpers/_helpers-glyphs.scss
@@ -17,6 +17,7 @@
 /// @prop {String} up-tee-arrow [021A5] Up tee (bar) arrow (↥)
 /// @prop {String} box-box [029C9] Double box (⧉)
 /// @prop {String} punc-space [02008] Punctuation space (small, width of a comma)
+/// @since 0.1.0
 $glyphs: (
   bullet: '2022',
   quotation-mark: '0022',
@@ -37,6 +38,7 @@ $glyphs: (
 /// @param {argList} $names The name(s) of the glyph(s) to get
 /// @returns {string} The character entity reference code(s) as a string, e.g. '\201C' or '\02008\029C9'
 /// @see $glyphs
+/// @since 0.1.0
 /// @example Single glyph
 ///   .rule {
 ///     content: get-glyph(greater-than);
@@ -62,6 +64,7 @@ $glyphs: (
 
 /// Output a BEM style glyph selector for each glyph in the map.
 /// E.g. .glyph.glyph--bullet { content: '\2022'; }
+/// @since 0.1.0
 .glyph {
   @each $key, $value in $glyphs {
     &--#{$key} {