Treeflex 2.0 playground

by Andy Kuds

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></li>
            <li><span class="tf-nc">5</span></li>
          </ul>
        </li>
        <li>
          <span class="tf-nc">3</span>
          <ul>
            <li><span class="tf-nc">6</span></li>
            <li><span class="tf-nc">7</span></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>

CSS

/* Your styles go above ^ */
body {
  padding: 2rem 2rem 1rem;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  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;
}