mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-28 00:00:40 +02:00
Merge branch 'master' into sassnotsass
This commit is contained in:
Nigel O Toole
GitHub
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -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.
|
||||||
@@ -96,3 +96,7 @@ Clone or download from Github.
|
|||||||
### Credits
|
### 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.
|
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
|
||||||
|
|||||||
273
src/index.html
273
src/index.html
@@ -12,8 +12,8 @@
|
|||||||
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -66,34 +66,34 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="fullwidth">
|
<div class="fullwidth">
|
||||||
<div class="container separator">
|
<div class="container separator">
|
||||||
|
|
||||||
<div class="subsection">
|
<div class="subsection">
|
||||||
<h2>Installation</h2>
|
<h2>Installation</h2>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
<code>$ npm install pixel-borders --save-dev</code>
|
<code>$ npm install pixel-borders --save-dev</code>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="subsection">
|
<div class="subsection">
|
||||||
|
|
||||||
<h2>Usage</h2>
|
<h2>Usage</h2>
|
||||||
|
|
||||||
<h3>Import</h3>
|
<h3>Import</h3>
|
||||||
|
|
||||||
<p>After installation you can import it into your Sass files with the statement below.</p>
|
<p>After installation you can import it into your Sass files with the statement below.</p>
|
||||||
|
|
||||||
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";</code></pre>
|
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";</code></pre>
|
||||||
|
|
||||||
<p>You can also just import the mixins without the demo styles.</p>
|
<p>You can also just import the mixins without the demo styles.</p>
|
||||||
|
|
||||||
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";</code></pre>
|
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";</code></pre>
|
||||||
|
|
||||||
|
|
||||||
<h4>Pixel borders mixin options</h4>
|
<h4>Pixel borders mixin options</h4>
|
||||||
<pre><code>// Add pixel borders with default options
|
<pre><code>// Add pixel borders with default options
|
||||||
@include pixel-borders();
|
@include pixel-borders();
|
||||||
|
|
||||||
@@ -120,149 +120,148 @@
|
|||||||
);
|
);
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h3>pixel-borders</h3>
|
<h3>pixel-borders</h3>
|
||||||
|
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Property</th>
|
<th>Property</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$corner-size</code></td>
|
<td><code>$corner-size</code></td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>Number</td>
|
<td>Number</td>
|
||||||
<td>Number of pixels taken out of the corner.</td>
|
<td>Number of pixels taken out of the corner.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-size</code></td>
|
<td><code>$border-size</code></td>
|
||||||
<td>4px</td>
|
<td>4px</td>
|
||||||
<td>Number(px)</td>
|
<td>Number(px)</td>
|
||||||
<td>Border size.</td>
|
<td>Border size.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-color</code></td>
|
<td><code>$border-color</code></td>
|
||||||
<td>#000</td>
|
<td>#000</td>
|
||||||
<td>Hexadecimal color</td>
|
<td>Hexadecimal color</td>
|
||||||
<td>Border colour.</td>
|
<td>Border colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-color</code></td>
|
<td><code>$border-inset-color</code></td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>False/Hexadecimal color</td>
|
<td>False/Hexadecimal color</td>
|
||||||
<td>Add a inset border to the bottom right in this colour.</td>
|
<td>Add a inset border to the bottom right in this colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h3>pixel-box</h3>
|
<h3>pixel-box</h3>
|
||||||
|
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Property</th>
|
<th>Property</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$corner-size</code></td>
|
<td><code>$corner-size</code></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Number</td>
|
<td>Number</td>
|
||||||
<td>Number of pixels taken out of the corner.</td>
|
<td>Number of pixels taken out of the corner.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-size</code></td>
|
<td><code>$border-size</code></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Number(px)</td>
|
<td>Number(px)</td>
|
||||||
<td>Border size.</td>
|
<td>Border size.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$background-color</code></td>
|
<td><code>$background-color</code></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Hexadecimal color</td>
|
<td>Hexadecimal color</td>
|
||||||
<td>Background colour for the box, this is used as a base for colour theme.</td>
|
<td>Background colour for the box, this is used as a base for colour theme.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-color</code></td>
|
<td><code>$border-color</code></td>
|
||||||
<td>Darkened <code>$background-color</code></td>
|
<td>Darkened <code>$background-color</code></td>
|
||||||
<td>False/Hexadecimal colour</td>
|
<td>False/Hexadecimal colour</td>
|
||||||
<td>Border colour.</td>
|
<td>Border colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset</code></td>
|
<td><code>$border-inset</code></td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Boolean</td>
|
<td>Boolean</td>
|
||||||
<td>Add a inset border.</td>
|
<td>Add a inset border.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-size</code></td>
|
<td><code>$border-inset-size</code></td>
|
||||||
<td><code>$border-size</code></td>
|
<td><code>$border-size</code></td>
|
||||||
<td>False/Number(px)</td>
|
<td>False/Number(px)</td>
|
||||||
<td>Inset border size.</td>
|
<td>Inset border size.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-color</code></td>
|
<td><code>$border-inset-color</code></td>
|
||||||
<td>Darkened <code>$background-color</code></td>
|
<td>Darkened <code>$background-color</code></td>
|
||||||
<td>False/Hexadecimal color</td>
|
<td>False/Hexadecimal color</td>
|
||||||
<td>Inset border colour.</td>
|
<td>Inset border colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-sides</code></td>
|
<td><code>$border-inset-sides</code></td>
|
||||||
<td>'bottom-right'</td>
|
<td>'bottom-right'</td>
|
||||||
<td>String</td>
|
<td>String</td>
|
||||||
<td>Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'.</td>
|
<td>Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-sides-br</code></td>
|
<td><code>$border-inset-sides-br</code></td>
|
||||||
<td><code>$border-inset-color</code></td>
|
<td><code>$border-inset-color</code></td>
|
||||||
<td>False/Hexadecimal color</td>
|
<td>False/Hexadecimal color</td>
|
||||||
<td>Bottom right inset border colour.</td>
|
<td>Bottom right inset border colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>$border-inset-sides-tl</code></td>
|
<td><code>$border-inset-sides-tl</code></td>
|
||||||
<td>Lightened <code>$background-color</code></td>
|
<td>Lightened <code>$background-color</code></td>
|
||||||
<td>False/Hexadecimal color</td>
|
<td>False/Hexadecimal color</td>
|
||||||
<td>Top left inset border colour.</td>
|
<td>Top left inset border colour.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h3>Classes</h3>
|
<h3>Classes</h3>
|
||||||
|
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
|
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="subsection">
|
<div class="subsection">
|
||||||
<h3>Demo site</h3>
|
<h3>Demo site</h3>
|
||||||
<p>Clone or download from Github.</p>
|
<p>Clone or download from Github.</p>
|
||||||
|
|
||||||
<pre><code>$ npm install
|
<pre><code>$ npm install
|
||||||
$ gulp serve
|
$ gulp serve
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="subsection">
|
||||||
|
<h3>Credits</h3>
|
||||||
|
<p>Inspired by the excellent <a href="https://nostalgic-css.github.io/NES.css/" target="_blank" rel="noopener">NES.css</a> which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required.</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="subsection">
|
<footer class="fullwidth fullwidth--sm footer">
|
||||||
<h3>Credits</h3>
|
<div class="container">
|
||||||
<p>Inspired by the excellent <a href="https://nostalgic-css.github.io/NES.css/" target="_blank" rel="noopener">NES.css</a> which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required.</a>
|
Made by Nigel O Toole - <a href="http://www.purestructure.com" target="_blank" rel="noopener">pure structure</a>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<footer class="fullwidth fullwidth--sm footer">
|
|
||||||
<div class="container">
|
|
||||||
Made by Nigel O Toole - <a href="http://www.purestructure.com" target="_blank" rel="noopener">pure structure</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user