Bytes

A small mixin and function helper library for Sass projects.

Installation

With NPM:

npm install @azinasili/bytes --save

Install Bytes with Bower package manager:

bower install bytes --save

Import Bytes into your stylesheet:

@import "path/to/bytes/bytes";

It’s not recommended to add or modify files so that you can update them easily.

Documentation

Bytes uses Sassdoc for documentation. Docs can be generated via the command line using Grunt.

Install dependencies:

npm install

Generate and open docs in your browser:

grunt

Generate docs:

grunt docs

What's included with Bytes?

Functions

• get
• strip-unit
• em
• rem
• tint
• shade
• transparent
• chroma
• color
• dynamic-color
• z-index
• path
• animate

Mixins

• em
• rem
• font-face
• center
• circle
• hide-text
• opacity
• triangle
• list-unstyled
• truncate
• word-wrap
• hidpi
• placeholder
• set
• width
• paper-depth
• paper-ripple
• z-index
• breakpoint-check

Global settings

Here are all of Bytes global settings with their default value:

$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),
);

You can set your own global defaults. Create a $bytes variable containing any key/value you need.

$bytes: (
  'font-size'      : 14px,
  'media-path'     : '../../img',
);

Functions

get

$map: (
  'foo': 'bar',
);

.test {
  content: get($map, 'foo');
}

strip-unit

.test {
  line-height: strip-unit(2rem);
}

em function

.test {
  padding: em(6px 12px);
}

rem function

.test {
  padding: rem(6px 12px);
}

tint

.test {
  color: tint(#bada55, 15%);
}

shade

.test {
  color: shade(#bada55, 15%);
}

transparent

.test {
  color: transparent(#bada55, 85%);
}

chroma

.test {
  color: chroma(#bada55, -10%);
}

color

.test {
  color: color(#bada55, 10%, -35%);
}

dynamic-color

.test {
  color: dynamic-color(#bada55);
}

z-index function

$list: ('header', 'modal');

.test {
  z-index: z-index($list, 'modal');
}

.test {
  z-index: z($list, 'modal');
}

path

.test {
  background: path('kitten.jpg') no-repeat 0 0;
}

animate

.test {
  transition: animate(all, .5s);
}

Mixins

em mixin

.test {
  @include em(padding, 10px);
}

rem mixin

.test {
  @include rem(padding, 10px);
}

font-family

.test {
  @include font-family('Open Sans', '../fonts');
}

center

.test {
  @include center('both', 'absolute');
}

circle

.test {
  @include circle(20px, 10px);
}

hide-text

.test {
  @include hide-text();
}

opacity

.test {
  @include opacity(30%);
}

triangle

.test {
  @include triangle(20px, 10px, #bada55, 'bottom');
}

list-unstyled

.test {
  @include list-unstyled();
}

truncate

.test {
  @include truncate();
}

word-wrap

.test {
  @include word-wrap();
}

hidpi

.test {
  @include hidpi() {
    // CSS styles
  };
}

placeholder

.test {
  @include placeholder() {
    // CSS styles
  };
}

set

$map: (
  'background': black;
  'hover': (
    'color': white
  )
);

.test {
  @include set($map);

  &:hover {
    @include set($map, 'hover');
  }
}

width

.test {
  @include width(200px, 500px);
}

paper-depth

.test {
  @include paper-depth(3);
}

paper-ripple

.test {
  @include paper-ripple(black white);
}

z-index mixin

$list: ('header', 'modal');

.test {
  @include z-index($list, 'modal');
}

breakpoint-check

$map: (
  'mobile': 320px,
  'tablet': 740px,
  'laptop': 980px,
);

@include breakpoint-check($map);

TODO

• Add testing suite