Merge pull request #19 from azinasili/1.0.1

1.0.1

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**
@@ -32,7 +53,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,28 +76,31 @@ A small mixin and function helper library for Sass projects.
 * [`width`](#width)
 * [`paper-depth`](#paper-depth)
 * [`paper-ripple`](#paper-ripple)
-* [`z-index`](#z-index)
-
-### 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
-  ```
+* [`z-index`](#z-index-mixin)
+* [`breakpoint-check`](#breakpoint-check)
 
-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
 
@@ -154,14 +178,11 @@ $map: (
 }
 ```
 
-#### `z-index`
+#### `z-index` function
 ```scss
-.test {
-  $list: (
-    'header',
-    'modal',
-  );
+$list: ('header', 'modal');
 
+.test {
   z-index: z-index($list, 'modal');
 }
 
@@ -320,18 +341,26 @@ $map: (
 }
 ```
 
-#### `z-index`
+#### `z-index` function
 ```scss
-.test {
-  $list: (
-    'header',
-    'modal',
-  );
+$list: ('header', 'modal');
 
+.test {
   @include z-index($list, 'modal');
 }
 ```
 
+#### `breakpoint-check`
+```scss
+$map: (
+  'mobile': 320px,
+  'tablet': 740px,
+  'laptop': 980px,
+);
+
+@include breakpoint-check($map);
+```
+
 ## TODO
 
 * Added testing suite

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 <[email protected]>",

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);
 }

bytes/functions/_em.scss

@@ -36,5 +36,9 @@
     }
   }
 
+  @if length($values) == 1 {
+    @return nth($_em-values, 1);
+  }
+
   @return $_em-values;
 }

bytes/functions/_rem.scss

@@ -36,5 +36,9 @@
     }
   }
 
+  @if length($values) == 1 {
+    @return nth($_rem-values, 1);
+  }
+
   @return $_rem-values;
 }

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;
 

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 {

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 <[email protected]>",