diff --git a/README.md b/README.md index e2e4eb2..dcbcafb 100755 --- a/README.md +++ b/README.md @@ -1,15 +1,11 @@ # Unit Space -**NOTE:** STILL A LOT OF WORK TO DO FOR README. I still need to do details on using the `@mixin` and cleaning this up for use. - -====== - - When creating an interface one of the most parts is spacing (`margin` and `padding`). Consistent units are vital for unity, balance, rhythm of your web applications. *Unit Space* is a foundation to generate create consistent spacing for your projects, no matter how many variations may be required in your system. - *Unit Space* is built in Sass 3.3.x to provide you the most flexibility and ease of maintainability. +* **View demos**: [http://codepen.io/kevinmack18/pen/OVVxpO](http://codepen.io/kevinmack18/pen/OVVxpO) + ---- @@ -144,7 +140,6 @@ Ouput the compiled CSS properties from a map object into another selector. ```` .some-selector-name { @include units($property: "padding", $version: "default", $variations: (base: false, top: false, right: false, bottom: true, left: false)); - } ```` @@ -210,7 +205,7 @@ Each variation (including defaults) have a %placeholder selector that aligns wit The MIT License (MIT) -Copyright (c) 2014 Kevin Mack +Copyright (c) 2015 Kevin Mack Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/_unit_space__variables.scss b/_unit_space__variables.scss index 5190023..2d70287 100644 --- a/_unit_space__variables.scss +++ b/_unit_space__variables.scss @@ -1,8 +1,8 @@ // Spacing/Unit Variables and Objects -$units__default-unit: 1.250em; +$units__default-unit: 20px; $default-unit: $units__default-unit; -$units__default-breakpoint: 31.250em; +$units__default-breakpoint: 500px; $units__include-box-sizing: true; // OPTIONS: diff --git a/unit-space.scss b/unit-space.scss index 05ea4af..1376a73 100755 --- a/unit-space.scss +++ b/unit-space.scss @@ -4,10 +4,11 @@ // * Released under the MIT license // * https://github.com/kevinmack18/SASS-Margin-and-Padding-Starter/blob/master/LICENSE // * Version: v3.0.0 - // * Date: 2014-08-25 + // * Date: 2015-04-30 @import "unit_space__variables"; + @if ( $units__include-box-sizing ) { *, *:before, *:after { box-sizing: border-box; @@ -27,7 +28,7 @@ $media-query-max: if(map-has-key($values, "media-query-max"),map-get($values, "media-query-max"),false); $unit--media-query-max: if(map-has-key($values, "unit--media-query-max"),map-get($values, "unit--media-query-max"),$unit); $units-are-controlled-by-breakpoints: ($media-query-min != false and $media-query-max != false); - + @each $variation, $boolean in $variations { @@ -39,7 +40,7 @@ // Check to see if both have breakpoints @if ($units-are-controlled-by-breakpoints == false) { %#{$selector-base}-#{$variation}#{$selector-suffix}#{$id} { - #{$property}-#{$variation}: unquote($unit); + #{$property}-#{$variation}: $unit; } } @@ -52,25 +53,17 @@ @if ($media-query-min) { @media screen and (min-width: $media-query-min) { %#{$selector-base}-#{$variation}#{$selector-suffix}#{$id} { - #{$property}-#{$variation}: unquote($unit--media-query-min); + #{$property}-#{$variation}: $unit--media-query-min; } } } @if ($media-query-max) { @media screen and (max-width: $media-query-max) { %#{$selector-base}-#{$variation}#{$selector-suffix}#{$id} { - #{$property}-#{$variation}: unquote($unit--media-query-max); + #{$property}-#{$variation}: $unit--media-query-max; } } } - - // Verify variables (for testing) - // $media-query-min: #{$media-query-min} - // $unit--media-query-min: #{$unit--media-query-min} - // $media-query-max: #{$media-query-max} - // $unit--media-query-max: #{$unit--media-query-max} - // Both have breakpoints: #{$units-are-controlled-by-breakpoints} - } @if( $variation == "base" ) { @@ -82,14 +75,14 @@ @if ($media-query-min) { @media screen and (min-width: $media-query-min) { %#{$selector-base}#{$selector-suffix} { - #{$property}: unquote($unit--media-query-min); + #{$property}: $unit--media-query-min; } } } @if ($media-query-max) { @media screen and (max-width: $media-query-max) { %#{$selector-base}#{$selector-suffix} { - #{$property}: unquote($unit--media-query-max); + #{$property}: $unit--media-query-max; } } } @@ -111,7 +104,7 @@ } // output specific properites only -@mixin units($property: "padding", $version: "default", $variations: (base: true, top: true, right: true, bottom: true, left: true)) { +@mixin units($property: "padding", $version: "default", $variation: (base: true, top: true, right: true, bottom: true, left: true)) { $variation-controls: $variation; $versions: map-get($units, $property); $values: map-get($versions, $version); @@ -124,7 +117,7 @@ $media-query-max: if(map-has-key($values, "media-query-max"),map-get($values, "media-query-max"),false); $unit--media-query-max: if(map-has-key($values, "unit--media-query-max"),map-get($values, "unit--media-query-max"),$unit); $units-are-controlled-by-breakpoints: ($media-query-min != false and $media-query-max != false); - + @each $variation, $boolean in $variation-controls { $includeVariation: map-get($variation-controls, $variation); @@ -150,6 +143,8 @@ } } } + + @if ($media-query-max) { @media screen and (max-width: $media-query-max) { @if ( $baseDoesNotOveride ) { @@ -174,4 +169,3 @@ } } -