#22: Improve variables

README.md

@@ -16,3 +16,4 @@ Illusion is an opinionated, mobile-first, progressive enhanced, accessible, SCSS
 - [Custom Management](https://www.custommanagement.nl)
 - [Brouwer Tours](https://www.brouwertours.nl)
 - [Anton Goudsmit](http://antongoudsmit.nl)
+- [GGNet](http://ggnet.test/)

scss/atoms/_body.scss

@@ -7,10 +7,10 @@
 
   body {
     margin: $illusion-extendalize-body-margin;
-    font-family: $font-family;
-    font-size: $font-size;
-    line-height: $line-height;
-    font-weight: $weight-normal;
-    color: $color-type;
+    font-family: $illusion-extendalize-body-font-family;
+    font-size: $illusion-extendalize-body-font-size;
+    line-height: $illusion-extendalize-body-line-height;
+    font-weight: $illusion-extendalize-body-font-weight;
+    color: $illusion-extendalize-body-color;
   }
 }

scss/atoms/_boxsizing.scss

@@ -4,7 +4,7 @@
    */
 
   html {
-    box-sizing: border-box;
+    box-sizing: $illusion-extendalize-html-box-sizing;
   }
 
   *, *:before, *:after {

scss/tools/_tools.scss

@@ -5,13 +5,25 @@
 @import "variables/type";
 
 @import "variables/body-fallback";
+@import "variables/button";
+@import "variables/clearfix";
+@import "variables/collapse";
 @import "variables/color";
+@import "variables/content-block";
+@import "variables/coverall";
 @import "variables/extendalize";
 @import "variables/flexbox";
 @import "variables/form";
+@import "variables/gallery";
 @import "variables/grid";
+@import "variables/pseudo";
+@import "variables/ratio-block";
+@import "variables/reset";
+@import "variables/shift";
+@import "variables/span";
 @import "variables/svg";
 @import "variables/transition";
+@import "variables/triangle";
 
 
 // Functions

scss/tools/mixins/_breakpoint.scss

@@ -1,7 +1,7 @@
 // Breakpoint
 // Sets a temporary global $inside-breakpoint variable to be used inside other mixins
 
-@mixin breakpoint($width, $width--max: false) {
+@mixin breakpoint($width, $width--max: $illusion-breakpoint-width-max) {
   $inside-breakpoint: $width !global;
   @if $width--max == false {
     @media screen and (min-width: $width) {

scss/tools/mixins/_button.scss

@@ -7,7 +7,7 @@
 // 3. Line buttons vertically
 // 4. Appear clickable
 
-@mixin button-structure($appearance: none, $display: inline-block, $vertical-align: middle, $cursor: pointer) {
+@mixin button-structure($appearance: $illusion-button-appearance, $display: $illusion-button-display, $vertical-align: $illusion-button-vertical-align, $cursor: $illusion-button-cursor) {
   @if $appearance != false {
     -webkit-appearance: $appearance; // 1
   }

scss/tools/mixins/_clearfix.scss

@@ -2,7 +2,7 @@
 // Also clearing top-margin
 // Still using single colon for better browser compatibility
 
-@mixin clearfix($reset: false) {
+@mixin clearfix($reset: $illusion-clearfix-reset) {
   @if $reset == false {
     &:before,
     &:after {

scss/tools/mixins/_collapse.scss

@@ -3,7 +3,7 @@
 // Use as direct child of `@include span` element
 // Make sure there's no padding on the parent element
 
-@mixin collapse($sides: both, $multiplier: 1, $fromto: false, $gutter: false) {
+@mixin collapse($sides: $illusion-collapse-sides, $multiplier: $illusion-collapse-multiplier, $fromto: $illusion-collapse-fromto, $gutter: $illusion-collapse-gutter) {
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {

scss/tools/mixins/_container.scss

@@ -1,6 +1,6 @@
 // Container
 
-@mixin container($type: $illusion-grid-container-type, $align: center) {
+@mixin container($type: $illusion-grid-container-type, $align: $illusion-grid-container-align) {
 
   // Set default styling
   max-width: $illusion-grid-maxwidth + (largestGutter() * 2);

scss/tools/mixins/_content-block.scss

@@ -1,6 +1,6 @@
 // Content block
 
-@mixin content-block($spacing: $line-height, $location: bottom ) {
+@mixin content-block($spacing: $illusion-content-block-spacing, $location: $illusion-content-block-location ) {
   @if $location == top {
     margin-top: $spacing;
 

scss/tools/mixins/_coverall.scss

@@ -1,6 +1,6 @@
 // Cover the entire parent element
 
-@mixin coverall($offset: 0, $top: true, $right: true, $bottom: true, $left: true, $position: absolute, $reset: false) {
+@mixin coverall($offset: $illusion-coverall-offset, $top: $illusion-coverall-top, $right: $illusion-coverall-right, $bottom: $illusion-coverall-bottom, $left: $illusion-coverall-left, $position: $illusion-coverall-position, $reset: $illusion-coverall-reset) {
   @if $position != false {
     position: $position;
   }
@@ -25,10 +25,10 @@
     left: $left;
   }
   @if $reset == true {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    position: $illusion-coverall-reset-position;
+    top: $illusion-coverall-reset-top;
+    right: $illusion-coverall-reset-right;
+    bottom: $illusion-coverall-reset-bottom;
+    left: $illusion-coverall-reset-left;
   }
 }

scss/tools/mixins/_flexbox.scss

@@ -8,8 +8,8 @@
 // Because we're adding .flexbox and .flexboxlegacy classes flexbox will only work when JS is enabled
 // This is a good thing since we're not sure what we're showing / hiding with JS that might mess with flexbox
 
-@mixin flexbox($horizontal: $flexbox-horizontal, $vertical: $flexbox-vertical) {
-  @if $flexbox == true { // 1
+@mixin flexbox($horizontal: $illusion-flexbox-horizontal, $vertical: $illusion-flexbox-vertical) {
+  @if $illusion-flexbox == true { // 1
     @at-root { // 2
       .flexbox &, // 3
       .flexboxlegacy & { // 3

scss/tools/mixins/_fluid-type.scss

@@ -1,6 +1,6 @@
 // Fluid type
 
-@mixin fluid-type($min-value: $fluid-type-min-value, $max-value: $fluid-type-max-value, $min-screen: $fluid-type-min-screen, $max-screen: $fluid-type-max-screen) {
+@mixin fluid-type($min-value: $illusion-fluid-type-min-value, $max-value: $illusion-fluid-type-max-value, $min-screen: $illusion-fluid-type-min-screen, $max-screen: $illusion-fluid-type-max-screen) {
   font-size: $min-value;
 
   @media screen and (min-width: $min-screen) {

scss/tools/mixins/_gallery.scss

@@ -1,6 +1,6 @@
 // Gallery mixin
 
-@mixin gallery($span: null, $fromto: false, $multiplier: 1, $bottom: true, $defaults: true, $gutter: false) {
+@mixin gallery($span: $illusion-gallery-span, $fromto: $illusion-gallery-fromto, $multiplier: $illusion-gallery-multiplier, $bottom: $illusion-gallery-bottom, $defaults: $illusion-gallery-defaults, $gutter: $illusion-gallery-gutter) {
 
   // Span values
   $spanColumns: nth($span, 1);

scss/tools/mixins/_pseudo.scss

@@ -1,11 +1,11 @@
 // Pseudo elements
 
-@mixin pseudo($pseudo: after, $parent-position: relative, $position: absolute, $content: " ", $display: block) {
+@mixin pseudo($illusion-pseudo: $illusion-pseudo, $parent-position: $illusion-pseudo-parent-position, $position: $illusion-pseudo-position, $content: $illusion-pseudo-content, $display: $illusion-pseudo-display) {
   @if $parent-position != false {
     position: $parent-position;
   }
 
-  &:#{$pseudo} {
+  &:#{$illusion-pseudo} {
     @if $position != false {
       position: $position;
     }

scss/tools/mixins/_ratio-block.scss

@@ -1,6 +1,6 @@
 // Aspect ratio blocks
 
-@mixin ratio-block($ratio: 16 by 9, $overflow: hidden) {
+@mixin ratio-block($ratio: $illusion-ratio-block, $overflow: $illusion-ratio-block-overflow, $after: $illusion-ratio-block-after) {
 
   // Variables
   $width: nth($ratio, 1);
@@ -12,15 +12,17 @@
   }
 
   &:before {
-    display: block;
-    float: left;
-    content: " ";
+    display: $illusion-ratio-block-before-display;
+    float: $illusion-ratio-block-before-float;
+    content: $illusion-ratio-block-before-content;
     padding-top: $percent;
   }
 
-  &:after {
-    content: " ";
-    clear: left;
-    display: table;
+  @if $after != false {
+    &:after {
+      content: $illusion-ratio-block-after-content;
+      clear: $illusion-ratio-block-after-clear;
+      display: $illusion-ratio-block-after-display;
+    }
   }
 }

scss/tools/mixins/_reset.scss

@@ -1,6 +1,6 @@
 // Reset elements
 
-@mixin reset($margin: 0, $padding: 0, $list-style: none, $border: none, $background: transparent) {
+@mixin reset($margin: $illusion-reset-margin, $padding: $illusion-reset-padding, $list-style: $illusion-reset-list-style, $border: $illusion-reset-border, $background: $illusion-reset-background) {
   @if $margin != false {
     margin: $margin;
   }

scss/tools/mixins/_row.scss

@@ -1,6 +1,6 @@
 // Row
 
-@mixin row($type: $illusion-grid-container-type) {
+@mixin row($type: $illusion-grid-row-type) {
 
   // Floats
   @if $type != flex {

scss/tools/mixins/_shift.scss

@@ -1,6 +1,6 @@
 // Shift
 
-@mixin shift($shift: null, $fromto: false, $multiplier: 1, $defaults: true, $gutter: false) {
+@mixin shift($shift: $illusion-shift, $fromto: $illusion-shift-fromto, $multiplier: $illusion-shift-multiplier, $defaults: $illusion-shift-defaults, $gutter: $illusion-shift-gutter) {
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {

scss/tools/mixins/_spacing.scss

@@ -2,7 +2,7 @@
 //
 // Responsive spacing that follows the grid breakpoints
 
-@mixin spacing($sides: all, $type: padding, $multiplier: 1, $fromto: false, $lastchildnone: false, $minus: 0) {
+@mixin spacing($sides: $illusion-spacing-sides, $type: $illusion-spacing-type, $multiplier: $illusion-spacing-multiplier, $fromto: $illusion-spacing-fromto, $lastchildnone: $illusion-spacing-lastchildnone, $minus: $illusion-spacing-minus) {
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {

scss/tools/mixins/_span.scss

@@ -1,6 +1,6 @@
 // Span mixin
 
-@mixin span($span: null, $fromto: false, $multiplier: 1, $bottom: false, $defaults: true, $omega: null, $gutter: false) {
+@mixin span($span: $illusion-span-span, $fromto: $illusion-span-fromto, $multiplier: $illusion-span-multiplier, $bottom: $illusion-span-bottom, $defaults: $illusion-span-defaults, $omega: $illusion-span-omega, $gutter: $illusion-span-gutter) {
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {

scss/tools/mixins/_svg-background.scss

@@ -2,7 +2,7 @@
 //
 // @include svg-background('<g transform="matrix(2.18679,0,0,2.18679,5.43964,-0.0421697)"><path d="M5.9 5.3L0.5 0.1C0.4 0 0.2 0 0.1 0.1 0 0.2 0 0.4 0.1 0.5L5.2 5.5 0.1 10.5C0 10.6 0 10.8 0.1 10.9 0.2 11 0.2 11 0.3 11 0.4 11 0.5 11 0.5 10.9L5.9 5.7C6 5.6 6 5.4 5.9 5.3Z"/></g>', black, 16);
 
-@mixin svg-background($svg, $color: $svg-background-color, $width: $svg-background-width, $height: $svg-background-height, $viewboxWidth: $svg-background-viewboxWidth, $viewboxHeight: $svg-background-viewboxHeight, $background-position: $svg-background-position, $background-repeat: $svg-background-repeat) {
+@mixin svg-background($svg, $color: $illusion-svg-background-color, $width: $illusion-svg-background-width, $height: $illusion-svg-background-height, $viewboxWidth: $illusion-svg-background-viewboxWidth, $viewboxHeight: $illusion-svg-background-viewboxHeight, $background-position: $illusion-svg-background-position, $background-repeat: $illusion-svg-background-repeat) {
   @if $height == false {
     $height: $width;
   }

scss/tools/mixins/_triangle.scss

@@ -1,7 +1,7 @@
 // Triangle
 // CSS only triangles using borders
 
-@mixin triangle($direction: right, $size: 4px, $color: false) {
+@mixin triangle($direction: $illusion-triangle-direction, $size: $illusion-triangle-size, $color: $illusion-triangle-color) {
 
   // Top and bottom arrows
   @if $direction == top or $direction == bottom {

scss/tools/mixins/_visually-hidden.scss

@@ -1,6 +1,6 @@
 // Visually hidden
 
-@mixin visually-hidden($position: absolute, $overflow: hidden, $backface-visibility: hidden, $clip: rect(0 0 0 0), $height: 1px, $width: 1px, $margin: -1px, $padding: 0, $border: none) {
+@mixin visually-hidden($position: $illusion-visually-hidden-position, $overflow: $illusion-visually-hidden-overflow, $backface-visibility: $illusion-visually-hidden-backface-visibility, $clip: $illusion-visually-hidden-clip, $height: $illusion-visually-hidden-height, $width: $illusion-visually-hidden-width, $margin: $illusion-visually-hidden-margin, $padding: $illusion-visually-hidden-padding, $border: $illusion-visually-hidden-border) {
   @if $position != false {
     position: $position;
   }
@@ -28,4 +28,4 @@
   @if $border != false {
     border: $border;
   }
-}
+}

scss/tools/mixins/_visually-shown.scss

@@ -1,6 +1,6 @@
 // Visually shown
 
-@mixin visually-shown($position: static, $overflow: visible, $backface-visibility: visible, $clip: auto, $height: auto, $width: auto, $margin: 0, $padding: 0, $border: none) {
+@mixin visually-hidden($position: $illusion-visually-shown-position, $overflow: $illusion-visually-shown-overflow, $backface-visibility: $illusion-visually-shown-backface-visibility, $clip: $illusion-visually-shown-clip, $height: $illusion-visually-shown-height, $width: $illusion-visually-shown-width, $margin: $illusion-visually-shown-margin, $padding: $illusion-visually-shown-padding, $border: $illusion-visually-shown-border) {
   @if $position != false {
     position: $position;
   }
@@ -28,4 +28,4 @@
   @if $border != false {
     border: $border;
   }
-}
+}

scss/tools/variables/_breakpoints.scss

@@ -1,23 +1,24 @@
 // Breakpoints
 // Default breakpoints following the 8pt grid
 
-$alfa:                320px !default;
-$alfa--plus:          440px !default;
-$bravo:               560px !default;
-$charlie:             768px !default;
-$delta:               1024px !default;
-$echo:                1112px !default;
+$alfa:                            320px !default;
+$alfa--plus:                      440px !default;
+$bravo:                           560px !default;
+$charlie:                         768px !default;
+$delta:                           1024px !default;
+$echo:                            1112px !default;
 
 
 // The above values minus 1px to be used for min-max media queries
 
-$alfa--plus-min:      $alfa--plus - 1px !default;
-$bravo-min:           $bravo - 1px !default;
-$charlie-min:         $charlie - 1px !default;
-$delta-min:           $delta - 1px !default;
-$echo-min:            $echo - 1px !default;
+$alfa--plus-min:                  $alfa--plus - 1px !default;
+$bravo-min:                       $bravo - 1px !default;
+$charlie-min:                     $charlie - 1px !default;
+$delta-min:                       $delta - 1px !default;
+$echo-min:                        $echo - 1px !default;
 
 
 // Set default to false so we can use spacing() function outside breakpoint
 
-$inside-breakpoint:   false;
+$illusion-breakpoint-width-max:   false !default;
+$inside-breakpoint:               false;

scss/tools/variables/_button.scss

@@ -0,0 +1,6 @@
+// Button
+
+$illusion-button-appearance:      none !default;
+$illusion-button-display:         inline-block !default;
+$illusion-button-vertical-align:  middle !default;
+$illusion-button-cursor:          pointer !default;

scss/tools/variables/_clearfix.scss

@@ -0,0 +1,3 @@
+// Clearfix
+
+$illusion-clearfix-reset: false !default;

scss/tools/variables/_collapse.scss

@@ -0,0 +1,6 @@
+// Collapse
+
+$illusion-collapse-sides:       both !default;
+$illusion-collapse-multiplier:  1 !default;
+$illusion-collapse-fromto:      false !default;
+$illusion-collapse-gutter:      false !default;

scss/tools/variables/_content-block.scss

@@ -0,0 +1,4 @@
+// Content block
+
+$illusion-content-block-spacing:  $line-height !default;
+$illusion-content-block-location: bottom !default;

scss/tools/variables/_coverall.scss

@@ -0,0 +1,14 @@
+// Coverall
+
+$illusion-coverall-offset:          0 !default;
+$illusion-coverall-top:             true !default;
+$illusion-coverall-right:           true !default;
+$illusion-coverall-bottom:          true !default;
+$illusion-coverall-left:            true !default;
+$illusion-coverall-position:        absolute !default;
+$illusion-coverall-reset:           false !default;
+$illusion-coverall-reset-position:  false !default;
+$illusion-coverall-reset-top:       auto !default;
+$illusion-coverall-reset-right:     auto !default;
+$illusion-coverall-reset-bottom:    auto !default;
+$illusion-coverall-reset-left:      auto !default;

scss/tools/variables/_extendalize.scss

@@ -19,6 +19,11 @@ $illusion-extendalize-address-margin-bottom:          $spacing-m !default;
 
 $illusion-extendalize-body:                           default !default;
 $illusion-extendalize-body-margin:                    0 !default;
+$illusion-extendalize-body-font-family:               $font-family !default;
+$illusion-extendalize-body-font-size:                 $font-size !default;
+$illusion-extendalize-body-line-height:               $line-height !default;
+$illusion-extendalize-body-font-weight:               $weight-normal !default;
+$illusion-extendalize-body-color:                     $color-type !default;
 
 $illusion-extendalize-fieldset:                       default !default;
 $illusion-extendalize-fieldset-width:                 100% !default;
@@ -39,6 +44,8 @@ $illusion-extendalize-heading-font-size:              inherit !default;
 $illusion-extendalize-heading-margin-top:             0 !default;
 $illusion-extendalize-heading-margin-bottom:          $spacing-m !default;
 
+$illusion-extendalize-html-box-sizing:                border-box !default;
+
 $illusion-extendalize-image:                          default !default;
 $illusion-extendalize-image-max-width:                100% !default;
 $illusion-extendalize-image-height:                   auto !default;