Semantic Hierarchy Tree In Pure CSS – Treeflex

Category: Chart & Graph , CSS & CSS3 , Recommended | September 16, 2018
Author: dumptyd
Views Total: 760
Official Page: Go to website
Last Update: September 16, 2018
License: MIT

Preview:

Semantic Hierarchy Tree In Pure CSS – Treeflex

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

Leave a Reply