pixel-borders
Version:
Sass mixin to add pixelated borders to HTML elements.
271 lines (218 loc) • 8.63 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixel borders - 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|Open+Sans:300,400|Press+Start+2P&display=swap">
<link rel="stylesheet" href="styles/pixel-borders.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="logo-text">Pixel borders</h1>
<div class="header-links">
<a href="https://github.com/NigelOToole/pixel-borders/archive/master.zip" class="btn-demo btn-demo--white">Download</a>
<a href="https://github.com/NigelOToole/pixel-borders" target="_blank" rel="noopener" class="btn-demo btn-demo--white">View on GitHub</a>
</div>
</div>
</header>
<div class="fullwidth">
<div class="container separator">
<h2 class="m-0">A Sass mixin to add pixelated borders to HTML elements, which can be customized for different sizes, styles and colour coding.</h2>
</div>
</div>
<div class="fullwidth">
<div class="container separator">
<h2>Basic examples</h2>
<div class="pixel-borders pixel-borders--1">Pixel border 1</div>
<div class="pixel-borders pixel-borders--1 pixel-borders--1-inset">Pixel inset 1</div>
<br>
<div class="pixel-borders pixel-borders--2">Pixel border 2</div>
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
<br><br>
<h2>Colour themed examples</h2>
<button class="pixel-borders pixel-box--light">Pixel light</button>
<button class="pixel-borders pixel-box--primary">Pixel primary</button>
<button class="pixel-borders pixel-box--success">Pixel success</button>
<button class="pixel-borders pixel-box--warning">Pixel warning</button>
<button class="pixel-borders pixel-box--error">Pixel error</button>
<br><br>
<h2>Customisation examples</h2>
<button class="pixel-borders pixel-box--light-custom">Custom inset</button>
<button class="pixel-borders pixel-box--primary-custom">No inset</button>
<button class="pixel-borders pixel-box--success-custom">Highlight</button>
<button class="pixel-borders pixel-box--warning-custom">Inset & Highlight</button>
<button class="pixel-borders pixel-box--error-custom">Custom border</button>
</div>
</div>
<div class="fullwidth">
<div class="container separator">
<div class="subsection">
<h2>Installation</h2>
<pre>
<code>$ npm install pixel-borders --save-dev</code>
</pre>
</div>
<div class="subsection">
<h2>Usage</h2>
<h3>Import</h3>
<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>
<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>
<h4>Pixel borders mixin options</h4>
<pre><code>// 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,
$border-inset-color-br: false,
$border-inset-color-tl: false
);
</code></pre>
<h3>pixel-borders</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td>1</td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td>4px</td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>#000</td>
<td>Hexadecimal color</td>
<td>Border colour.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>false</td>
<td>False/Hexadecimal color</td>
<td>Add a inset border to the bottom right in this colour.</td>
</tr>
</table>
</div>
<h3>pixel-box</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td></td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td></td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$background-color</code></td>
<td></td>
<td>Hexadecimal color</td>
<td>Background colour for the box, this is used as a base for colour theme.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal colour</td>
<td>Border colour.</td>
</tr>
<tr>
<td><code>$border-inset</code></td>
<td>true</td>
<td>Boolean</td>
<td>Add a inset border.</td>
</tr>
<tr>
<td><code>$border-inset-size</code></td>
<td><code>$border-size</code></td>
<td>False/Number(px)</td>
<td>Inset border size.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset-sides</code></td>
<td>'bottom-right'</td>
<td>String</td>
<td>Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'.</td>
</tr>
<tr>
<td><code>$border-inset-sides-br</code></td>
<td><code>$border-inset-color</code></td>
<td>False/Hexadecimal color</td>
<td>Bottom right inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset-sides-tl</code></td>
<td>Lightened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Top left inset border colour.</td>
</tr>
</table>
</div>
<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>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 class="subsection">
<h3>Demo site</h3>
<p>Clone or download from Github.</p>
<pre><code>$ npm install
$ gulp serve
</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>
<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>
</html>