Usage

Import

After installation you can import it into your Sass files with the statement below.

@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";

You can also just import the mixins without the demo styles.

@import "node_modules/pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";

Pixel borders mixin options

// Add pixel borders with default options @include pixel-borders(); // Available options @include pixel-borders( $corner-size: 1, $border-size: 4px, $border-color: #000, $border-inset-color: false ); // Helper method to create custom styles e.g. colour themes, inset border, highlight @include pixel-box( $corner-size, $border-size, $background-color, $border-color: false, $border-inset: true, $border-inset-size: false, $border-inset-color: false, $border-inset-sides: false, $border-inset-color-br: false, $border-inset-color-tl: false );

pixel-borders

Property Default Type Description $corner-size 1 Number Number of pixels taken out of the corner. $border-size 4px Number(px) Border size. $border-color #000 Hexadecimal color Border colour. $border-inset-color false False/Hexadecimal color Add a inset border to the bottom right in this colour.

pixel-box

Property Default Type Description $corner-size Number Number of pixels taken out of the corner. $border-size Number(px) Border size. $background-color Hexadecimal color Background colour for the box, this is used as a base for colour theme. $border-color Darkened $background-color False/Hexadecimal colour Border colour. $border-inset true Boolean Add a inset border. $border-inset-size $border-size False/Number(px) Inset border size. $border-inset-color Darkened $background-color False/Hexadecimal color Inset border colour. $border-inset-sides 'bottom-right' String Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'. $border-inset-sides-br $border-inset-color False/Hexadecimal color Bottom right inset border colour. $border-inset-sides-tl Lightened $background-color False/Hexadecimal color Top left inset border colour.

Classes

A class of .pixel-borders is applied all elements with a pixel border for demo purposes only, you should be able to add pixel borders to any elements.

The pixel borders mixin comes with a number of classes defined to demonstrate how it can be used. These can be used as is but I would encourage users to create their own customized classes.