(Refactor) Fonts / SCSS: Add Typography Mixins / Global Functions / Variables / Structure

src/scss/_buttons.scss

@@ -3,10 +3,11 @@
 	border: 0px solid;
 	padding: 5px 15px;
 	margin-right: 10px;
+	margin-bottom: 10px;
     line-height: 30px;
     height: 40px;
 	display: inline-block;
-	font-weight: 300;
+	@include font-base();
 	background-color: $color-blue;
 	color: $color-white;
 	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13);
@@ -26,7 +27,6 @@
 	@extend .btn;
 	border-color: $color-white;
 	background-color: darken($color-white, 3);
-	margin-bottom: 10px;
 	color: lighten($color-black, 5) !important;
 	text-decoration: none;
 	&:hover {

src/scss/_header.scss

@@ -13,18 +13,13 @@
 	}
 
 	&__title {
+		@include font-title-xxlarge();
 		margin-bottom: 15px; /*optical*/
-		font-size: 80px;
-		line-height: 1.2;
-		font-weight: 200;
-		letter-spacing: -0.025em;
     	margin-left: -7px; /*optical*/
 	}
 
 	&__lead {
-		font-weight: 200;
+		@include font-lead();
-		font-size: 24px;
-		line-height: 1.25;
 	}
 
 	&__text {

src/scss/_typography.scss

@@ -1,68 +0,0 @@
-// @import "fonts/worksans/bold";
-// @import "fonts/worksans/medium";
-// @import "fonts/open-sans/regular";
-// @import "fonts/open-sans/italic";
-@import "fonts/montserrat/montserrat";
-
-$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
-$font-family-heading: $font-family-body;
-
-$font-size-base: 17px;
-$font-size-base-plus: 19px;
-$font-size-medium: 24px;
-$font-size-large: 30px;
-$font-size-xlarge: 40px;
-$font-size-xxlarge: 80px;
-
-$line-height-base: 1.5;
-$line-height-heading: 1.1;
-
-
-
-
-body {
-	font-family: $font-family-body;
-	font-size: ($font-size-base / 16px * 100%);
-	line-height: $line-height-base;
-	font-weight: 300;
-}
-
-a {
-	color: $color-blue;
-	text-decoration: none;
-	&:hover, &:focus {
-
-	}
-	&:active {
-
-	}
-	&:visited {
-		color: $color-blue;
-	}
-}
-
-h1, h2, h3 {
-	font-family: $font-family-heading;
-	line-height: $line-height-heading;
-	font-weight: 300;
-}
-
-h1 {
-	font-size: $font-size-xlarge;
-	font-weight: 300;
-}
-
-h2 {
-	font-size: $font-size-large;
-	color: $color-blue;
-}
-
-h3 {
-	font-size: $font-size-medium;
-	color: $color-black;
-}
-
-a {
-	text-decoration: none;
-	color: $color-blue;
-}

src/scss/fonts/montserrat/_extralight.scss

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Montserrat'; //extralight';
+    src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'),
+         url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+}

src/scss/fonts/montserrat/_light.scss

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Montserrat'; //light';
+    src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
+         url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}

src/scss/fonts/montserrat/_medium.scss

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Montserrat'; //medium';
+    src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'),
+         url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}

src/scss/fonts/montserrat/_montserrat.scss

@@ -1,32 +0,0 @@
-@font-face {
-    font-family: 'Montserrat'; //extralight';
-    src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Montserrat'; //light';
-    src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Montserrat'; //regular';
-    src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-
-}
-
-@font-face {
-    font-family: 'Montserrat'; //medium';
-    src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'),
-         url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}

src/scss/fonts/montserrat/_regular.scss

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Montserrat'; //regular';
+    src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
+         url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+
+}

src/scss/global/_directives.scss

@@ -1,6 +1,6 @@
-/*
+/**
-This is for time-saving base classes that get @extend -ed
+ * This is for time-saving base classes that get @extend -ed
-*/
+ */
 
 %clearfix {
 	&:after {

src/scss/global/_functions.scss

@@ -0,0 +1,20 @@
+/**
+ * Helper Functions
+ */
+
+@function pxToEm($px, $ref: $font-size-base) {
+	@return toEm(toPx($px) / toPx($ref));
+}
+@function pxToRem($px) {
+	@return toRem(toPx($px) / toPx($font-size-base));
+}
+
+@function toEm($val) {
+	@return ($val + 0em);
+}
+@function toRem($val) {
+	@return ($val + 0rem);
+}
+@function toPx($val) {
+	@return ($val + 0px);
+}

src/scss/global/_mixins.scss

@@ -0,0 +1,125 @@
+/**
+ * Hide visually
+ *
+ * See http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ * for discussion of different solutions
+ */
+
+@mixin visuallyhidden() {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+
+@mixin visuallyhiddenReset() {
+	clip: auto;
+	height: auto;
+	margin: 0;
+	overflow: visible;
+	position: static;
+	width: auto;
+}
+
+@mixin visuallyhiddenFocusable() {
+	@include visuallyhidden;
+
+	&:focus,
+	&:active {
+		@include visuallyhiddenReset;
+	}
+}
+
+
+/**
+ * Contain floats with clearfix
+ *
+ * http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+
+@mixin clearfix() {
+	*zoom: 1; // Only IE7 accepts css properties with an * at the start.
+
+	&:before,
+	&:after {
+		content: " ";
+		display: table;
+	}
+
+	&:after {
+		clear: both;
+	}
+}
+
+
+/**
+ * Lists with layout purpose
+ */
+
+@mixin resetList() {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+
+/**
+ * Replace text
+ */
+
+@mixin replaceText() {
+	display: block;
+	overflow: hidden;
+	text-indent: 100%;
+	white-space: nowrap;
+}
+
+
+/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include fontSmoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include fontSmoothingReset;
+ * }
+ */
+
+@mixin fontSmoothing() {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+@mixin fontSmoothingReset() {
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
+}
+
+
+/**
+ * Placeholder in input fields
+ */
+
+@mixin placeholder() {
+
+	&::-webkit-input-placeholder {
+		@content;
+	}
+	&:-moz-placeholder { // Firefox 18-
+		@content;
+	}
+	&::-moz-placeholder { // Firefox 19+
+		@content;
+	}
+	&:-ms-input-placeholder {
+		@content;
+	}
+}

src/scss/global/_typography.scss

@@ -0,0 +1,126 @@
+@import "../fonts/montserrat/extralight";
+@import "../fonts/montserrat/light";
+@import "../fonts/montserrat/regular";
+@import "../fonts/montserrat/medium";
+
+$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
+$font-family-heading: $font-family-body;
+
+$font-weight-xlight: 200;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+
+$font-size-base: $font-size-base; // This is stored in the _variables.scss because it is required earlier
+$font-size-base-plus: 19px;
+$font-size-medium: 24px;
+$font-size-large: 30px;
+$font-size-xlarge: 40px;
+$font-size-xxlarge: 80px;
+
+$line-height-base: 1.5;
+$line-height-heading: 1.2;
+
+
+@mixin _addColor($color: false) {
+	@if ($color == true) {
+	color: $color-black
+  } @else if ($color != false) {
+	color: $color
+  }
+}
+
+@mixin font-base() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-base);
+}
+@mixin font-lead() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-medium);
+}
+@mixin font-claim() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-medium);
+	letter-spacing: 0.017em;
+}
+@mixin font-title-small() {
+	font-weight: $font-weight-regular;
+	font-size: pxToRem($font-size-base-plus);
+	letter-spacing: 0.016em;
+}
+@mixin font-title-medium() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-medium);
+	letter-spacing: 0.016em;
+}
+@mixin font-title-large-subline() {
+	font-weight: $font-weight-xlight;
+	font-size: pxToRem($font-size-large);
+	line-height: $line-height-heading;
+	letter-spacing: 0;
+}
+@mixin font-title-large() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-large);
+	line-height: $line-height-heading;
+	letter-spacing: -0.007em;
+}
+@mixin font-title-xlarge-subline() {
+	font-weight: $font-weight-xlight;
+	font-size: pxToRem($font-size-xlarge);
+	line-height: $line-height-heading;
+	letter-spacing: -0.004em;
+}
+@mixin font-title-xlarge() {
+	font-weight: $font-weight-light;
+	font-size: pxToRem($font-size-xlarge);
+	line-height: $line-height-heading;
+	letter-spacing: -0.015em;
+}
+@mixin font-title-xxlarge() {
+	font-weight: $font-weight-xlight;
+	font-size: pxToRem($font-size-xxlarge);
+	line-height: $line-height-heading;
+	letter-spacing: -0.025em;
+}
+
+@mixin link-style($link: $color-blue-highlight, $visited: lighten($color-blue,25), $hover: lighten($color-blue-highlight,2), $active: lighten($color-blue-highlight,2)) {
+	color: $link;
+	text-decoration: none;
+	&:visited {
+		color: $visited;
+	}
+	&:hover {
+		color: $hover;
+	}
+	&:active {
+		color: $active;
+	}
+}
+
+html {
+	font-size: ($font-size-base / 16px * 100%);
+}
+body {
+	font-size: ($font-size-base / 16px * 100%);
+	font-family: $font-family-body;
+	line-height: $line-height-base;
+	font-weight: $font-weight-light;
+	@include fontSmoothing();
+}
+
+h1 {
+	@include font-title-xlarge();
+}
+
+h2 {
+	@include font-title-large();
+}
+
+h3 {
+	@include font-claim();
+}
+
+a {
+	@include link-style();
+}

src/scss/global/_variables.scss

@@ -2,5 +2,6 @@
  * Global Variables
  **/
 
+$font-size-base: 17px;
 $content-max-width: 1280px;
 $size-gutter: 20px;

src/scss/main.scss

@@ -1,12 +1,14 @@
 // stuff every page really needs
-@import "reset";
+@import "global/reset";
-@import "grid";
+@import "global/variables";
-@import "colors";
+@import "global/colors";
-@import "variables";
+@import "global/functions";
-@import "typography";
+@import "global/directives";
-@import "mediaqueries";
+@import "global/mixins";
+@import "global/mediaqueries";
+@import "global/typography";
 @import "layout";
-@import "directives";
+@import "grid";
 
 //stuff every page needss
 @import "nav";