Cleanign up Stylesheet

- Removed non need mixins such as animation and keyframes, autoprefix will do this for us.
- Styled up base theme better for basic styling
- Added more helper classes
- Added more mixins

assets/scss/abstracts/_helpers.scss

@@ -2,6 +2,37 @@
 // :Helpers
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+// Responsive Classes
+// ------------------
+
+// Show only function to generate hidden classes
+@each $show-only in $breakpoint-classes {
+  ._show-only--#{$show-only} {
+    display: none;
+  }
+}
+
+._show-only--small {
+  @include breakpoint(small only) {
+    display: block;
+  }
+}
+
+._show-only--medium {
+  @include breakpoint(medium only) {
+    display: block;
+  }
+}
+
+._show-only--large {
+  @include breakpoint(large only) {
+    display: block;
+  }
+}
+
+
+// Accessability
+// ------------------
 ._sr-hidden {
   @include element-invisible;
 }
@@ -30,6 +61,10 @@
   color: $palette-secondary;
 }
 
+._text-color-tertiary {
+  color: $palette-tertiary;
+}
+
 // Text Helpers
 // ------------------
 ._text-caps {
@@ -47,3 +82,11 @@
 ._text-r {
   text-align: right;
 }
+
+._text-caps {
+  text-transform: uppercase;
+}
+
+._unstyled-list {
+  @include unstyled-list;
+}

assets/scss/abstracts/_mixins.scss

@@ -1,10 +1,28 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
-// Mixins Baby!
-// @link http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
+// Mixins
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+// Visually Shown
+// Will show the visually hidden element
+// ------------------
+@mixin visually-show($z-index) {
+	opacity: 1;
+	visibility: visible;
+	z-index: $z-index;
+}
+
+// Visually Hidden
+// Visually Hidden so that it can have transisitions applyed to it.
+// ------------------
+@mixin visually-hidden($z-index) {
+	opacity: 0;
+	visibility: hidden;
+	z-index: $z-index;
+}
+
 // Unstyled list
 // Removes all basic list styling
+// ------------------
 @mixin unstyled-list {
   list-style: none;
   margin: 0;
@@ -13,6 +31,7 @@
 
 // Background Image
 // Includes a number of repeatable background-image items
+// ------------------
 @mixin background-img {
   background-size: cover;
   background-repeat: no-repeat;
@@ -21,6 +40,7 @@
 
 // Placeholder Mixin
 // because no one wants to put placeholder in as non prefixed yet
+// ------------------
 @mixin placeholder {
   &::-webkit-input-placeholder {
     @content;
@@ -39,46 +59,11 @@
   }
 }
 
-// opacity mixin
-// This mixin ensures cross browser opacity all the way down to Internet Explorer 5. Though if you have to optomize for IE5, you have a lot bigger problems than opacity, godspeed my friend.
-@mixin opacity($opacity) {
-	opacity: $opacity;
-	filter: alpha(opacity=$opacity*100);
-	-khtml-opacity: $opacity;
-}
-
-// keyframes
-// for all those annoying prefixes
-@mixin keyframes($animation-name) {
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @-moz-keyframes #{$animation-name} {
-    @content;
-  }
-  @-ms-keyframes #{$animation-name} {
-    @content;
-  }
-  @-o-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
-@mixin animation($str) {
-	-webkit-animation: #{$str};
-	-moz-animation: #{$str};
-	-ms-animation: #{$str};
-	-o-animation: #{$str};
-	animation: #{$str};
-}
-
-/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
-/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
-/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
-/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
+// Clearfix
+// The clearfix is augmented with specific styles to prevent borders in flexbox environments
+// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
+// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
+// ------------------
 @mixin clearfix {
 	&::after,
 	&::before {
@@ -93,29 +78,16 @@
 	}
 }
 
-/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
-/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
-///
-/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
-/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
-@mixin auto-width($max, $elem: li) {
-	 @for $i from 2 through $max{
-		&:nth-last-child(#{$i}):first-child,
-		&:nth-last-child(#{$i}):first-child ~ #{$elem} {
-			width: percentage(1 / $i);
-		}
-	}
-}
-
 /// Removes the focus ring around an element when a mouse input is detected.
+// ------------------
 @mixin disable-mouse-outline {
 	[data-whatinput='mouse'] & {
 		outline: 0;
 	}
 }
 
-/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
-/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
+// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
+// ------------------
 @mixin element-invisible {
 	position: absolute !important;
 	width: 1px;
@@ -125,34 +97,38 @@
   white-space: nowrap;
 }
 
-/// Reverses the CSS output created by the `element-invisible()` mixin.
+// Reverses the CSS output created by the `element-invisible()` mixin.
+// ------------------
 @mixin element-invisible-off {
 	position: static !important;
 	height: auto;
 	width: auto;
 	overflow: visible;
 	clip: auto;
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
-/// Vertically centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// Vertically centers the element inside of its first non-static parent,
+// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// ------------------
 @mixin vertical-center {
 	position: absolute;
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-/// Horizontally centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// Horizontally centers the element inside of its first non-static parent,
+// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// ------------------
 @mixin horizontal-center {
 	position: absolute;
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-/// Absolutely centers the element inside of its first non-static parent,
-/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// Absolutely centers the element inside of its first non-static parent,
+// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+// ------------------
 @mixin absolute-center {
 	position: absolute;
 	top: 50%;
@@ -161,9 +137,8 @@
 	-webkit-transform: translate(-50%, -50%); // for some reason, this does not seem to be outputted out by autoprefixer.
 }
 
-/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
-///
-/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
+// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
+// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
 @mixin -zf-each-breakpoint($small: true) {
 	$map: $breakpoint-classes;
 	@if not $small {

assets/scss/abstracts/_variables.scss

@@ -3,29 +3,33 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // Color Variables
-// - - - - -
+// ------------------
 
 // Local Colors
 $white: #fff;
 $light-grey: #edebec;
 $dark-grey: #202021;
 $black: #000000;
+$ebony-clay: #242a39;
 $red: #b74a48;
 $green: #26b27b;
 
 // Global Colors
-$palette-primary: $black;
+$palette-primary: $ebony-clay;
+$palette-primary--lighter: lighten($palette-primary, 50);
 $palette-secondary: $light-grey;
 $palette-tertiary: $white;
 
 $palette-warning: $red;
 $palette-success: $green;
 
 $palette-heading: $dark-grey;
-$palette-paragraph: lighten($dark-grey, 2);
+$palette-paragraph: lighten($palette-primary, 4);
+
+$box-shadow: 0 9px 45px 0 rgba($palette-primary, 0.20);
 
 // Typography
-// - - - - -
+// ------------------
 
 // Font Sizes
 $font-size-heading-one: rem-calc(32);
@@ -36,28 +40,25 @@ $font-size-heading-five: rem-calc(18);
 
 $font-size-primary: rem-calc(18);
 
-
 // Font Famlily
 $font-family-normal: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 
 // Line Heights
-
 $line-height-base: 2;
 $line-height-headings: 1.2;
 
 // Spacing
-// - - - - -
+// ------------------
 $spacing-primary: rem-calc(30);
 $spacing-secondary: rem-calc(15);
 $spacing-tertiary: rem-calc(5);
 
-
 // Z Index index
-// - - - - -
+// ------------------
 $z-stack: site, skipToContent, mobileMenu, siteOverlay, modal;
 
 // Layout & Grid
-// - - - - -
+// ------------------
 $global-width: 1165px;
 $global-left: left;
 $global-right: right;

assets/scss/base/_base.scss

@@ -20,6 +20,8 @@ body {
   -webkit-tap-highlight-color: transparent;
   line-height: $line-height-base;
   font-family: $font-family-normal;
+  background-color: $palette-secondary;
+  color: $palette-paragraph;
 }
 
 .site {

assets/scss/base/_reset.scss

@@ -174,7 +174,7 @@ dfn {
  */
 
 mark {
-  background-color: #ff0;
+  background-color: transparent;
   color: #000;
 }
 
@@ -324,9 +324,9 @@ button:-moz-focusring,
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  border: none;
+  margin: 0;
+  padding: 0;
 }
 
 /**

assets/scss/base/_typography.scss

@@ -53,8 +53,11 @@ button {
   cursor: pointer;
 }
 
-
 // Lists
 ul {
   margin: 0;
 }
+
+a {
+  color: $palette-primary;
+}

assets/scss/modules/_buttons.scss

@@ -13,9 +13,9 @@
 .btn-primary {
   background-color: $palette-primary;
   color: $palette-secondary;
-  padding: $spacing-tertiary;
+  padding: $spacing-secondary;
 
   &:hover {
-    background-color: lighten($palette-primary, 20);
+    background-color: $palette-primary--lighter;
   }
 }