shawn-sandy/footer.html

## footer.html
<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>
</footer>

## grid.html
<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>

## header.html
<!doctype 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="./index.scss">
</head>

<body>

## inputs.html
<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">
    </div>

    <div role="listitem">
      <label for="email-address">Text Input Component</label>
      <input type="email" name="email-address" placeholder="Text input placeholder">
    </div>

    <div role="listitem">
      <label for="select">Text Input Component</label>
      <select name="select" id="">
        <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="" cols="30" rows="10"></textarea>
    </div>
  </div>
</section>

## list.html
<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>
    </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>

## main-content.html
<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>

## module-usage.md

      
    Raw
  

              module-usage.md
            
          
    Module usage

Import css or sass to use in your project.

SASS

@use "@shawnsandy/first-paint/src/components/badge";

React

@import '@shawnsandy/first-paint/src/v3/components/badge'

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@next/dist/css/components/badge.min.css">

  
## navbar.html
<nav role="navigation" aria-label="Main navigation">
  <section id="navigation">
    <div>
      <h1>
        <a href="#" aria-label="Site logo">
          <img src="/img/fp.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>
	<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>
	<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">
	</div>

	<div role="listitem">
	<label for="email-address">Text Input Component</label>
	<input type="email" name="email-address" placeholder="Text input placeholder">
	</div>

	<div role="listitem">
	<label for="select">Text Input Component</label>
	<select name="select" id="">
	<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="" cols="30" rows="10"></textarea>
	</div>
	</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>
	</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 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>
	<nav role="navigation" aria-label="Main navigation">
	<section id="navigation">
	<div>
	<h1>
	<a href="#" aria-label="Site logo">
	<img src="/img/fp.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>