mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-31 01:29:53 +02:00
Update read me and fix typos
This commit is contained in:
95
README.md
95
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
|
||||
`gulp serve`
|
||||
## A SASS mixin to add pixelated borders to HTML elements, which can be customized for different sizes, colour coding,inset borders.
|
||||
|
||||
### <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.
|
||||
|
@@ -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="https://fonts.googleapis.com/css?family=Press+Start+2P">
|
||||
<!-- <link rel="stylesheet" href="styles/pixel-borders.css">
|
||||
<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>
|
||||
|
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pixel-borders",
|
||||
"version": "0.1.0",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@@ -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 <pure@purestructure.com> (http://www.purestructure.com)",
|
||||
"license": "MIT",
|
||||
|
||||
"keywords": [
|
||||
"sass",
|
||||
"mixin",
|
||||
@@ -25,7 +21,6 @@
|
||||
"borders",
|
||||
"css"
|
||||
],
|
||||
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
},
|
||||
|
@@ -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="https://fonts.googleapis.com/css?family=Press+Start+2P">
|
||||
<!-- <link rel="stylesheet" href="styles/pixel-borders.css">
|
||||
<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>
|
||||
|
Reference in New Issue
Block a user