geoff
/
stylelite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
stylelite/examples/overview.html

394 lines
15 KiB
HTML
Raw Normal View History

styling overhaul & colors
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">
label.addon, rework --primary, tweaks & removals
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">
styling overhaul & colors
2023-12-22 20:52:37 +00:00
<style>
</style>
</head>
<body>
<main>
<section>
<nav>
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
<h2 class="no-space" style="color: var(--mg);">
next version
2024-01-19 23:43:53 +00:00
STYLELITE
<span style="color: var(--fg);">CSS</span>
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
</h2>
styling overhaul & colors
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>
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
<p>
<div class="grid space">
<div style="background: var(--theme);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div>
</p>
styling overhaul & colors
2023-12-22 20:52:37 +00:00
</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>
label.addon, rework --primary, tweaks & removals
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>
styling overhaul & colors
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>
next version
2024-01-19 23:43:53 +00:00
<label for='selected'>Preferred theme</label>
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
<select name="selected" id="selected">
styling overhaul & colors
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>
next version
2024-01-19 23:43:53 +00:00
<input type='checkbox' name='remember' id='remember' checked>
styling overhaul & colors
2023-12-22 20:52:37 +00:00
<label for='remember'>
next version
2024-01-19 23:43:53 +00:00
Remember Me
styling overhaul & colors
2023-12-22 20:52:37 +00:00
</label>
<input class="right" type="submit"></input>
</div>
</form>
</section>
<br>
<section>
<a name="buttons"></a>
reducing vars
2024-01-20 19:30:29 +00:00
<h2>Buttons</h2>
styling overhaul & colors
2023-12-22 20:52:37 +00:00
<div class="grid">
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
<button>Default</button>
styling overhaul & colors
2023-12-22 20:52:37 +00:00
<button disabled>Disabled</button>
label.addon, rework --primary, tweaks & removals
2024-01-20 22:19:06 +00:00
<button class="outline">Outline</button>
styling overhaul & colors
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>
next version
2024-01-19 23:43:53 +00:00
<div>
styling overhaul & colors
2023-12-22 20:52:37 +00:00
The flex-based grid system dynamicly divides content on the number of
next version
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>.
styling overhaul & colors
2023-12-22 20:52:37 +00:00
next version
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>
styling overhaul & colors
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>
next version
2024-01-19 23:43:53 +00:00
</div>
styling overhaul & colors
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>
next version
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>
styling overhaul & colors
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>
<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>
add example
2022-06-26 18:28:31 +00:00
</html>