Added italic utility and replaced responsive-mixin with sass-mq

Author: Luke Harrison

.gitignore

@@ -2,4 +2,5 @@
 /bower_components
 /test/test.main.css
 /test/test.main.css.map
-npm-debug.log
+npm-debug.log
+package-lock.json

01 - settings/_settings.breakpoints.scss

@@ -2,7 +2,7 @@
 // BREAKPOINTS
 //--------------------------------------------------------------------------------------------------------------------------------------
 
-$breakpoints: (
+$mq-breakpoints: (
 	"sm": 370px,
 	"sm2": 425px,
 	"sm3": 500px,

02 - tools/_tools.responsive-breakpoints.scss

@@ -51,8 +51,8 @@ to better visually balance a box.
 // Create responsive variants using settings.breakpoints
 // Changes padding when breakpoint is hit
 // Example: o-box--spacing-tiny@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bp(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq(#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-box--spacing-#{$sp-name}\@#{$bp-name} {
 				padding:rem($sp-value);
@@ -66,8 +66,8 @@ to better visually balance a box.
 
 // Changes padding until breakpoint is hit
 // Example: o-box--spacing-tiny@max-md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bpMax(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq($until: #{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-box--spacing-#{$sp-name}\@max-#{$bp-name} {
 				padding:rem($sp-value);
@@ -103,8 +103,8 @@ Generates fixed width and height variants using data from settings.spacing
 // Changes padding when breakpoint is hit
 // Example: o-box--width-tiny@md
 // Example: o-box--height-tiny@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bp(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq(#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-box--width-#{$sp-name}\@#{$bp-name} {
 				width:rem($sp-value);
@@ -119,8 +119,8 @@ Generates fixed width and height variants using data from settings.spacing
 // Changes padding until breakpoint is hit
 // Example: o-box--width-tiny@max-md
 // Example: o-box--height-tiny@max-md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bpMax(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq($until:#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-box--width-#{$sp-name}\@max-#{$bp-name} {
 				width:rem($sp-value);

05 - objects/_objects.box.scss

@@ -49,8 +49,8 @@ Modifiers to tweak the containers outer spacing.
 // Create responsive variants using settings.breakpoints
 // Changes outer spacing when breakpoint is hit
 // Example: o-container--spacing-small@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bp(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq(#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-container--spacing-#{$sp-name}\@#{$bp-name} {
 				padding-left:rem($sp-value);
@@ -63,8 +63,8 @@ Modifiers to tweak the containers outer spacing.
 // Create responsive variants using settings.breakpoints
 // Changes outer spacing until breakpoint is hit
 // Example: o-container--spacing-small@max-md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bpMax(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq($until: #{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
 			.o-container--spacing-#{$sp-name}\@max-#{$bp-name} {
 				padding-left:rem($sp-value);

05 - objects/_objects.container.scss

@@ -57,8 +57,8 @@ global-line-height variable defined in settings.typography.
 // Create responsive variants using settings.breakpoints
 // Changes amount of visible text once breakpoint is hit
 // Example: o-expander--partial-tiny@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bp(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq(#{$bp-name}) {
 		.o-expander--partial-tiny\@#{$bp-name} {
 			max-height:$global-line-height * 3em;
 		}
@@ -83,8 +83,8 @@ global-line-height variable defined in settings.typography.
 
 // Changes amount of visible text until breakpoint is hit
 // Example: o-expander--partial-tiny@max-md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bpMax(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq($until: #{$bp-name}) {
 		.o-expander--partial-tiny\@max-#{$bp-name} {
 			max-height:$global-line-height * 3em;
 		}
@@ -151,8 +151,8 @@ Disables the expander once a certain breakpoint has been hit.
 */
 
 // Example: o-expander--disable@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bp(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq(#{$bp-name}) {
 		.o-expander--disable\@#{$bp-name} {
 			max-height:none; 
 			overflow:visible;
@@ -165,8 +165,8 @@ Enables the expander once a certain breakpoint has been hit.
 */
 
 // Example: o-expander--enable@md
-@each $bp-name, $bp-value in $breakpoints {
-	@include bpMax(#{$bp-name}) {
+@each $bp-name, $bp-value in $mq-breakpoints {
+	@include mq($until: #{$bp-name}) {
 		.o-expander--enable\@#{$bp-name} {
 			max-height:none;
 			overflow:visible;