2023-12-22 20:52:37 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" data-theme="">
|
|
|
|
|
<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/stylelite.css">
|
2024-01-20 22:19:06 +00:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
2023-12-22 20:52:37 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<section>
|
|
|
|
|
<nav>
|
2024-01-20 22:19:06 +00:00
|
|
|
<h2 class="no-space" style="color: var(--mg);">
|
2024-01-19 23:43:53 +00:00
|
|
|
STYLELITE
|
|
|
|
|
<span style="color: var(--fg);">CSS</span>
|
2024-01-20 22:19:06 +00:00
|
|
|
</h2>
|
2023-12-22 20:52:37 +00:00
|
|
|
<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="#grid">Grid Layout</a></li>
|
|
|
|
|
<li><a href="#components">Components</a></li>
|
|
|
|
|
<li><a href="#utilities">Utilities</a></li>
|
|
|
|
|
<li></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
2024-01-20 22:19:06 +00:00
|
|
|
<p>
|
|
|
|
|
<div class="grid space">
|
|
|
|
|
<div style="background: var(--theme);"> </div>
|
|
|
|
|
<div style="background: var(--gray);"> </div>
|
|
|
|
|
<div class="outline"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
</p>
|
2023-12-22 20:52:37 +00:00
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="overview"></a>
|
|
|
|
|
<h2 class="underline">Overview</h2>
|
|
|
|
|
<div>
|
2024-01-28 18:20:43 +00:00
|
|
|
<code>DIV</code> is not the only tag available to your designs.
|
2023-12-22 20:52:37 +00:00
|
|
|
Mimic traditional <code>.container</code> class by just using a <code>MAIN</code> tag.
|
|
|
|
|
<p></p>
|
|
|
|
|
Need to divide major sections of your code, eh...use <code>SECTION</code> tag.
|
|
|
|
|
<p></p>
|
|
|
|
|
And for that little extra content flair, wrap in an <code>ARTICLE</code> tag.
|
|
|
|
|
</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>
|
2024-01-28 18:20:43 +00:00
|
|
|
<p><code>EM</code> can be <em>emphasized</em></p>
|
2023-12-22 20:52:37 +00:00
|
|
|
<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='http://via.placeholder.com/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>
|
2024-01-20 22:19:06 +00:00
|
|
|
<div class="group">
|
|
|
|
|
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
|
|
|
|
<label class="addon">
|
|
|
|
|
<i class="ft-mail" style="color: #000"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2023-12-22 20:52:37 +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>
|
2024-01-19 23:43:53 +00:00
|
|
|
<label for='selected'>Preferred theme</label>
|
2024-01-20 22:19:06 +00:00
|
|
|
<select name="selected" id="selected">
|
2023-12-22 20:52:37 +00:00
|
|
|
<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>
|
2024-01-19 23:43:53 +00:00
|
|
|
<input type='checkbox' name='remember' id='remember' checked>
|
2023-12-22 20:52:37 +00:00
|
|
|
<label for='remember'>
|
2024-01-19 23:43:53 +00:00
|
|
|
Remember Me
|
2023-12-22 20:52:37 +00:00
|
|
|
</label>
|
|
|
|
|
<input class="right" type="submit"></input>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
<br>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="buttons"></a>
|
2024-01-20 19:30:29 +00:00
|
|
|
<h2>Buttons</h2>
|
2023-12-22 20:52:37 +00:00
|
|
|
<div class="grid">
|
2024-01-20 22:19:06 +00:00
|
|
|
<button>Default</button>
|
2023-12-22 20:52:37 +00:00
|
|
|
<button disabled>Disabled</button>
|
2024-01-20 22:19:06 +00:00
|
|
|
<button class="outline">Outline</button>
|
2023-12-22 20:52:37 +00:00
|
|
|
<button class="link">Link</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<button class="primary">Primary</button>
|
|
|
|
|
<button class="warning">Warning</button>
|
|
|
|
|
<button class="danger">Danger</button>
|
|
|
|
|
<button class="success">Success</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="grid"></a>
|
|
|
|
|
<h2>Grid System</h2>
|
2024-01-19 23:43:53 +00:00
|
|
|
<div>
|
2024-01-28 18:20:43 +00:00
|
|
|
The flex-based grid system dynamically divides content on the number of
|
2024-01-19 23:43:53 +00:00
|
|
|
child elements under <code>row</code>, be that a plain <code>div</code>(auto) or <code>col-*</code>.
|
2023-12-22 20:52:37 +00:00
|
|
|
|
2024-01-19 23:43:53 +00:00
|
|
|
Column sizes range from <code>col-1</code> to <code>col-5</code>
|
|
|
|
|
a <code>col-5</code> is 5x <code>col-1</code>
|
2023-12-22 20:52:37 +00:00
|
|
|
|
|
|
|
|
<blockquote>
|
|
|
|
|
if <code>col-*</code> is not defined on a <code>div</code>, it is considered a <code>col-1</code>
|
|
|
|
|
</blockquote>
|
2024-01-19 23:43:53 +00:00
|
|
|
</div>
|
2023-12-22 20:52:37 +00:00
|
|
|
<section>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center col-2">2</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center col-3">3</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center col-4">4</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="border center col-5">5</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
<div class="border center">auto</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="components"></a>
|
|
|
|
|
<h2>Components</h2>
|
|
|
|
|
|
2024-01-19 23:43:53 +00:00
|
|
|
<div class="grid center">
|
|
|
|
|
<div>
|
|
|
|
|
<article>
|
|
|
|
|
<header>Header</header>
|
|
|
|
|
<main>Content</main>
|
|
|
|
|
<footer>Footer</footer>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button>Modal</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
Something
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-12-22 20:52:37 +00:00
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<a name="utilities"></a>
|
|
|
|
|
<h2>Utility</h2>
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.content</code></th>
|
|
|
|
|
<td>adds uniform padding</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.left</code></th>
|
|
|
|
|
<td>float content left</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.right</code></th>
|
|
|
|
|
<td>float content right</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.center</code></th>
|
|
|
|
|
<td>text aligns content center</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.grid</code></th>
|
|
|
|
|
<td>dynamic grid layout helper</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.sm</code></th>
|
|
|
|
|
<td>reduces component size by half</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.lg</code></th>
|
|
|
|
|
<td>increase component size by 75%</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.outline</code></th>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.underline</code></th>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.border</code></th>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.spaceless</code></th>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.subtitle</code></th>
|
2024-01-28 18:20:43 +00:00
|
|
|
<td>designed for tighter fit under headings</td>
|
2023-12-22 20:52:37 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.fill</code></th>
|
|
|
|
|
<td>fills all available space</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><code>.clear</code></th>
|
|
|
|
|
<td> clear float fix</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
2022-06-26 18:28:31 +00:00
|
|
|
</html>
|
