Semantic Hierarchy Tree In Pure CSS – Treeflex

Preview:

Description:

The Treeflex CSS library lets you create a flexible, responsive, semantic, SEO-friendly hierarchy tree from nested HTML lists.

Ideal for family and organization chart/tree.

How to use it:

Load the Treeflex.css from a CDN.

<link href="https://unpkg.com/treeflex/dist/css/treeflex.css" rel="stylesheet">

Or install & import the treeflex.scss into your project.

# Yarn
$ yarn add treeflex
# NPM
$ npm install treeflex --save

Create a basic hierarchy tree from nested HTML lists as follows:

<div class="tf-tree example">
  <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>
              <ul>
                <li><span class="tf-nc">9</span></li>
                <li><span class="tf-nc">10</span></li>
              </ul>
            </li>
            <li><span class="tf-nc">6</span></li>
          </ul>
        </li>
        <li>
          <span class="tf-nc">3</span>
          <ul>
            <li><span class="tf-nc">7</span></li>
            <li><span class="tf-nc">8</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Apply your own CSS styles to the nodes & connectors.

.example .tf-nc {
  /* css here */
}
.tf-custom .tf-nc:before,
.tf-custom .tf-nc:after {
  /* css here */
}
.tf-custom li li:before {
  /* css here */
}

Available utilities.

• tf-gap-sm: the space between nodes (small screen)
• tf-gap-lg: the space between nodes (large screen)
• tf-dashed-children: dashed connectors
• tf-dotted-children: dotted connectors