Treeflex 2.0 playground

HTML

<link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css">
<div class="tf-tree tf-gap-lg">
  <ul>
    <li>
      <span class="tf-nc">1</span>
      <ul>
        <li>
          <span class="tf-nc">2</span>
          <ul>
            <li>
              <span class="tf-nc">4</span>
              <ul>
                <li><span class="tf-nc">8</span></li>
                <li><span class="tf-nc">9</span></li>
              </ul>
            </li>
            <li>
              <span class="tf-nc">5</span>
              <ul>
                <li><span class="tf-nc">10</span></li>
                <li><span class="tf-nc">11</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <span class="tf-nc">3</span>
          <ul>
            <li>
              <span class="tf-nc">6</span>
              <ul>
                <li><span class="tf-nc">12</span></li>
                <li><span class="tf-nc">13</span></li>
              </ul>
            </li>
            <li>
              <span class="tf-nc">7</span>
              <ul>
                <li><span class="tf-nc">14</span></li>
                <li><span class="tf-nc">15</span></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>




<footer>
  Check out the <a target="_blank" href="https://dumptyd.github.io/treeflex/">project page</a> for documentation.
</footer>

PostCSS (Stage 0+)

/* Your styles go above ^ */
body {
  padding: 2rem 2rem 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}
footer {
  margin-top: auto;
  text-align: right;
  font-size: .8em;
}
footer a {
  color: inherit;
  border-bottom: 1px solid;
  text-decoration: none;
}