diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..628f989 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Nigel O Toole + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 3384698..f6ce03b 100644 --- a/README.md +++ b/README.md @@ -96,3 +96,7 @@ Clone or download from Github. ### Credits Inspired by the excellent [NES.css](https://nostalgic-css.github.io/NES.css/) which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required. + + +### License +MIT © Nigel O Toole diff --git a/src/index.html b/src/index.html index 45f2139..6b55bf8 100644 --- a/src/index.html +++ b/src/index.html @@ -12,8 +12,8 @@ - +
@@ -66,34 +66,34 @@
-
-
+
+
-
-

Installation

+
+

Installation

 $ npm install pixel-borders --save-dev
-
+
-
- -

Usage

+
+ +

Usage

-

Import

+

Import

-

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

+

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.

+

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

+

Pixel borders mixin options

// Add pixel borders with default options
 @include pixel-borders();
 
@@ -120,149 +120,148 @@
 );
-

pixel-borders

+

pixel-borders

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultTypeDescription
$corner-size1NumberNumber of pixels taken out of the corner.
$border-size4pxNumber(px)Border size.
$border-color#000Hexadecimal colorBorder colour.
$border-inset-colorfalseFalse/Hexadecimal colorAdd a inset border to the bottom right in this colour.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultTypeDescription
$corner-size1NumberNumber of pixels taken out of the corner.
$border-size4pxNumber(px)Border size.
$border-color#000Hexadecimal colorBorder colour.
$border-inset-colorfalseFalse/Hexadecimal colorAdd a inset border to the bottom right in this colour.
-

pixel-box

+

pixel-box

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
PropertyDefaultTypeDescription
$corner-sizeNumberNumber of pixels taken out of the corner.
$border-sizeNumber(px)Border size.
$background-colorHexadecimal colorBackground colour for the box, this is used as a base for colour theme.
$border-colorDarkened $background-colorFalse/Hexadecimal colourBorder colour.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - -
PropertyDefaultTypeDescription
$corner-sizeNumberNumber of pixels taken out of the corner.
$border-sizeNumber(px)Border size.
$background-colorHexadecimal colorBackground colour for the box, this is used as a base for colour theme.
$border-colorDarkened $background-colorFalse/Hexadecimal colourBorder colour.
$border-insettrueBooleanAdd a inset border.
$border-inset-size$border-sizeFalse/Number(px)Inset border size.
$border-inset-colorDarkened $background-colorFalse/Hexadecimal colorInset border colour.
$border-insettrueBooleanAdd a inset border.
$border-inset-size$border-sizeFalse/Number(px)Inset border size.
$border-inset-colorDarkened $background-colorFalse/Hexadecimal colorInset border colour.
$border-inset-sides'bottom-right'StringWhich sides to add inset border to, 'all', 'top-left' or 'bottom-right'.
$border-inset-sides-br$border-inset-colorFalse/Hexadecimal colorBottom right inset border colour.
$border-inset-sides-tlLightened $background-colorFalse/Hexadecimal colorTop left 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

+

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.

+

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.

-
+
-
-

Demo site

-

Clone or download from Github.

+
+

Demo site

+

Clone or download from Github.

$ npm install
 $ gulp serve
+
+ + +
+

Credits

+

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. +

+
+
-
-

Credits

-

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. -

-
- -
- - - - +