Viewport: Add Breakpoints

Author: rohmulan

scss/atoms/typography/_typography.scss

@@ -12,10 +12,10 @@
 body {
 	font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans;
 
-	@media ( max-width: 800px ) {
+	@media ( max-width: $viewport-md-min ) {
 		font-size: 16px;
 	}
-	@media ( max-width: 500px ) {
+	@media ( max-width: $viewport-sm-min ) {
 		font-size: 14px;
 	}
 }

scss/variables/breakpoints.js

@@ -0,0 +1,32 @@
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		define( [ "./chassis" ], factory );
+	} else if ( typeof exports === "object" ) {
+		module.exports = factory( require( "./chassis" ) );
+	} else {
+		root.chassis = factory( root.chassis );
+	}
+}( this, function( chassis ) {
+
+chassis.breakpoints = {
+
+	"viewport-sm-min": {
+		name: "Viewport Breakpoint - Small Minimum Width",
+		value: "400px"
+	},
+	"viewport-md-min": {
+		name: "Viewport Breakpoint - Medium Minimum Width",
+		value: "768px"
+	},
+	"viewport-lg-min": {
+		name: "Viewport Breakpoint - Large Minimum Width",
+		value: "920px"
+	},
+	"viewport-xl-min": {
+		name: "Viewport - Extra Large Minimum Width",
+		value: "1200px"
+	}
+};
+
+return chassis;
+} ) );