optimized grid and added XXL breakpoint

Author: UnderlineWords

src/Layout/Grid/Grid.scss

@@ -35,15 +35,27 @@
 			}
 		}
 	}
+	// Default Grid System
+	@for $id from 1 through variables('grid', 'columns', 'size') {
+		.#{class('grid', 'column')}-#{$id} {
+			grid-column: span #{$id};
+		}
+	}
+	// Breakpoints
 	@each $label, $breakpoint in $viewports {
 		@include breakpoints($breakpoint) {
 			@for $id from 1 through variables('grid', 'columns', 'size') {
-				.#{class('grid', 'column')}-#{$id},
 				.#{class('grid', 'column')}-#{$label}-#{$id} {
 					grid-column: span #{$id};
 				}
-				/// Offset
-				@if options('grid', 'features', 'offset') {
+			}
+		}
+	}
+	// Offset
+	@if options('grid', 'features', 'offset') {
+		@each $label, $breakpoint in $viewports {
+			@include breakpoints($breakpoint) {
+				@for $id from 1 through variables('grid', 'columns', 'size') {
 					@for $offset-id from 2 through variables('grid', 'columns', 'size') {
 						.#{class('grid', 'column')}-#{$label}-#{$id}.#{class('grid', 'offset')}-#{$label}-#{$offset-id} {
 							grid-column: #{$offset-id} / span #{$id};

src/Layout/Grid/variables.scss

@@ -11,5 +11,6 @@ $viewports: (
 	(class('grid', 'small'), variables('grid', 'breakpoints', 'small')),
 	(class('grid', 'medium'), variables('grid', 'breakpoints', 'medium')),
 	(class('grid', 'large'), variables('grid', 'breakpoints', 'large')),
-	(class('grid', 'extra-large'), variables('grid', 'breakpoints', 'extra-large'))
+	(class('grid', 'extra-large'), variables('grid', 'breakpoints', 'extra-large')),
+	(class('grid', 'extra-extra-large'), variables('grid', 'breakpoints', 'extra-extra-large'))
 );

src/classnames.scss

@@ -165,15 +165,17 @@ $classnames: (
 	/////////////////////////////////////////////////////////
 	/// Layout
 	'grid': (
-		'row'        : 'row',
-		'container'  : 'container',
-		'column'     : 'col',
-		'offset'     : 'offset',
-		'equal'      : 'equal',
-		'extra-small': 'xs',
-		'small'      : 'sm',
-		'medium'     : 'md',
-		'large'      : 'lg',
-		'extra-large': 'xl',
+		'row'        		: 'row',
+		'container'  		: 'container',
+		'column'     		: 'col',
+		'offset'     		: 'offset',
+		'equal'      		: 'equal',
+		//
+		'extra-small'		: 'xs',
+		'small'      		: 'sm',
+		'medium'     		: 'md',
+		'large'      		: 'lg',
+		'extra-large'		: 'xl',
+		'extra-extra-large'	: 'xxl'
 	),
 )

src/options.scss

@@ -27,11 +27,12 @@ $options: (
 				'margin' : 0 auto
 			),
 			'breakpoints': (
-				'extra-small': 0,
-				'small'      : 500px,
-				'medium'     : 768px,
-				'large'      : 992px,
-				'extra-large': 1260px
+				'extra-small'		: 0,
+				'small'      		: 500px,
+				'medium'     		: 768px,
+				'large'      		: 992px,
+				'extra-large'		: 1260px,
+				'extra-extra-large'	: 1400px
 			)
 		)
 	),