stylelite/examples/overview.html

393 lines
15 KiB
HTML
Raw Normal View History

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">
<style>
</style>
</head>
<body>
<main>
<section>
<nav>
<strong>Styles</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="#grid">Grid Layout</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#utilities">Utilities</a></li>
<li></li>
</ul>
</nav>
<br>
<div>
<h1 style="color: var(--mg);">
STYLELITE
<span style="color: var(--fg);">CSS</span>
</h1>
<div class="subtitle">CSS for Minimalist</div>
</div>
<br>
<div class="grid">
<div style="background: var(--fg);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div>
</section>
<section>
<a name="overview"></a>
<h2 class="underline">Overview</h2>
<div>
<code>DIV</code> is not the only tag avalible to your designs.
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>
<p><code>EM</code> can be <em>emphasised</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='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>
<input type='email' name='email' id='email' placeholder='email@example.com'>
</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'>Prefered theme</label>
<select name="selected" id="">
<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>
<label for='remember'>
<input type='checkbox' name='remember' id='remember' checked>
Remember me
</label>
</div>
<div>
<input class="right" type="submit"></input>
</div>
</form>
</section>
<br>
<section>
<a name="buttons"></a>
<h3>Buttons</h3>
<div class="grid">
<button>Button</button>
<button class="default">Default</button>
<button class="primary">Primary</button>
<button disabled>Disabled</button>
<button class="link">Link</button>
</div>
<div class="grid">
<button class="default">Default</button>
<button class="primary">Primary</button>
<button class="info">Info</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>
<p>
The flex-based grid system dynamicly divides content on the number of
child elements under <code>row</code>, be that a plain <code>div</code>(auto) or <code>col-*</code>
<p>
column sizes range from <code>col-1</code> to <code>col-5</code>
</p>
<p>
a <code>col-5</code> is 5x <code>col-1</code>
</p>
<blockquote>
if <code>col-*</code> is not defined on a <code>div</code>, it is considered a <code>col-1</code>
</blockquote>
</p>
<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>
<article>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</article>
</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>
<td>designed for tigher fit under headings</td>
</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>