From 27595738b1d931f69a99665b4c9a5a1d2c5805ac Mon Sep 17 00:00:00 2001 From: Nigel O'Toole Date: Fri, 12 Apr 2019 14:43:29 +0100 Subject: [PATCH] Update read me and fix typos --- README.md | 95 ++++++++++++++++++++++++++++++++++++++++++++--- docs/index.html | 8 ++-- package-lock.json | 2 +- package.json | 9 +---- src/index.html | 8 ++-- 5 files changed, 100 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 45c1868..185e5df 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,93 @@ -# Pixel borders SASS mixin +# Pixel borders -## Development +[Live demo](http://nigelotoole.github.io/pixel-borders/) -### Serve -`gulp serve` +## A SASS mixin to add pixelated borders to HTML elements, which can be customized for different sizes, colour coding,inset borders. -### 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. diff --git a/docs/index.html b/docs/index.html index 6bec8bd..579f121 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,13 +3,13 @@ - Pixel borders - Creates pixelated borders on html elements + Pixel borders - A SASS mixin to add pixelated borders to HTML elements - - + @@ -86,7 +86,7 @@

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.

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

Pixel borders mixin options

diff --git a/package-lock.json b/package-lock.json index af8683f..5f2cd7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "pixel-borders", - "version": "0.1.0", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 793c90d..5e4262d 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,8 @@ { "name": "pixel-borders", - "description": "A SASS mixin to create pixelated borders on elements.", - "version": "1.0.0", - + "description": "A SASS mixin to add pixelated borders to HTML elements.", + "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 (http://www.purestructure.com)", "license": "MIT", - "keywords": [ "sass", "mixin", @@ -25,7 +21,6 @@ "borders", "css" ], - "engines": { "node": ">=4" }, diff --git a/src/index.html b/src/index.html index 6bec8bd..579f121 100644 --- a/src/index.html +++ b/src/index.html @@ -3,13 +3,13 @@ - Pixel borders - Creates pixelated borders on html elements + Pixel borders - A SASS mixin to add pixelated borders to HTML elements - - + @@ -86,7 +86,7 @@

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.

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

Pixel borders mixin options