Update read me and fix typos

README.md

@@ -1,10 +1,93 @@
-# Pixel borders SASS mixin
+# Pixel borders
 
-## <a name="Development"></a>Development
+[Live demo](http://nigelotoole.github.io/pixel-borders/)
 
-### <a name="Serve"></a>Serve
+## A SASS mixin to add pixelated borders to HTML elements, which can be customized for different sizes, colour coding,inset borders.
-`gulp serve`
 
-### <a name="Build"></a>Build
-`gulp build` OR `gulp dist`
 
+## Installation
+```javascript
+$ npm install pixel-borders --save-dev
+```
+
+## Usage
+
+### Import
+
+After adding the repo as a dependency you can import it into your SASS files. Alternatively you can download the pixel-borders.scss from this repo and add it to your project folder directly.
+
+```scss
+@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";
+```
+
+#### Pixel borders mixin options
+
+```scss
+// 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,     // Sides to apply inset border: 'all', 'top-left' or 'bottom-right'
+  $border-inset-color-br: false,  // Bottom right inset border colour
+  $border-inset-color-tl: false   // Top left inset border colour
+);
+```
+
+### 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
+
+Options as above unless otherwise specified.
+
+| Property                 | Default                       | Type                     | Description                                                              |
+| ------------------------ | ----------------------------- | ------------------------ | ------------------------------------------------------------------------ |
+| `$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.
+
+### Demo site
+
+Clone or download from Github.
+
+```javascript
+    $ npm install
+    $ gulp serve
+```
+
+### 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.

docs/index.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pixel borders - Creates pixelated borders on html elements</title>
+    <title>Pixel borders - A SASS mixin to add pixelated borders to HTML elements</title>
 
     <link rel="stylesheet" href="styles/site.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
 
-    <link rel="stylesheet" href="styles/pixel-borders.css">
+    <!-- <link rel="stylesheet" href="styles/pixel-borders.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P"> -->
   </head>
 
   <body>
@@ -86,7 +86,7 @@
 
       <p>After adding the repo as a dependency you can import it into your SASS files. Alternatively you can download the pixel-borders.scss from this repo and add it to your project folder directly.</p>
 
-<pre><code>@import "node_modules/pixel-border/src/styles/pixel-borders.scss";</code></pre>
+<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";</code></pre>
 
 
       <h4>Pixel borders mixin options</h4>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pixel-borders",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,10 +1,8 @@
 {
   "name": "pixel-borders",
-  "description": "A SASS mixin to create pixelated borders on elements.",
+  "description": "A SASS mixin to add pixelated borders to HTML elements.",
-  "version": "1.0.0",
+  "version": "1.0.1",
-
   "main": "src/styles/pixel-borders.scss",
-
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NigelOToole/pixel-borders.git"
@@ -13,10 +11,8 @@
     "url": "https://github.com/NigelOToole/pixel-borders/issues"
   },
   "homepage": "https://github.com/NigelOToole/pixel-borders#readme",
-
   "author": "Nigel O Toole <pure@purestructure.com> (http://www.purestructure.com)",
   "license": "MIT",
-
   "keywords": [
     "sass",
     "mixin",
@@ -25,7 +21,6 @@
     "borders",
     "css"
   ],
-  
   "engines": {
     "node": ">=4"
   },

src/index.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pixel borders - Creates pixelated borders on html elements</title>
+    <title>Pixel borders - A SASS mixin to add pixelated borders to HTML elements</title>
 
     <link rel="stylesheet" href="styles/site.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
 
-    <link rel="stylesheet" href="styles/pixel-borders.css">
+    <!-- <link rel="stylesheet" href="styles/pixel-borders.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P"> -->
   </head>
 
   <body>
@@ -86,7 +86,7 @@
 
       <p>After adding the repo as a dependency you can import it into your SASS files. Alternatively you can download the pixel-borders.scss from this repo and add it to your project folder directly.</p>
 
-<pre><code>@import "node_modules/pixel-border/src/styles/pixel-borders.scss";</code></pre>
+<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";</code></pre>
 
 
       <h4>Pixel borders mixin options</h4>