mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-21 21:15:18 +02:00
Complete documentation and update demo site styles
This commit is contained in:
Nigel O'Toole
48
dist/index.html
vendored
48
dist/index.html
vendored
@@ -1,48 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="fullwidth fullwidth--lg">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<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 coded 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>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
444
dist/styles/pixel-borders.css
vendored
444
dist/styles/pixel-borders.css
vendored
File diff suppressed because one or more lines are too long
535
dist/styles/site.css
vendored
535
dist/styles/site.css
vendored
File diff suppressed because one or more lines are too long
209
docs/index.html
209
docs/index.html
@@ -14,9 +14,30 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="fullwidth fullwidth--lg">
|
|
||||||
|
<header class="header">
|
||||||
<div class="container">
|
<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, colour coding,inset borders.</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="fullwidth">
|
||||||
|
<div class="container separator">
|
||||||
|
|
||||||
<h2>Basic examples</h2>
|
<h2>Basic examples</h2>
|
||||||
<div class="pixel-borders pixel-borders--1">Pixel border 1</div>
|
<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>
|
<div class="pixel-borders pixel-borders--1 pixel-borders--1-inset">Pixel inset 1</div>
|
||||||
@@ -26,7 +47,7 @@
|
|||||||
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<h2>Colour coded examples</h2>
|
<h2>Colour themed examples</h2>
|
||||||
<button class="pixel-borders pixel-box--light">Pixel light</button>
|
<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--primary">Pixel primary</button>
|
||||||
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||||
@@ -44,5 +65,189 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 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>
|
||||||
|
|
||||||
|
|
||||||
|
<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, // 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
|
||||||
|
);
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>pixel-borders</h3>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h3>pixel-box</h3>
|
||||||
|
<p>Options as above unless otherwise specified.</p>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<th>Property</th>
|
||||||
|
<th>Default</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
26
package.json
26
package.json
@@ -1,7 +1,31 @@
|
|||||||
{
|
{
|
||||||
"name": "pixel-borders",
|
"name": "pixel-borders",
|
||||||
"description": "A SASS mixin to create pixelated borders on elements.",
|
"description": "A SASS mixin to create pixelated borders on elements.",
|
||||||
"version": "0.1.0",
|
"version": "1.0.0",
|
||||||
|
|
||||||
|
"main": "src/styles/pixel-borders.scss",
|
||||||
|
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/NigelOToole/pixel-borders.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"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",
|
||||||
|
"pixel",
|
||||||
|
"pixelated",
|
||||||
|
"borders",
|
||||||
|
"css"
|
||||||
|
],
|
||||||
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
},
|
},
|
||||||
|
|||||||
209
src/index.html
209
src/index.html
@@ -14,9 +14,30 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="fullwidth fullwidth--lg">
|
|
||||||
|
<header class="header">
|
||||||
<div class="container">
|
<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, colour coding,inset borders.</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="fullwidth">
|
||||||
|
<div class="container separator">
|
||||||
|
|
||||||
<h2>Basic examples</h2>
|
<h2>Basic examples</h2>
|
||||||
<div class="pixel-borders pixel-borders--1">Pixel border 1</div>
|
<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>
|
<div class="pixel-borders pixel-borders--1 pixel-borders--1-inset">Pixel inset 1</div>
|
||||||
@@ -26,7 +47,7 @@
|
|||||||
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<h2>Colour coded examples</h2>
|
<h2>Colour themed examples</h2>
|
||||||
<button class="pixel-borders pixel-box--light">Pixel light</button>
|
<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--primary">Pixel primary</button>
|
||||||
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||||
@@ -44,5 +65,189 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 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>
|
||||||
|
|
||||||
|
|
||||||
|
<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, // 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
|
||||||
|
);
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h3>pixel-borders</h3>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h3>pixel-box</h3>
|
||||||
|
<p>Options as above unless otherwise specified.</p>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<th>Property</th>
|
||||||
|
<th>Default</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -94,14 +94,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ($corner-size: 1, $border-size: 4px, $border-color: #000, $border-inset-color: false)
|
|
||||||
// ($border-inset-size: 4px, $border-inset-color: #ddd, $border-inset-sides: 'bottom-right', $border-inset-color-br: false, $border-inset-color-tl: false)
|
|
||||||
|
|
||||||
// Pixel box - Colours for border and inset are calulated using $background-color unless $border-color is passed
|
// Pixel box - Colours for border and inset are calculated using $background-color unless $border-color is passed
|
||||||
@mixin 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) {
|
@mixin 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) {
|
||||||
|
|
||||||
$background-color-hover: darken($background-color, 5);
|
$background-color-hover: darken($background-color, 5);
|
||||||
// $border-inset-color: '';
|
|
||||||
|
|
||||||
@if not($border-color) {
|
@if not($border-color) {
|
||||||
$border-color: darken($background-color, 20);
|
$border-color: darken($background-color, 20);
|
||||||
@@ -137,9 +134,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Demo styles -----
|
||||||
|
|
||||||
// Demo styles
|
|
||||||
.pixel-borders {
|
.pixel-borders {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
body {
|
body {
|
||||||
font-family: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
font-family: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@@ -39,106 +39,156 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
font-size: 60%;
|
font-size: 60%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
|
||||||
h3, h4, h5, h6 {
|
|
||||||
margin: 0 0 15px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 38px; }
|
h3, h4, h5, h6 {
|
||||||
h2 { font-size: 34px; }
|
margin: 0 0 .5rem 0;
|
||||||
h3 { font-size: 26px; }
|
}
|
||||||
h4 { font-size: 20px; }
|
|
||||||
h5 { font-size: 16px; }
|
h1 { font-size: 2.5rem; }
|
||||||
h6 { font-size: 14px; }
|
h2 { font-size: 2rem; }
|
||||||
|
h3 { font-size: 1.75rem; }
|
||||||
|
h4 { font-size: 1.5rem; }
|
||||||
|
h5 { font-size: 1.25rem; }
|
||||||
|
h6 { font-size: 1rem; }
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 15px 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong, th {
|
||||||
font-weight: 400;
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, code {
|
||||||
|
font-family: 'Cutive Mono', monospace;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 1rem;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ----- Layout -----
|
// ----- Layout -----
|
||||||
|
.fullwidth {
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullwidth--sm {
|
||||||
|
.container {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
margin-right: auto;
|
margin: 0 auto;
|
||||||
margin-left: auto;
|
padding: 0 1rem;
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subsection {
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ----- Header and footer -----
|
// ----- Header and footer -----
|
||||||
.header {
|
.header {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px 0;
|
padding: .5rem 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #1976D2;
|
background-color: #1976D2;
|
||||||
box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 25px;
|
font-size: 1.75rem;
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header--links {
|
.header--links {
|
||||||
|
|
||||||
.btn {
|
.btn-demo {
|
||||||
margin: 0;
|
margin: .5rem 0;
|
||||||
margin-top: 7px;
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-left: 7px;
|
margin-left: .5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
float: right;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ----- Demo -----
|
|
||||||
.demo {
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo--intro {
|
// ----- Buttons -----
|
||||||
margin-top: 20px;
|
.btn-demo {
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
|
|
||||||
p:last-child {
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@@ -155,49 +205,15 @@ strong {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-white {
|
.btn-demo--white {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #fff;
|
border-color: #fff;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.install .btn {
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-bottom: 15px;
|
// ----- Utilities -----
|
||||||
|
.m-0 {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 15px;
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
overflow: auto;
|
|
||||||
font-family: 'Cutive Mono', monospace;
|
|
||||||
font-size: 14px;
|
|
||||||
word-break: break-all;
|
|
||||||
word-wrap: break-word;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ----- Breakpoint examples -----
|
|
||||||
|
|
||||||
// Breakpoints up
|
|
||||||
|
|
||||||
// Small devices (landscape phones, 576px and up)
|
|
||||||
@media (min-width: 576px) { }
|
|
||||||
|
|
||||||
|
|
||||||
// Medium devices (tablets, 768px and up)
|
|
||||||
@media (min-width: 768px) { }
|
|
||||||
|
|
||||||
|
|
||||||
// Large devices (desktops, 992px and up)
|
|
||||||
@media (min-width: 992px) { }
|
|
||||||
|
|
||||||
|
|
||||||
// Extra large devices (large desktops, 1200px and up)
|
|
||||||
@media (min-width: 1200px) { }
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user