From f148cca958850d46d052c2310ed4d4da560da64c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Hoch=C3=B6rtler?= <hochitom@me.com>
Date: Mon, 3 Feb 2014 20:07:20 +0100
Subject: [PATCH 1/3] added column parameter

---
 generic/_widths.scss | 103 +++++++++++++++++++++++--------------------
 1 file changed, 56 insertions(+), 47 deletions(-)

diff --git a/generic/_widths.scss b/generic/_widths.scss
index 27848e64..5b79b455 100644
--- a/generic/_widths.scss
+++ b/generic/_widths.scss
@@ -10,7 +10,7 @@
  * variations.
  */
 
-@mixin grid-setup($namespace: "") {
+@mixin grid-setup($namespace:"",cols:12) {
     /**
     * Whole
     */
@@ -26,77 +26,86 @@
     /**
     * Thirds
     */
-    .#{$namespace}one-third         { width:33.333%; }
-    .#{$namespace}two-thirds        { width:66.666%; }
-
+    if (cols <= 3) {
+        .#{$namespace}one-third         { width:33.333%; }
+        .#{$namespace}two-thirds        { width:66.666%; }
+    }
 
     /**
     * Quarters
     */
-    .#{$namespace}one-quarter       { width:25%; }
-    .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
-    .#{$namespace}three-quarters    { width:75%; }
+    if (cols <= 4) {
+        .#{$namespace}one-quarter       { width:25%; }
+        .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
+        .#{$namespace}three-quarters    { width:75%; }
+    }
 
 
     /**
     * Fifths
     */
-    .#{$namespace}one-fifth         { width:20%; }
-    .#{$namespace}two-fifths        { width:40%; }
-    .#{$namespace}three-fifths      { width:60%; }
-    .#{$namespace}four-fifths       { width:80%; }
-
+    if (cols <= 5) {
+        .#{$namespace}one-fifth         { width:20%; }
+        .#{$namespace}two-fifths        { width:40%; }
+        .#{$namespace}three-fifths      { width:60%; }
+        .#{$namespace}four-fifths       { width:80%; }
+    }
 
     /**
     * Sixths
     */
-    .#{$namespace}one-sixth         { width:16.666%; }
-    .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
-    .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
-    .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
-    .#{$namespace}five-sixths       { width:83.333%; }
-
+    if (cols <= 6) {
+        .#{$namespace}one-sixth         { width:16.666%; }
+        .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
+        .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
+        .#{$namespace}five-sixths       { width:83.333%; }
+    }
 
     /**
     * Eighths
     */
-    .#{$namespace}one-eighth        { width:12.5%; }
-    .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
-    .#{$namespace}three-eighths     { width:37.5%; }
-    .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
-    .#{$namespace}five-eighths      { width:62.5%; }
-    .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
-    .#{$namespace}seven-eighths     { width:87.5%; }
-
+    if (cols <= 8) {
+        .#{$namespace}one-eighth        { width:12.5%; }
+        .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
+        .#{$namespace}three-eighths     { width:37.5%; }
+        .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}five-eighths      { width:62.5%; }
+        .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
+        .#{$namespace}seven-eighths     { width:87.5%; }
+    }
 
     /**
     * Tenths
     */
-    .#{$namespace}one-tenth         { width:10%; }
-    .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
-    .#{$namespace}three-tenths      { width:30%; }
-    .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
-    .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
-    .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
-    .#{$namespace}seven-tenths      { width:70%; }
-    .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
-    .#{$namespace}nine-tenths       { width:90%; }
-
+    if (cols <= 10) {
+        .#{$namespace}one-tenth         { width:10%; }
+        .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
+        .#{$namespace}three-tenths      { width:30%; }
+        .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
+        .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
+        .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
+        .#{$namespace}seven-tenths      { width:70%; }
+        .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
+        .#{$namespace}nine-tenths       { width:90%; }
+    }
 
     /**
     * Twelfths
     */
-    .#{$namespace}one-twelfth       { width:8.333%; }
-    .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
-    .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
-    .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
-    .#{$namespace}five-twelfths     { width:41.666% }
-    .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
-    .#{$namespace}seven-twelfths    { width:58.333%; }
-    .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
-    .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
-    .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
-    .#{$namespace}eleven-twelfths   { width:91.666%; }
+    if (cols <= 12) {
+        .#{$namespace}one-twelfth       { width:8.333%; }
+        .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
+        .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
+        .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
+        .#{$namespace}five-twelfths     { width:41.666% }
+        .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}seven-twelfths    { width:58.333%; }
+        .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
+        .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
+        .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
+        .#{$namespace}eleven-twelfths   { width:91.666%; }
+    }
 }
 
 @include grid-setup();

From 6da3d0d78f2d4a9e02127b15c2326c9e2af9df21 Mon Sep 17 00:00:00 2001
From: hochitom <hochitom@icloud.com>
Date: Tue, 4 Feb 2014 07:49:02 +0100
Subject: [PATCH 2/3] fixed sass variables and if statements

---
 generic/_widths.scss | 120 ++++++++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 52 deletions(-)

diff --git a/generic/_widths.scss b/generic/_widths.scss
index 5b79b455..c6cd8118 100644
--- a/generic/_widths.scss
+++ b/generic/_widths.scss
@@ -10,7 +10,11 @@
  * variations.
  */
 
-@mixin grid-setup($namespace:"",cols:12) {
+@mixin grid-warning ($col) {
+    @warn "#{$col} column grid is not allowed. Use 3, 4, 5, 6, 8, 10, 12 instead.";
+}
+
+@mixin grid-setup($namespace:"",$cols:12) {
     /**
     * Whole
     */
@@ -26,7 +30,7 @@
     /**
     * Thirds
     */
-    if (cols <= 3) {
+    @if $cols >= 3 {
         .#{$namespace}one-third         { width:33.333%; }
         .#{$namespace}two-thirds        { width:66.666%; }
     }
@@ -34,9 +38,9 @@
     /**
     * Quarters
     */
-    if (cols <= 4) {
+    @if $cols >= 4 {
         .#{$namespace}one-quarter       { width:25%; }
-        .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
+        .#{$namespace}two-quarters      { @extend .#{$namespace}one-half !optional; }
         .#{$namespace}three-quarters    { width:75%; }
     }
 
@@ -44,7 +48,7 @@
     /**
     * Fifths
     */
-    if (cols <= 5) {
+    @if $cols >= 5 {
         .#{$namespace}one-fifth         { width:20%; }
         .#{$namespace}two-fifths        { width:40%; }
         .#{$namespace}three-fifths      { width:60%; }
@@ -54,56 +58,68 @@
     /**
     * Sixths
     */
-    if (cols <= 6) {
+    @if $cols >= 6 {
         .#{$namespace}one-sixth         { width:16.666%; }
-        .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
-        .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
-        .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
+        .#{$namespace}two-sixths        { @extend .#{$namespace}one-third !optional; }
+        .#{$namespace}three-sixths      { @extend .#{$namespace}one-half !optional; }
+        .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds !optional; }
         .#{$namespace}five-sixths       { width:83.333%; }
     }
 
+    @if $cols == 7 {
+        @include grid-warning(7);
+    }
+
     /**
     * Eighths
     */
-    if (cols <= 8) {
+    @if $cols >= 8 {
         .#{$namespace}one-eighth        { width:12.5%; }
-        .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
+        .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter !optional; }
         .#{$namespace}three-eighths     { width:37.5%; }
-        .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}four-eighths      { @extend .#{$namespace}one-half !optional; }
         .#{$namespace}five-eighths      { width:62.5%; }
-        .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
+        .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters !optional; }
         .#{$namespace}seven-eighths     { width:87.5%; }
     }
 
+    @if $cols == 9 {
+        @include grid-warning(9);
+    }
+
     /**
     * Tenths
     */
-    if (cols <= 10) {
+    @if $cols >= 10 {
         .#{$namespace}one-tenth         { width:10%; }
-        .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
+        .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth !optional; }
         .#{$namespace}three-tenths      { width:30%; }
-        .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
-        .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
-        .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
+        .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths !optional; }
+        .#{$namespace}five-tenths       { @extend .#{$namespace}one-half !optional; }
+        .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths !optional; }
         .#{$namespace}seven-tenths      { width:70%; }
-        .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
+        .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths !optional; }
         .#{$namespace}nine-tenths       { width:90%; }
     }
 
+    @if $cols == 11 {
+        @include grid-warning(11);
+    }
+
     /**
     * Twelfths
     */
-    if (cols <= 12) {
+    @if $cols > 12 {
         .#{$namespace}one-twelfth       { width:8.333%; }
-        .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
-        .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
-        .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
+        .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth !optional; }
+        .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter !optional; }
+        .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third !optional; }
         .#{$namespace}five-twelfths     { width:41.666% }
-        .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half !optional; }
         .#{$namespace}seven-twelfths    { width:58.333%; }
-        .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
-        .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
-        .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
+        .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds !optional; }
+        .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters !optional; }
+        .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths !optional; }
         .#{$namespace}eleven-twelfths   { width:91.666%; }
     }
 }
@@ -129,39 +145,39 @@
 
 @if $responsive == true{
 
-@include media-query(palm){
-    @include grid-setup("palm-");
-}
+    @include media-query(palm){
+        @include grid-setup("palm-");
+    }
 
-@include media-query(lap){
-    @include grid-setup("lap-");
-}
+    @include media-query(lap){
+        @include grid-setup("lap-");
+    }
 
-@include media-query(lap-and-up){
-    @include grid-setup("lap-and-up-");
-}
+    @include media-query(lap-and-up){
+        @include grid-setup("lap-and-up-");
+    }
 
-@include media-query(portable){
-    @include grid-setup("portable-");
-}
+    @include media-query(portable){
+        @include grid-setup("portable-");
+    }
 
-@include media-query(desk){
-    @include grid-setup("desk-");
-}
+    @include media-query(desk){
+        @include grid-setup("desk-");
+    }
 
 
-/**
- * If you have set the additional `$responsive-extra` variable to ‘true’ in
- * `_vars.scss` then you now have access to the following class available to
- * accomodate much larger screen resolutions.
- */
+    /**
+     * If you have set the additional `$responsive-extra` variable to ‘true’ in
+     * `_vars.scss` then you now have access to the following class available to
+     * accomodate much larger screen resolutions.
+     */
 
-@if $responsive-extra == true{
+    @if $responsive-extra == true{
 
-@include media-query(desk-wide){
-    @include grid-setup("desk-wide-");
-}
+        @include media-query(desk-wide){
+            @include grid-setup("desk-wide-");
+        }
 
-}
+    }
 
 } /* endif */

From 99be3b8df377897d83f4cecaa90657a6d7c0983a Mon Sep 17 00:00:00 2001
From: hochitom <hochitom@icloud.com>
Date: Tue, 4 Feb 2014 07:51:06 +0100
Subject: [PATCH 3/3] removed optional tags for extends

---
 generic/_widths.scss | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/generic/_widths.scss b/generic/_widths.scss
index c6cd8118..c89a9233 100644
--- a/generic/_widths.scss
+++ b/generic/_widths.scss
@@ -40,7 +40,7 @@
     */
     @if $cols >= 4 {
         .#{$namespace}one-quarter       { width:25%; }
-        .#{$namespace}two-quarters      { @extend .#{$namespace}one-half !optional; }
+        .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
         .#{$namespace}three-quarters    { width:75%; }
     }
 
@@ -60,9 +60,9 @@
     */
     @if $cols >= 6 {
         .#{$namespace}one-sixth         { width:16.666%; }
-        .#{$namespace}two-sixths        { @extend .#{$namespace}one-third !optional; }
-        .#{$namespace}three-sixths      { @extend .#{$namespace}one-half !optional; }
-        .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds !optional; }
+        .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
+        .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
+        .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
         .#{$namespace}five-sixths       { width:83.333%; }
     }
 
@@ -75,11 +75,11 @@
     */
     @if $cols >= 8 {
         .#{$namespace}one-eighth        { width:12.5%; }
-        .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter !optional; }
+        .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
         .#{$namespace}three-eighths     { width:37.5%; }
-        .#{$namespace}four-eighths      { @extend .#{$namespace}one-half !optional; }
+        .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
         .#{$namespace}five-eighths      { width:62.5%; }
-        .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters !optional; }
+        .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
         .#{$namespace}seven-eighths     { width:87.5%; }
     }
 
@@ -92,13 +92,13 @@
     */
     @if $cols >= 10 {
         .#{$namespace}one-tenth         { width:10%; }
-        .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth !optional; }
+        .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
         .#{$namespace}three-tenths      { width:30%; }
-        .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths !optional; }
-        .#{$namespace}five-tenths       { @extend .#{$namespace}one-half !optional; }
-        .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths !optional; }
+        .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
+        .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
+        .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
         .#{$namespace}seven-tenths      { width:70%; }
-        .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths !optional; }
+        .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
         .#{$namespace}nine-tenths       { width:90%; }
     }
 
@@ -111,15 +111,15 @@
     */
     @if $cols > 12 {
         .#{$namespace}one-twelfth       { width:8.333%; }
-        .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth !optional; }
-        .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter !optional; }
-        .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third !optional; }
+        .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
+        .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
+        .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
         .#{$namespace}five-twelfths     { width:41.666% }
-        .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half !optional; }
+        .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
         .#{$namespace}seven-twelfths    { width:58.333%; }
-        .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds !optional; }
-        .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters !optional; }
-        .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths !optional; }
+        .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
+        .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
+        .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
         .#{$namespace}eleven-twelfths   { width:91.666%; }
     }
 }