mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-21 05:01:28 +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>
|
||||
|
||||
<div class="fullwidth fullwidth--lg">
|
||||
|
||||
<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, colour coding,inset borders.</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>
|
||||
@@ -26,7 +47,7 @@
|
||||
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||
<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--primary">Pixel primary</button>
|
||||
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||
@@ -44,5 +65,189 @@
|
||||
</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>
|
||||
</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",
|
||||
"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": {
|
||||
"node": ">=4"
|
||||
},
|
||||
|
||||
209
src/index.html
209
src/index.html
@@ -14,9 +14,30 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="fullwidth fullwidth--lg">
|
||||
|
||||
<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, colour coding,inset borders.</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>
|
||||
@@ -26,7 +47,7 @@
|
||||
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||
<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--primary">Pixel primary</button>
|
||||
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||
@@ -44,5 +65,189 @@
|
||||
</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>
|
||||
</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) {
|
||||
|
||||
$background-color-hover: darken($background-color, 5);
|
||||
// $border-inset-color: '';
|
||||
|
||||
@if not($border-color) {
|
||||
$border-color: darken($background-color, 20);
|
||||
@@ -137,9 +134,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Demo styles
|
||||
// ----- Demo styles -----
|
||||
.pixel-borders {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
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-size: 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
@@ -39,106 +39,156 @@ h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
h3, h4, h5, h6 {
|
||||
margin: 0 0 15px 0;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
h1 { font-size: 38px; }
|
||||
h2 { font-size: 34px; }
|
||||
h3 { font-size: 26px; }
|
||||
h4 { font-size: 20px; }
|
||||
h5 { font-size: 16px; }
|
||||
h6 { font-size: 14px; }
|
||||
h3, h4, h5, h6 {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
h5 { font-size: 1.25rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 400;
|
||||
strong, th {
|
||||
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 -----
|
||||
.fullwidth {
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth--sm {
|
||||
.container {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
.separator {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Header and footer -----
|
||||
.header {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
padding: .5rem 0;
|
||||
color: #fff;
|
||||
background-color: #1976D2;
|
||||
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 {
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
display: inline-block;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header--links {
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
margin-top: 7px;
|
||||
.btn-demo {
|
||||
margin: .5rem 0;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 7px;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// ----- Demo -----
|
||||
.demo {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.demo--intro {
|
||||
margin-top: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
p:last-child {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
// ----- Buttons -----
|
||||
.btn-demo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@@ -155,49 +205,15 @@ strong {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
.btn-demo--white {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
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