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(6px12px);
}

rem function

.test {
padding: rem(6px12px);
}

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

animate

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

Mixins

em mixin

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

rem mixin

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

font-family

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

center

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

circle

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

hide-text

.test {
@includehide-text();
}

opacity

.test {
@includeopacity(30%);
}

triangle

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

list-unstyled

.test {
@includelist-unstyled();
}

truncate

.test {
@includetruncate();
}

word-wrap

.test {
@includeword-wrap();
}

hidpi

.test {
@includehidpi() {
// CSS styles
};
}

placeholder

.test {
@includeplaceholder() {
// CSS styles
};
}

set

$map: (
'background': black;
'hover': (
'color': white
)
);
.test {
@includeset($map);
&:hover {
@includeset($map, 'hover');
}
}

width

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

paper-depth

.test {
@includepaper-depth(3);
}

paper-ripple

.test {
@includepaper-ripple(blackwhite);
}

z-index mixin

$list: ('header', 'modal');
.test {
@includez-index($list, 'modal');
}

breakpoint-check

$map: (
'mobile': 320px,
'tablet': 740px,
'laptop': 980px,
);
@includebreakpoint-check($map);

TODO

• Add testing suite