2026-01-25 16:23:38 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Example</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 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no-margin {margin:0}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body >
|
|
|
|
|
<article class="container">
|
|
|
|
|
<header>
|
|
|
|
|
<section class="no-margin">
|
|
|
|
|
<nav class="underline">
|
|
|
|
|
<strong class="text-primary brand">
|
|
|
|
|
STYLELITE
|
|
|
|
|
<span class="text-secondary">CSS</span>
|
|
|
|
|
</strong>
|
|
|
|
|
<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><theme-toggle /></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<p>
|
|
|
|
|
<div class="grid space">
|
|
|
|
|
<div class="primary"> </div>
|
|
|
|
|
<div class="default"> </div>
|
|
|
|
|
<div class="border"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
</p>
|
|
|
|
|
<hr>
|
|
|
|
|
</section>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="overview"></a>
|
|
|
|
|
<h2 class="underline">Overview</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
<kbd>DIV</kbd> is not the only tag available to your designs.
|
|
|
|
|
<abbr title="progressive classless css">Stylelite</abbr> mimics traditional <kbd>.container</kbd> class by just using a <kbd>MAIN</kbd> tag,
|
|
|
|
|
which by default centers your content to an <strong>1140px</strong> width.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Need to divide major sections of your code, eh...use <kbd>SECTION</kbd> tag.
|
|
|
|
|
Need little extra content flair, wrap in an <kbd>ARTICLE</kbd> tag.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="type"></a>
|
|
|
|
|
<h2 class="underline">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>
|
|
|
|
|
<kbd>P</kbd>
|
|
|
|
|
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>
|
|
|
|
|
<kbd>STRONG</kbd>
|
|
|
|
|
<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><kbd>H1</kbd> Heading...</h1>
|
|
|
|
|
<h2><kbd>H2</kbd> Heading...</h2>
|
|
|
|
|
<h3><kbd>H3</kbd> Heading...</h3>
|
|
|
|
|
<h4><kbd>H4</kbd> Heading...</h4>
|
|
|
|
|
<h5><kbd>H5</kbd> Heading...</h5>
|
|
|
|
|
<h6><kbd>H6</kbd> Heading...</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p><kbd>P</kbd> can simply be a paragraph</p>
|
|
|
|
|
<p><kbd>A</kbd> can be a <a href="./">link</a></p>
|
|
|
|
|
<p><kbd>STRONG</kbd> can be <strong>bold</strong></p>
|
|
|
|
|
<p><kbd>U</kbd> can be <u>underlined</u></p>
|
|
|
|
|
<p><kbd>EM</kbd> can be <em>emphasized</em></p>
|
|
|
|
|
<p><kbd>KBD</kbd> acts like a <kbd>tag</kbd></p>
|
|
|
|
|
<p><kbd>SMALL</kbd> can be <small>small</small></p>
|
|
|
|
|
<p><kbd>CODE</kbd> can be <code>code</code></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<kbd>IMG</kbd>
|
|
|
|
|
</div>
|
|
|
|
|
<img src='https://placehold.co/340x280' alt='Example image'>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<kbd>HR</kbd>
|
|
|
|
|
<hr>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="buttons"></a>
|
|
|
|
|
<h2 class="underline">Buttons</h2>
|
|
|
|
|
<p>
|
|
|
|
|
<kbd>button</kbd> can be customize by applying a color class.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="grid">
|
|
|
|
|
<a href="#" class="button">Link</a>
|
|
|
|
|
<button>Default</button>
|
|
|
|
|
<button class="primary">.primary</button>
|
|
|
|
|
<button class="secondary">.secondary</button>
|
|
|
|
|
<button class="success">.success</button>
|
|
|
|
|
<button class="warning">.warning</button>
|
|
|
|
|
<button class="danger">.danger</button>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="nav"></a>
|
|
|
|
|
<h2 class="underline">Navigation</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
<kbd>nav</kbd> provides a convenient way to build navigation systems
|
|
|
|
|
using <kbd>ul</kbd> and <kbd>li</kbd>. Internally elements <kbd>nav</kbd>
|
|
|
|
|
divide, so you can put an empty <kbd>div</kbd> before the <kbd>ul</kbd>
|
|
|
|
|
to make the nav on the right side or <kbd>div</kbd> on both sides
|
|
|
|
|
to center
|
|
|
|
|
</p>
|
|
|
|
|
<nav class="primary">
|
|
|
|
|
<ul>
|
|
|
|
|
<li>One</li>
|
|
|
|
|
<li>Two</li>
|
|
|
|
|
<li>Three</li>
|
|
|
|
|
<li>Four</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<nav class="default">
|
|
|
|
|
<div></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>One</li>
|
|
|
|
|
<li>Two</li>
|
|
|
|
|
<li>Three</li>
|
|
|
|
|
<li>Four</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<nav class="dark">
|
|
|
|
|
<div></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>One</li>
|
|
|
|
|
<li>Two</li>
|
|
|
|
|
<li>Three</li>
|
|
|
|
|
<li>Four</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div></div>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="forms"></a>
|
|
|
|
|
<h2 class="underline">Forms</h2>
|
|
|
|
|
<form class="">
|
|
|
|
|
<details>
|
|
|
|
|
<summary>Details Summary</summary>
|
|
|
|
|
<div>
|
|
|
|
|
Default <kbd>details</kbd> and <kbd>summary</kbd> behavior.
|
|
|
|
|
wrap content in tag, like <kbd>div</kbd>
|
|
|
|
|
</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>
|
2026-01-25 19:53:16 +00:00
|
|
|
<div class="group">
|
|
|
|
|
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
|
|
|
|
<i class="primary ft-mail"></i>
|
|
|
|
|
</div>
|
2026-01-25 16:23:38 +00:00
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
<input class="right" type="submit"></input>
|
|
|
|
|
</p>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="table"></a>
|
|
|
|
|
<h2 class="underline">Tables</h2>
|
|
|
|
|
<p><kbd>TABLE</kbd> is clean by default</p>
|
|
|
|
|
<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 class="underline">Components</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
These are native UI components that typically do not have any
|
|
|
|
|
style
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<section class="border">
|
|
|
|
|
<header class="primary">
|
|
|
|
|
<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="default">
|
|
|
|
|
<button class="fill" id="dialog">Open Modal</button>
|
|
|
|
|
</footer>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="grid border">
|
|
|
|
|
<div class="center">
|
|
|
|
|
More...
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="grid border">
|
|
|
|
|
<div class="center">
|
|
|
|
|
More...
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<dialog>
|
|
|
|
|
<header class="primary">Default Dialog Modal</header>
|
|
|
|
|
<footer>
|
|
|
|
|
<form method="dialog">
|
|
|
|
|
<button>Close</button>
|
|
|
|
|
</form>
|
|
|
|
|
</footer>
|
|
|
|
|
</dialog>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h2 class="underline">Dark Mode</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Add <code>data-theme="dark"</code> to your <kbd>html</kbd> tag
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<br>
|
|
|
|
|
<section>
|
|
|
|
|
<h2 class="underline">Custom Theme</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Create a custom theme by overriding variables in <kbd>:root</kbd> stylesheet
|
|
|
|
|
</p>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Variable</th>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
<th>Default</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>--primary</code></th>
|
|
|
|
|
<td>Designing a site around primary theme color, set here</td>
|
|
|
|
|
<td><code>#5499C7</code></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>--radius</code></th>
|
|
|
|
|
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
|
|
|
|
<td><code>.3rem</code></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<a name="utilities"></a>
|
|
|
|
|
<h2 class="underline">Utilities</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
|
|
|
|
|
<kbd>input</kbd> groups provides form element designs
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
</article>
|
|
|
|
|
<footer class="primary"> </footer>
|
|
|
|
|
<script>
|
|
|
|
|
const $ = document.querySelector.bind(document);
|
|
|
|
|
|
|
|
|
|
$("#dialog").addEventListener("click", () => (
|
|
|
|
|
$("dialog").showModal()
|
|
|
|
|
));
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
