Pico Flexbox Admin Template

by ethanpil

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<header>

  <span><i class="fa fa-user" aria-hidden="true"></i> </span>
  John Doe
  <a></a>

</header>

<main>
  <aside>
    <nav>
      <ul>
        <li><span>Navigation</span></li>
        <li><a class="active"><i class="fa fa-th" aria-hidden="true"></i> Dashboard</a></li>
        <li><a><i class="fa fa-area-chart" aria-hidden="true"></i> Statistics</a></li>
        <li><a><i class="fa fa-road" aria-hidden="true"></i> Roadmap</a></li>
        <li><a><i class="fa fa-flag" aria-hidden="true"></i> Milestones</a></li>
        <li><a><i class="fa fa-flask" aria-hidden="true"></i> Tickets</a></li>
        <li><a><i class="fa fa-github" aria-hidden="true"></i> GitHub</a></li>
        <li><a><i class="fa fa-medkit" aria-hidden="true"></i> FAQ</a></li>
        <li><span>Other</span></li>
        <li><a><i class="fa fa-search" aria-hidden="true"></i> Search</a></li>
        <li><a><i class="fa fa-cogs" aria-hidden="true"></i> Settings</a></li>
        <li><a><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li>
      </ul>
    </nav>
  </aside>

  <h1>Flexbox Admin Template</h1>

  <div class="grid">
    <article>
      <header>Clean CSS Code</header>
      <ul>
        <li><i class="fa fa-check" aria-hidden="true"></i> no position: absolute</li>
        <li><i class="fa fa-check" aria-hidden="true"></i> no float</li>
        <li><i class="fa fa-check" aria-hidden="true"></i> no clearfix</li>
        <li><i class="fa fa-check" aria-hidden="true"></i> no faux columns</li>
        <li><i class="fa fa-check" aria-hidden="true"></i> no javascript</li>
      </ul>
    </article>
    <article>
      <header>Font Awesome</header>
      <ul>
        <li><i class="fa fa-check" aria-hidden="true"></i> no images</li>
        <li><i class="fa fa-check" aria-hidden="true"></i> no extra retina sprites</li>
      </ul>
    </article>
    <article>
      <header>CSS</header>
     ...