mirror of https://github.com/n2geoff/stylelite.git
382 lines
14 KiB
HTML
382 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stylelite</title>
|
|
<link rel="stylesheet" href="../src/main.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
|
<script src="../src/components/theme-toggle.js"></script>
|
|
<style>
|
|
.fill {height: 100%; width: 100%}
|
|
.grid-center {align-self: center; justify-self: center;}
|
|
.border {border: 1px solid var(--theme)}
|
|
.no-space {margin: 0; padding:0;}
|
|
header, footer {line-height: 3rem; height: 3rem;}
|
|
</style>
|
|
</head>
|
|
<body class="">
|
|
<main>
|
|
<section>
|
|
<nav>
|
|
<h2 class="no-space" style="color: var(--mg);">
|
|
STYLELITE
|
|
<span style="color: var(--fg);">CSS</span>
|
|
</h2>
|
|
<ul>
|
|
<li><a href="#type">Typography</a></li>
|
|
<li><a href="#forms">Forms</a></li>
|
|
<li><a href="#table">Tables</a></li>
|
|
<li><a href="#components">Components</a></li>
|
|
<li><a href="#utilities">Utilities</a></li>
|
|
<li><a href="#customize">Customize</a></li>
|
|
<li><theme-toggle /></li>
|
|
</ul>
|
|
</nav>
|
|
<p>
|
|
<div class="grid space">
|
|
<div style="background: var(--theme);"> </div>
|
|
<div style="background: var(--mg);"> </div>
|
|
<div class="border"> </div>
|
|
</div>
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<a name="overview"></a>
|
|
<h2>Overview</h2>
|
|
<div>
|
|
<p>
|
|
<code>DIV</code> is not the only tag available to your designs.
|
|
Mimic traditional <code>.container</code> class by just using a <code>MAIN</code> tag,
|
|
which by default centers your content to an 1140 width.
|
|
</p>
|
|
<p>
|
|
Need to divide major sections of your code, eh...use <code>SECTION</code> tag.
|
|
Need little extra content flair, wrap in an <code>ARTICLE</code> tag.
|
|
</p>
|
|
<p>
|
|
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<a name="type"></a>
|
|
<h2>Typography</h2>
|
|
<div>
|
|
<blockquote>
|
|
The alternative to good design is always bad design. there is no such thing as no design.
|
|
Simplicity carried to an extreme, becomes elegance.
|
|
<cite>-- Adam Judge</cite>
|
|
</blockquote>
|
|
<p>
|
|
<code>P</code>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu,
|
|
eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante,
|
|
id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in
|
|
odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
|
facilisi.
|
|
</p>
|
|
<p>
|
|
<code>STRONG</code>
|
|
<strong id="generated">Generated 1 paragraph, 52 words, 354 bytes of
|
|
<a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
|
|
</strong>
|
|
</p>
|
|
<hr>
|
|
</div>
|
|
<div class="grid">
|
|
<div>
|
|
<h1><code>H1</code> Heading...</h1>
|
|
<h2><code>H2</code> Heading...</h2>
|
|
<h3><code>H3</code> Heading...</h3>
|
|
<h4><code>H4</code> Heading...</h4>
|
|
<h5><code>H5</code> Heading...</h5>
|
|
<h6><code>H6</code> Heading...</h6>
|
|
</div>
|
|
<div>
|
|
<p><code>P</code> can simply be a paragraph</p>
|
|
<p><code>A</code> can be a <a href="./">link</a></p>
|
|
<p><code>STRONG</code> can be <strong>bold</strong></p>
|
|
<p><code>U</code> can be <u>underlined</u></p>
|
|
<p><code>EM</code> can be <em>emphasized</em></p>
|
|
<p><code>SMALL</code> can be <small>small</small></p>
|
|
<p><code>CODE</code> can be <code>code</code></p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<code>HR</code>
|
|
<hr>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<code>IMG</code>
|
|
</div>
|
|
<img src='https://placehold.co/340x280' alt='Example image'>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<a name="lists"></a>
|
|
<h2>Lists</h2>
|
|
<article class="grid">
|
|
<div>
|
|
<code>UL</code>
|
|
<ul>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<code>OL</code>
|
|
<ol>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
<li><code>LI</code>List Item</li>
|
|
</ol>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section>
|
|
<a name="forms"></a>
|
|
<h2>Forms</h2>
|
|
<form class="">
|
|
<details>
|
|
<summary>Details Summary</summary>
|
|
<div>
|
|
Default <code>details</code> and <code>summary</code> behavior.
|
|
wrap content in tag, like <code>div</code>
|
|
</div>
|
|
</details>
|
|
|
|
<div>
|
|
<label for='id'>User id (read only)</label>
|
|
<input name='id' id='id' value='R2D2' readonly>
|
|
</div>
|
|
<div>
|
|
<label for='email'>Email</label>
|
|
<div class="group">
|
|
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
|
<label class="addon">
|
|
<i class="ft-mail"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for='password'>Password</label>
|
|
<input type='password' name='password' id='password'>
|
|
</div>
|
|
|
|
<div>
|
|
<label for='disabled'>Random disabled input</label>
|
|
<input disabled name='disabled' id='disabled'
|
|
placeholder='Because why not?'>
|
|
</div>
|
|
|
|
<div>
|
|
<label for='selected'>Preferred theme</label>
|
|
<select name="selected" id="selected">
|
|
<option value="">Choose One</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for='about'>About me</label>
|
|
<textarea name='about' id='about'
|
|
placeholder='I am a textarea...'></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<input type='checkbox' name='remember' id='remember' checked>
|
|
<label for='remember'>
|
|
Remember Me
|
|
</label>
|
|
<input class="right" type="submit"></input>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<section>
|
|
<a name="buttons"></a>
|
|
<h2>Buttons</h2>
|
|
<div class="grid">
|
|
<button>Default</button>
|
|
<button disabled>Disabled</button>
|
|
<button class="outline">Outline</button>
|
|
<button class="link">Link</button>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<a name="table"></a>
|
|
<h2>Tables</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>One</th>
|
|
<th>Two</th>
|
|
<th>There</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<a name="components"></a>
|
|
<h2>Components</h2>
|
|
|
|
<p>
|
|
These are native UI components that typically do not have any
|
|
style
|
|
</p>
|
|
|
|
<div class="grid">
|
|
<section class="border">
|
|
<header style="background: var(--theme); padding: 0 1rem; color: #FFF">
|
|
<strong>Dialogs</strong>
|
|
</header>
|
|
<main>
|
|
A native modal UI element exists as <code>dialog</code>
|
|
and is supported with a little javascript.
|
|
<p>
|
|
SEE: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_NEW">
|
|
MDN Documentation
|
|
</a>
|
|
</p>
|
|
</main>
|
|
<footer class="grid">
|
|
<button class="fill" id="dialog">Open Modal</button>
|
|
</footer>
|
|
</section>
|
|
<section class="grid border">
|
|
<div class="grid-center">
|
|
More...
|
|
</div>
|
|
</section>
|
|
<section class="grid border">
|
|
<div class="grid-center">
|
|
More...
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<dialog>
|
|
<p>Default Dialog Modal</p>
|
|
<form method="dialog">
|
|
<button>Close</button>
|
|
</form>
|
|
</dialog>
|
|
</section>
|
|
|
|
<section>
|
|
<a name="utilities"></a>
|
|
<h2>Misc Utility Classes</h2>
|
|
<table>
|
|
<tr>
|
|
<th><code>.grid</code></th>
|
|
<td>
|
|
a <code>display:grid</code> layout helper, that acts a lot like
|
|
<code>.row</code> but without the column control
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.group</code></th>
|
|
<td>
|
|
really just <code>display:flex</code> however used on
|
|
<code>input</code> groups provides form element designs
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<a name="customize"></a>
|
|
<hr>
|
|
<h1>Customize</h1>
|
|
<hr>
|
|
<p>
|
|
<code>/extras</code> provides some useful styles that complement
|
|
<strong>Stylelite</strong> and have been removed to keep it focused
|
|
closer to a classless css solution -- and smaller.
|
|
</p>
|
|
<blockquote>
|
|
<strong>NOTE:</strong> Some extras exist in <strong>Stylelite</strong>,
|
|
but are also useful in isolation
|
|
</blockquote>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>CSS Variables</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<th><code>--theme</code> (color)</th>
|
|
<td>Designing a site around a theme color, set here</td>
|
|
<td><code>steelblue</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>--radius</code></th>
|
|
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
|
<td><code>0rem</code></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>Dark Mode</h4>
|
|
Add <code>data-theme="dark"</code> to your <code>html</code> tag
|
|
</section>
|
|
|
|
<section>
|
|
<h4>Colors</h4>
|
|
<p>
|
|
Customize with your own styles or some examples available extras like
|
|
</p>
|
|
|
|
<blockquote>
|
|
Bootstrap-inspired color classes found
|
|
in <code>extras/colors.css</code>
|
|
</blockquote>
|
|
|
|
<div class="grid">
|
|
<button class="info">Info</button>
|
|
<button class="warning">Warning</button>
|
|
<button class="danger">Danger</button>
|
|
<button class="success">Success</button>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<script>
|
|
const $ = document.querySelector.bind(document);
|
|
|
|
$("#dialog").addEventListener("click", () => (
|
|
$("dialog").showModal()
|
|
));
|
|
</script>
|
|
</body>
|
|
</html> |