1.0.4 • Published 7 years ago
@azinasili/bytes v1.0.4
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
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