Flexbox Admin Template

Clean up of the work here: https://codepen.io/cadu/pen/RwRQeo Removed Compass3 dependency Rework variables names Rework to use standard font awesome icons instead of CSS

by ethanpil

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="wrapper">

  <nav>

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

    <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>

  <main>

    <h1>Flexbox Admin Template</h1>

    <div class="flex-grid">
      <div>
        <h2>Clean CSS Code</h2>
        <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>
      </div>
      <div>
        <h2>Font Awesome</h2>
        <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...

CSS

/* Variables */
:root {
  
 --color-h: 0;
 --color-s: 0%;
 
 --color: hsl(var(--color-h), var(--color-s), 15.7%);
 --color-d: hsl(var(--color-h), var(--color-s), 10.7%);
 --color-l: hsl(var(--color-h), var(--color-s), 23.3%);
 --color-body: hsl(var(--color-h), var(--color-s), 46.7%);
 --color-header-title: hsl(var(--color-h), var(--color-s), 86.7%);
 --color-light-bg: hsl(var(--color-h), var(--color-s), 96.1%);
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body {
  height: 100%;
}

body {
  font: 15px/1 'Open Sans', sans-serif;
  color: var(--color-body);
}

a {
  cursor: pointer;
}

ul {
  list-style: none;
}

.wrapper {
  display: flex;
  min-height: 100%;
}

nav {
  width: 200px;
  background: var(--color);
}

nav header {
  position: relative;
  height: 80px;
  padding: 20px 0 0 15px;
  font-size: 16px;
  color: #fff;
  background: var(--color-d);
}

nav header span {
  padding-left: 8px;
  margin: 0 10px 0 0; 
  text-align: center;
  vertical-align: middle; 
  border: 1px solid #fff;
  font-size: 36px;
}

nav ul span {
  display: block;
  padding: 15px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  border-bottom: 1px solid  var(--color-d);
}

nav ul a {
  position: relative;
  display: block;
  padding: 15px 15px 17px 25px;
  color: #fff;
  border-bottom: 1px solid var(--color-d);
  white-space: nowrap; 
  width: 200px;
}

nav ul a:hover,
nav ul a.active {
  background:  var(--color-l);
}

main {
  flex: 1;
  padding: 25px;
  background: var( --color-light-bg);
}

main h1 {
  height: 80px;
  margin: -25px -25px 25px -25px;
  padding: 0 25px;
  line-height: 76px;
  font-size: 24px;
  font-weight: 400;
  background: var( --color-header-title);
}

div img {
  max-width: 100%;
  height: auto;
  width: auto;
}

.flex-grid {
  display: flex;
}

.flex-grid > div {
  flex: 1;
  margin: 0 20px 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  background: #fff;
}

.flex-grid > div:last-child {
 ...