From 8624ab1915344ec621a816a2a80fdd896eb20bce Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 20:51:40 -0500 Subject: [PATCH 1/8] bumped to 1.0.1 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 5b1f129..52ac3ad 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bytes", - "version": "1.0.0", + "version": "1.0.1", "description": "Lightweight Sass mixin library to make development fun", "homepage": "https://github.com/azinasili/bytes", "authors": "Azin Asili ", diff --git a/package.json b/package.json index 275b8f0..16f5fbf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bytes", - "version": "1.0.0", + "version": "1.0.1", "description": "Lightweight Sass mixin library to make development fun", "homepage": "https://github.com/azinasili/bytes", "author": "Azin Asili ", From 43cda4f287644802aaa4b3c0e967d671db2994f2 Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 22:19:08 -0500 Subject: [PATCH 2/8] fixed and returning a list when only 1 value --- bytes/functions/_em.scss | 4 ++++ bytes/functions/_rem.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/bytes/functions/_em.scss b/bytes/functions/_em.scss index 51af833..862f760 100644 --- a/bytes/functions/_em.scss +++ b/bytes/functions/_em.scss @@ -36,5 +36,9 @@ } } + @if length($values) == 1 { + @return nth($_em-values, 1); + } + @return $_em-values; } diff --git a/bytes/functions/_rem.scss b/bytes/functions/_rem.scss index e240418..66d8c57 100644 --- a/bytes/functions/_rem.scss +++ b/bytes/functions/_rem.scss @@ -36,5 +36,9 @@ } } + @if length($values) == 1 { + @return nth($_rem-values, 1); + } + @return $_rem-values; } From 16f9fcec935be55aca43c599c0f06a47c4992aeb Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 22:20:29 -0500 Subject: [PATCH 3/8] made param null again, prevents transparency accidental override --- bytes/functions/_color.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/bytes/functions/_color.scss b/bytes/functions/_color.scss index 28d272f..3543757 100644 --- a/bytes/functions/_color.scss +++ b/bytes/functions/_color.scss @@ -5,7 +5,7 @@ /// @param {color} $color /// Color to manipulate /// -/// @param {number | percent} $opacity [100%] +/// @param {number | percent} $opacity [null] /// Opacity of color /// /// @param {number | percent} $chroma [0] @@ -26,6 +26,10 @@ /// @require {function} transparent /// /// @require {function} chroma -@function color($color, $opacity: 100%, $chroma: 0) { - @return transparent(chroma($color, $chroma), $opacity); +@function color($color, $opacity: null, $chroma: 0) { + @if $opacity { + @return transparent(chroma($color, $chroma), $opacity); + } + + @return chroma($color, $chroma); } From 60801d3218f834ef9aae9e3b1a91f12de807537b Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 22:21:23 -0500 Subject: [PATCH 4/8] fixed messed up sizing for left and right direction --- bytes/mixins/_triangle.scss | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/bytes/mixins/_triangle.scss b/bytes/mixins/_triangle.scss index bc270b3..5bac0b3 100644 --- a/bytes/mixins/_triangle.scss +++ b/bytes/mixins/_triangle.scss @@ -31,27 +31,28 @@ /// /// @require {function} set @mixin triangle($width, $height: $width, $color: #000, $direction: 'bottom') { - $_size: ($width / 2); + $_height: ($height / 2); + $_width: ($width / 2); $_sides: ( 'top': ( 'border-bottom': $height solid $color, - 'border-left': $_size solid transparent, - 'border-right': $_size solid transparent, + 'border-left': $_width solid transparent, + 'border-right': $_width solid transparent, ), 'right': ( - 'border-left': $height solid $color, - 'border-top': $_size solid transparent, - 'border-bottom': $_size solid transparent, + 'border-left': $width solid $color, + 'border-top': $_height solid transparent, + 'border-bottom': $_height solid transparent, ), 'bottom': ( 'border-top': $height solid $color, - 'border-left': $_size solid transparent, - 'border-right': $_size solid transparent, + 'border-left': $_width solid transparent, + 'border-right': $_width solid transparent, ), 'left': ( - 'border-right': $height solid $color, - 'border-top': $_size solid transparent, - 'border-bottom': $_size solid transparent, + 'border-right': $width solid $color, + 'border-top': $_width solid transparent, + 'border-bottom': $_width solid transparent, ), ); $_angles: ( @@ -82,7 +83,7 @@ display: inline-block; @if $width == $height and $_angle-check { - border: $_size solid transparent; + border: $_width solid transparent; @include set(get($_angles, $direction)); } @else { @if $_angle-check { From 81ad707c423cdb9597e6290ae9866aa5c85ab834 Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 22:22:10 -0500 Subject: [PATCH 5/8] fixed bug when joining direction lists --- bytes/mixins/_center.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bytes/mixins/_center.scss b/bytes/mixins/_center.scss index 2ece6eb..72a9f2c 100644 --- a/bytes/mixins/_center.scss +++ b/bytes/mixins/_center.scss @@ -29,7 +29,7 @@ @mixin center($direction, $position: 'relative', $is-important: null) { $_horizontal: ('horizontal', 'horz', 'h'); $_vertical: ('vertical', 'vert', 'v'); - $_directions: join(($_horizontal, $_vertical), ('both')); + $_directions: join(join($_horizontal, $_vertical), ('both')); $_positions: ('relative', 'absolute', 'fixed'); $_important: null; From 9c47ce0c5b35a4700aa9ae3b44f3f8ec6928d7d3 Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 22:31:12 -0500 Subject: [PATCH 6/8] added missing example --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 08803a2..5c928cc 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ A small mixin and function helper library for Sass projects. * [`paper-depth`](#paper-depth) * [`paper-ripple`](#paper-ripple) * [`z-index`](#z-index) +* [`breakpoint-check`](#breakpoint-check) ### Docs Bytes uses [Sassdoc](http://sassdoc.com/) for documentation. Docs can be generated via the command line using [Grunt](http://gruntjs.com/). @@ -332,6 +333,17 @@ $map: ( } ``` +#### `breakpoint-check` +```scss +$map: ( + 'mobile': 320px, + 'tablet': 740px, + 'laptop': 980px, +); + +@include breakpoint-check($map); +``` + ## TODO * Added testing suite From 26685d19cfd7af550a990b775b0c46e5de32c555 Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Wed, 1 Mar 2017 23:47:12 -0500 Subject: [PATCH 7/8] fixed z-index docs --- README.md | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 5c928cc..ac29e0c 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ A small mixin and function helper library for Sass projects. * [`chroma`](#chroma) * [`color`](#color) * [`dynamic-color`](#dynamic-color) -* [`z-index`](#z-index) +* [`z-index`](#z-index-function) * [`path`](#path) * [`animate`](#animate) @@ -55,7 +55,7 @@ A small mixin and function helper library for Sass projects. * [`width`](#width) * [`paper-depth`](#paper-depth) * [`paper-ripple`](#paper-ripple) -* [`z-index`](#z-index) +* [`z-index`](#z-index-mixin) * [`breakpoint-check`](#breakpoint-check) ### Docs @@ -155,14 +155,11 @@ $map: ( } ``` -#### `z-index` +#### `z-index` function ```scss -.test { - $list: ( - 'header', - 'modal', - ); +$list: ('header', 'modal'); +.test { z-index: z-index($list, 'modal'); } @@ -321,14 +318,11 @@ $map: ( } ``` -#### `z-index` +#### `z-index` function ```scss -.test { - $list: ( - 'header', - 'modal', - ); +$list: ('header', 'modal'); +.test { @include z-index($list, 'modal'); } ``` From 3fc4424c32f3abd84a8ed687e57afa4d0e9e7560 Mon Sep 17 00:00:00 2001 From: Azin Asili Date: Thu, 2 Mar 2017 00:01:30 -0500 Subject: [PATCH 8/8] rearranged sections, added global settings section --- README.md | 59 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index ac29e0c..e31e8b7 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A small mixin and function helper library for Sass projects. ## Installation -1. Install the Bytes with [Bower](http://bower.io) package manager: +1. Install Bytes with [Bower](http://bower.io) package manager: ```bash bower install bytes @@ -18,6 +18,27 @@ A small mixin and function helper library for Sass projects. It’s not recommended to add or modify the Neat files so that you can update them easily. +## Documentation +Bytes uses [Sassdoc](http://sassdoc.com/) for documentation. Docs can be generated via the command line using [Grunt](http://gruntjs.com/). + +1. Install dependencies: + + ```bash + npm install + ``` + +1. Generate and open docs in your browser: + + ```bash + grunt + ``` + +1. Generate docs: + + ```bash + grunt docs + ``` + ## What's included with Bytes? **Functions** @@ -58,26 +79,28 @@ A small mixin and function helper library for Sass projects. * [`z-index`](#z-index-mixin) * [`breakpoint-check`](#breakpoint-check) -### Docs -Bytes uses [Sassdoc](http://sassdoc.com/) for documentation. Docs can be generated via the command line using [Grunt](http://gruntjs.com/). - -1. Install documentation dependencies: - - ```bash - npm install - ``` - -1. Generate and open docs in a browser: +### Global settings +Here are all of Bytes global settings with their default value: - ```bash - grunt - ``` +```scss +$bytes: ( + 'animate-easing' : cubic-bezier(.4, 0, .2, 1), + 'animate-timing' : .4s, + 'black' : rgb(0, 0, 0), + 'font-size' : 16px, + 'media-path' : '../assets', + 'white' : rgb(255, 255, 255), +); +``` -1. Generate docs: +You can set your own global defaults. Create a `$bytes` variable containing any key/value you need. - ```bash - grunt docs - ``` +```scss +$bytes: ( + 'font-size' : 14px, + 'media-path' : '../../img', +); +``` ### Functions