$ npm install pixel-borders --save-dev
- After installation you can import it into your Sass files with the statement below. Alternatively you can download the pixel-borders.scss from this repo and add it to your project folder directly.
+After installation you can import it into your Sass files with the statement below.
-@import "pixel-borders/src/styles/pixel-borders.scss";@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";You can also just import the mixins without the demo styles.
+You can also just import the mixins without the demo styles.
-@import "pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";@import "node_modules/pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";// Add pixel borders with default options
@include pixel-borders();
@@ -120,149 +119,152 @@
);
| 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. | -
| 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. | +
| 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. | -
| 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 |
+ 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. | -
$border-inset-sides$border-inset-sides-br$border-inset-color$border-inset-sides-tl$background-colorA 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.
+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.
+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.
-Clone or download from Github.
+Clone or download from Github.
$ npm install
$ gulp serve
Inspired by the excellent NES.css which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required. +
+Inspired by the excellent NES.css which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required. -
-| Property | @@ -154,9 +154,11 @@Add a inset border to the bottom right in this colour. |
|---|
| Property | @@ -227,6 +229,7 @@Top left inset border colour. |
|---|