Optimize css output and starts to prepare for custom properties (#15)

* Optimize generated CSS, removing useless first mediaquery and redundant flex declaration * adds warning if all the breakpoints don`t have the same unit * prepares dist * changes $column-gutter / 2 in a calc expression (So you can use css custom properties 😉 * updates doc
Objectway · Nov 18, 2017 · eb13200 · eb13200
1 parent 69f0e85
commit eb13200
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 3,099 deletions.
diff --git a/README.md b/README.md
@@ -169,7 +169,8 @@ useful when we inspect the elements.
     .fooColumn {
       left: 8.33333%;
       right: 8.33333%;
-      padding: 0 0.9375rem;
+      padding-left: calc(1.875rem / 2);
+      padding-right: calc(1.875rem / 2);
       order: 0;
 
       content: "COLUMN: width : (xxsmall: 6, large: 6) | push : 1 | pull : 1 | order : 0 | global : true"; 
@@ -539,15 +540,17 @@ will generate:
 ```css
 .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
   position: relative;
   right: auto;
   position: relative;
   left: auto;
   right: 8.33333%;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   order: 0;
 }
 @media only screen and (min-width: 0em) {
@@ -580,7 +583,8 @@ will return:
 ```css
 .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
   width: 8.33333%;
@@ -601,7 +605,8 @@ will return:
 ```css
 .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
   width: 33.33333%;
@@ -623,7 +628,8 @@ will generate:
 ```css
 .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
 }
@@ -682,7 +688,8 @@ will compile in:
 ```css
  .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
   width: auto;
@@ -691,7 +698,8 @@ will compile in:
 
 .bar {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
   width: auto;
@@ -715,7 +723,8 @@ will compile in:
 <div id="gccollapseglobal"></div>
 ### `$collapse` and `$global`
 **$collapse** and **$global** are very simple. The first one if `false` will 
-generate the padding of our columns `padding: 0 0.9375rem;`, the second one 
+generate the padding of our columns `padding-left: calc(1.875rem / 2);`, the second one 
+generate the padding of our columns `padding-right: calc(1.875rem / 2);`, the second one 
 will generate this css:
 ```css
   box-sizing: border-box;
@@ -957,7 +966,8 @@ will generate this css:
 ```css
 .foo {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
 }
@@ -970,7 +980,8 @@ will generate this css:
 
 .bar {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column;
 }
@@ -1004,7 +1015,8 @@ will generate this css:
 ```css
 *.foo, *.bar {
   box-sizing: border-box;
-  padding: 0 0.9375rem;
+  padding-left: calc(1.875rem / 2);
+  padding-right: calc(1.875rem / 2);
   display: flex;
   flex-direction: column; 
 }

diff --git a/dist/helpers/_grid.scss b/dist/helpers/_grid.scss
@@ -14,7 +14,7 @@
   }
 
   @if $margin == 'margin-#{$grid-start}' {
-    @return calc(#{($dividend / $divisor * 100%)} + #{$column-gutter / 2});
+    @return calc(#{($dividend / $divisor * 100%)} + (#{$column-gutter} / 2));
   }
 
   @return $dividend / $divisor * 100%;
@@ -27,17 +27,20 @@
 // If the property is the width, it will add the relative flex properties to
 // the returned block.
 // -----------------------------------------------------------------------------
-@mixin grid-calc($property, $attr, $margin: false, $query: false) {
+@mixin grid-calc($property, $attr, $margin: false, $query: false, $loop: 0) {
 
   // Width property needs flex attributes
   @if $property == width {
-    @if $attr == auto {
-      flex: 1 1 0%;
+    $prev: if($loop > 1, nth(map-values($query), $loop - 1), null);
 
-    } @else {
-      flex: 0 0 auto;
-    }
+    @if type-of($prev) != type-of($attr){
+      @if $attr == auto {
+        flex: 1 1 0%;
 
+      } @else {
+        flex: 0 0 auto;
+      }
+    }
     @if $attr == 0 {
       $attr: auto;
     }
@@ -48,13 +51,8 @@
 
   // (N of X) syntax
   @if length($attr) == 3 and nth($attr, 2) == 'of' {
-    @if $query and $use-dry {
-      @error "You can't use n of N syntax with query parameter. Use mediaquery mixin instead!";
-
-    } @else {
-      @include responsive-gutter {
-        #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin);
-      }
+    @include responsive-gutter {
+      #{$property}: sg-dimension(nth($attr, 1), nth($attr, 3), $margin);
     }
 
   // Standard syntax
@@ -85,20 +83,22 @@
 
   } @else {
 
+    $counter: 0;
     @each $query, $value in $attr {
       $set: #{$query}#{$value}#{$eq-grid}-#{$margin};
+      $counter: $counter + 1;
 
       @if $inmedia != false{
-        @include dry-it('#{$property}-#{$set}') {
-          @include grid-calc($property, $value, $margin);
+        @include dry-it('#{$property}-#{$set}-#{$attr}-#{$counter}') {
+          @include grid-calc($property, $value, $margin, $attr, $counter);
         }
 
       } @else {
 
         @include media-query($query, $eq-grid: $eq-grid) {
 
-          @include dry-it('#{$property}-#{$set}-#{$margin}') {
-            @include grid-calc($property, $value, $margin);
+          @include dry-it('#{$property}-#{$set}-#{$margin}-#{$attr}-#{$counter}') {
+            @include grid-calc($property, $value, $margin, $attr, $counter);
           }
 
         }
@@ -123,9 +123,7 @@
   }
 
   @include dry-it('row#{$nested}') {
-    @if $sg-include-box-sizing {
-      box-sizing: border-box;
-    }
+    box-sizing: border-box;
 
     @if $grid-start != left and $use-flex {
       flex-direction: row-reverse;
@@ -134,8 +132,8 @@
     @if $nested {
       @if not $sg-collapse {
         @include responsive-gutter {
-          margin-left: (-$column-gutter / 2);
-          margin-right: (-$column-gutter / 2);
+          margin-left: calc(-#{$column-gutter} / 2);
+          margin-right: calc(-#{$column-gutter} / 2);
           width: calc(100% + #{$column-gutter});
         }
       } @else {
@@ -210,9 +208,7 @@
   // Global -------------
   @if $global {
     @include dry-it('colGlob') {
-      @if $sg-include-box-sizing {
-        box-sizing: border-box;
-      }
+      box-sizing: border-box;
 
       @if $use-table {
         display: table-cell;
@@ -249,8 +245,8 @@
     @if $global == true {
       @include dry-it('paddingGlob') {
         @include responsive-gutter {
-          padding-left: ($column-gutter / 2);
-          padding-right: ($column-gutter / 2);
+          padding-left: calc(#{$column-gutter} / 2);
+          padding-right: calc(#{$column-gutter} / 2);
         }
       }
     }
@@ -267,8 +263,8 @@
   @if $margin {
     @include dry-it('marginGlob') {
       @include responsive-gutter{
-        margin-left: ($column-gutter / 2);
-        margin-right: ($column-gutter / 2);
+        margin-left: calc(#{$column-gutter} / 2);
+        margin-right: calc(#{$column-gutter} / 2);
       }
     }
   }
@@ -285,20 +281,16 @@
 
   // Push -------------
   @if $push != null {
-    @include dry-it('colPush') {
-      position: relative;
-      #{$grid-end}: auto;
-    }
+    position: relative;
+    #{$grid-end}: auto;
 
     @include grid-space($grid-start, $push, $eq-grid);
   }
 
   // Pull -------------
   @if $pull != null {
-    @include dry-it('colPull') {
-      position: relative;
-      #{$grid-start}: auto;
-    }
+    position: relative;
+    #{$grid-start}: auto;
 
     @include grid-space($grid-end, $pull, $eq-grid);
   }

diff --git a/dist/helpers/_mediaquery.scss b/dist/helpers/_mediaquery.scss
@@ -22,6 +22,13 @@
 @if not variable-exists(min-unit) {
   $unit: unit(nth(map-values($breakpoints), 1));
 
+  @each $breakpoint in map-values($breakpoints) {
+    @if $unit != unit($breakpoint) {
+      @warn 'All breakpoints must have the same unit!';
+      $unit: unit($breakpoint);
+    }
+  }
+
   $min-unit: em-calc(1, $rem-base) !global;
 
   @if $unit == "rem" {
@@ -128,7 +135,11 @@ $query-end: nth($query-direction, 2);
         @content;
       }
     } @else {
-      @media #{$screen} and (#{$query-start}: #{$cur-bp}) {
+      @if index(map-keys($breakpoints), $query) != 1 {
+        @media #{$screen} and (#{$query-start}: #{$cur-bp}) {
+          @content;
+        }
+      } @else {
         @content;
       }
     }

diff --git a/dist/helpers/_static.scss b/dist/helpers/_static.scss
@@ -187,7 +187,7 @@ $type: if($use-classes, '.', '%');
 
     #{$type}#{$row-name},
     &#{grid-class-name(nested)} {
-      margin: 0 (-$column-gutter / 2);
+      margin: 0 calc(-#{$column-gutter} / 2);
       width: auto;
     }
 

diff --git a/dist/helpers/_variables.scss b/dist/helpers/_variables.scss
@@ -32,7 +32,6 @@ $grid-start: left !default;
 $grid-end: if($grid-start == left, right, left) !default;
 $sg-collapse: false !default;
 $sg-use-margin: false !default;
-$sg-include-box-sizing: true !default;
 
 // -----------------------------------------------------------------------------
 // Class-based output options