@shawnsandy/mix
Version:
AtomMix--A toolkit for generating utility classes, components and styles-sheets for your design system, style-guide or website from SASS MAPS
284 lines (262 loc) • 8.75 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstPaint</title>
<meta name="description" content="Atomix">
<meta name="author" content="Shawn Sandy">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/src.e31bb0bc.css"><link rel="stylesheet" href="/styles.7b0c6d85.css"></head>
<body></body></html>
<nav role="navigation" aria-label="Main navigation">
<section id="navigation">
<div>
<h1>
<a href="#" aria-label="Site logo">
<img src="/fp.c54f02e3.svg" alt="">
<span aria-label="logo text">FirstPaint</span>
</a>
</h1>
</div>
<div>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="http://">Documentation</a>
<a href="http://">Repository</a>
<a href="#">Contact Us</a>
</div>
</section>
</nav>
<header>
<section role="banner">
<div>
<img src="/fp.c54f02e3.svg" alt="">
<h2>Lightweight, Fast, Accessible, Inclusive</h2>
<p><span>Easy to use, accessibility focused, classless, semantic HTML elements & components</span></p>
<a href="#" role="button" aria-label="Add word, cta action, to your button title">
<span>Get Started</span></a>
</div>
</section>
</header>
<!-- feature section -->
<section aria-label="feature">
<div role="list">
<div role="listitem">
<h3 class="symbol-asterik-after">Feature...</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consectetur assumenda, porro repudiandae
repellendus placeat iure officia inventore sint voluptas et blanditiis facilis voluptate quas accusamus itaque
ea, corporis odio.
</div>
<div role="listitem">
<h3>Feature...</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consectetur assumenda, porro repudiandae
repellendus placeat iure officia inventore sint voluptas et blanditiis facilis voluptate quas accusamus itaque
ea, corporis odio.
</div>
<div role="listitem">
<h3>Feature...</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consectetur assumenda, porro repudiandae
repellendus placeat iure officia inventore sint voluptas et blanditiis facilis voluptate quas accusamus itaque
ea, corporis odio.
</div>
<div role="listitem">
<h3>Feature...</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consectetur assumenda, porro repudiandae
repellendus placeat iure officia inventore sint voluptas et blanditiis facilis voluptate quas accusamus itaque
ea, corporis odio.
</div>
<div role="listitem">
<h3>Feature...</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consectetur assumenda, porro repudiandae
repellendus placeat iure officia inventore sint voluptas et blanditiis facilis voluptate quas accusamus itaque
ea, corporis odio.
</div>
</div>
</section>
<hr>
<main>
<section id="articles">
<article>
<h2>Sample Article 1</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae assumenda odio rem maiores ad minima
doloribus. Pariatur quibusdam dolorum distinctio repellendus vero natus explicabo mollitia ea, nemo sunt
voluptatibus eaque!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae assumenda odio rem maiores ad minima
doloribus. Pariatur quibusdam dolorum distinctio repellendus vero natus explicabo mollitia ea, nemo sunt
voluptatibus eaque!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae assumenda odio rem maiores ad minima
doloribus. Pariatur quibusdam dolorum distinctio repellendus vero natus explicabo mollitia ea, nemo sunt
voluptatibus eaque!
</p>
<footer>
<p>
<a href="" role="button">Read more</a>
</p>
</footer>
</article>
<aside>
<h4>Sidebar</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos error, quas at facilis temporibus optio rem,
doloremque, modi numquam commodi illum cumque. Sit eveniet, quod expedita libero obcaecati a laudantium.
</p>
</aside>
</section>
</main>
<section>
<div aria-label="get-started">
<h4 id="get-started">Get Started</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque beatae officiis dicta accusantium. Nulla
recusandae in exercitationem inventore, minus dignissimos placeat, ratione et minima aspernatur alias, aut
ipsum
quasi nihil?</p>
</div>
</section>
<section aria-label="View and copy components">
<div>
<h3>Components</h3>
<label>
<p>
<span>
Navigation component
</span>
</p>
<code>
<textarea><nav role="navigation" aria-label="Main navigation">
<section id="navigation">
<div>
<h1>
<a href="#" aria-label="Site logo">
<img src="/fp-icon.5c90b6c0.svg" alt="">
<span aria-label="logo text">FirstPaint</span>
</a>
</h1>
</div>
<div>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">...</a>
</div>
</section>
</nav>
</textarea>
</code>
</label>
</div>
</section>
<section id="list-component">
<div role="list">
<div role="listitem">
<aside>
<p>
<span>Unordered List</span>
</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</aside></div>
<div role="listitem">
<aside>
<p>
<span>Ordered List</span>
</p>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</aside>
</div>
<div role="listitem">
<aside>
<p>
<span>Unordered List (unstyled)</span>
<!-- <code><span>span\ul</span></code> -->
</p>
<span>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</span>
</aside>
</div>
<div role="listitem">
<aside>
<p>
<span>Ordered List (unstyled)</span>
</p>
<span>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</span>
</aside>
</div>
</div>
</section>
<section>
<div>
<span>
<p>Input components</p>
</span>
</div>
<div role="list">
<div role="listitem">
<label for="input">Text Input Component</label>
<input type="text" placeholder="Text input placeholder" id="input">
</div>
<div role="listitem">
<label for="email-address">Text Input Component</label>
<input type="email" name="email-address" placeholder="Text input placeholder" id="email-address">
</div>
<div role="listitem">
<label for="select">Text Input Component</label>
<select name="select" id="select">
<option value="">Select</option>
<option value="">Options</option>
<option value="">Options</option>
</select>
</div>
</div>
<div>
<div>
<label for="textarea">Textarea Component</label>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</div>
</div>
</section>
<footer>
<section>
<p>
<small>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odit expedita aliquam commodi incidunt nam
maiores eum sunt minima corrupti dolore, fugiat veritatis sit, nobis harum ducimus repudiandae quos
laboriosam?
</small>
</p>
</section>
<script src="/src.e31bb0bc.js"></script>
<script src="/styles.7b0c6d85.js"></script>
</footer>
.