Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

treeflex

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

treeflex - npm Package Compare versions

Comparing version
1.0.2
 to
2.0.0
+8
CHANGELOG.md
# 2.0.0
- Node content only works with elements that have `.tf-node-content` or `.tf-nc` class now.
- Reduced the specificity in styles to support easier customization for node content elements. No more `.tf-tree .tf-node-content:first-child`. Applying styles to `.tf-tree .tf-nc` or `.tf-tree .tf-node-content` directly will do.
- Minified CSS size is now down to ~3KB.
- Add an example demonstrating how ancestor/upside-down trees can be made.
- Updated the jsfiddle link to support 2.0 syntax.
- Add this changelog.
+1
-1
dist/css/treeflex.css

@@ -1,1 +0,1 @@

.tf-tree{font-size:16px;overflow:auto}.tf-tree *{box-sizing:border-box;margin:0;padding:0}.tf-tree ul{display:inline-flex}.tf-tree li{align-items:center;display:flex;flex-direction:column;flex-wrap:wrap;padding:0 1em;position:relative}.tf-tree li .tf-node-content:first-child,.tf-tree li div:first-child,.tf-tree li span:first-child{border:.0625em solid #000;display:inline-block;padding:.5em 1em;position:relative}.tf-tree li .tf-node-content:first-child:before,.tf-tree li div:first-child:before,.tf-tree li span:first-child:before{border-left:.0625em solid #000;content:"";display:block;height:1em;left:calc(50% - .03125em);position:absolute;top:-1.03125em;width:.0625em}.tf-tree li .tf-node-content:first-child:after,.tf-tree li div:first-child:after,.tf-tree li span:first-child:after{border-left:.0625em solid #000;content:"";display:block;height:1em;left:calc(50% - .03125em);position:absolute;top:calc(100% + .03125em);width:.0625em}.tf-tree li .tf-node-content:first-child:only-child:after,.tf-tree li div:first-child:only-child:after,.tf-tree li span:first-child:only-child:after{display:none}.tf-tree li ul{margin:2em 0}.tf-tree li li:before{border-top:.0625em solid #000;content:"";display:block;height:.0625em;left:-.03125em;position:absolute;top:-1.03125em;width:100%}.tf-tree li li:first-child:before{left:calc(50% - .03125em);max-width:calc(50% + .0625em)}.tf-tree li li:last-child:before{left:auto;max-width:calc(50% + .0625em);right:calc(50% - .03125em)}.tf-tree li li:only-child:before,.tf-tree li li:only-child>.tf-node-content:first-child:before,.tf-tree li li:only-child>div:first-child:before,.tf-tree li li:only-child>span:first-child:before{display:none}.tf-tree li li:only-child{margin:-1em}.tf-tree>ul>li>.tf-node-content:first-child:before,.tf-tree>ul>li>div:first-child:before,.tf-tree>ul>li>span:first-child:before{display:none}.tf-tree.tf-gap-sm li{padding:0 .6em}.tf-tree.tf-gap-sm li .tf-node-content:first-child:before,.tf-tree.tf-gap-sm li div:first-child:before,.tf-tree.tf-gap-sm li span:first-child:before{height:.6em;top:-.6em}.tf-tree.tf-gap-sm li .tf-node-content:first-child:after,.tf-tree.tf-gap-sm li div:first-child:after,.tf-tree.tf-gap-sm li span:first-child:after{height:.6em}.tf-tree.tf-gap-sm li ul{margin:1.2em 0}.tf-tree.tf-gap-sm li li:before{top:-.63125em}.tf-tree.tf-gap-sm li li:only-child{margin:-.6em}.tf-tree.tf-gap-lg li{padding:0 1.5em}.tf-tree.tf-gap-lg li .tf-node-content:first-child:before,.tf-tree.tf-gap-lg li div:first-child:before,.tf-tree.tf-gap-lg li span:first-child:before{height:1.5em;top:-1.5em}.tf-tree.tf-gap-lg li .tf-node-content:first-child:after,.tf-tree.tf-gap-lg li div:first-child:after,.tf-tree.tf-gap-lg li span:first-child:after{height:1.5em}.tf-tree.tf-gap-lg li ul{margin:3em 0}.tf-tree.tf-gap-lg li li:before{top:-1.53125em}.tf-tree.tf-gap-lg li li:only-child{margin:-1.5em}.tf-tree li.tf-dotted-children .tf-node-content:first-child:after,.tf-tree li.tf-dotted-children .tf-node-content:first-child:before,.tf-tree li.tf-dotted-children div:first-child:after,.tf-tree li.tf-dotted-children div:first-child:before,.tf-tree li.tf-dotted-children span:first-child:after,.tf-tree li.tf-dotted-children span:first-child:before{border-left-style:dotted}.tf-tree li.tf-dotted-children li:before{border-top-style:dotted}.tf-tree li.tf-dotted-children>.tf-node-content:first-child:before,.tf-tree li.tf-dotted-children>div:first-child:before,.tf-tree li.tf-dotted-children>span:first-child:before{border-left-style:solid}.tf-tree li.tf-dashed-children .tf-node-content:first-child:after,.tf-tree li.tf-dashed-children .tf-node-content:first-child:before,.tf-tree li.tf-dashed-children div:first-child:after,.tf-tree li.tf-dashed-children div:first-child:before,.tf-tree li.tf-dashed-children span:first-child:after,.tf-tree li.tf-dashed-children span:first-child:before{border-left-style:dashed}.tf-tree li.tf-dashed-children li:before{border-top-style:dashed}.tf-tree li.tf-dashed-children>.tf-node-content:first-child:before,.tf-tree li.tf-dashed-children>div:first-child:before,.tf-tree li.tf-dashed-children>span:first-child:before{border-left-style:solid}
.tf-tree{font-size:16px;overflow:auto}.tf-tree *{box-sizing:border-box;margin:0;padding:0}.tf-tree ul{display:inline-flex}.tf-tree li{align-items:center;display:flex;flex-direction:column;flex-wrap:wrap;padding:0 1em;position:relative}.tf-tree li ul{margin:2em 0}.tf-tree li li:before{border-top:.0625em solid #000;content:"";display:block;height:.0625em;left:-.03125em;position:absolute;top:-1.03125em;width:100%}.tf-tree li li:first-child:before{left:calc(50% - .03125em);max-width:calc(50% + .0625em)}.tf-tree li li:last-child:before{left:auto;max-width:calc(50% + .0625em);right:calc(50% - .03125em)}.tf-tree li li:only-child:before,.tf-tree li li:only-child>.tf-node-content:before li:only-child>.tf-nc:before{display:none}.tf-tree li li:only-child{margin:-1em}.tf-tree .tf-nc,.tf-tree .tf-node-content{border:.0625em solid #000;display:inline-block;padding:.5em 1em;position:relative}.tf-tree .tf-nc:before,.tf-tree .tf-node-content:before{top:-1.03125em}.tf-tree .tf-nc:after,.tf-tree .tf-nc:before,.tf-tree .tf-node-content:after,.tf-tree .tf-node-content:before{border-left:.0625em solid #000;content:"";display:block;height:1em;left:calc(50% - .03125em);position:absolute;width:.0625em}.tf-tree .tf-nc:after,.tf-tree .tf-node-content:after{top:calc(100% + .03125em)}.tf-tree .tf-nc:only-child:after,.tf-tree .tf-node-content:only-child:after,.tf-tree>ul>li>.tf-nc:before,.tf-tree>ul>li>.tf-node-content:before{display:none}.tf-tree.tf-gap-sm li{padding:0 .6em}.tf-tree.tf-gap-sm li>.tf-nc:before,.tf-tree.tf-gap-sm li>.tf-node-content:before{height:.6em;top:-.6em}.tf-tree.tf-gap-sm li>.tf-nc:after,.tf-tree.tf-gap-sm li>.tf-node-content:after{height:.6em}.tf-tree.tf-gap-sm li ul{margin:1.2em 0}.tf-tree.tf-gap-sm li li:before{top:-.63125em}.tf-tree.tf-gap-sm li li:only-child{margin:-.6em}.tf-tree.tf-gap-lg li{padding:0 1.5em}.tf-tree.tf-gap-lg li>.tf-nc:before,.tf-tree.tf-gap-lg li>.tf-node-content:before{height:1.5em;top:-1.5em}.tf-tree.tf-gap-lg li>.tf-nc:after,.tf-tree.tf-gap-lg li>.tf-node-content:after{height:1.5em}.tf-tree.tf-gap-lg li ul{margin:3em 0}.tf-tree.tf-gap-lg li li:before{top:-1.53125em}.tf-tree.tf-gap-lg li li:only-child{margin:-1.5em}.tf-tree li.tf-dotted-children .tf-nc:after,.tf-tree li.tf-dotted-children .tf-nc:before,.tf-tree li.tf-dotted-children .tf-node-content:after,.tf-tree li.tf-dotted-children .tf-node-content:before{border-left-style:dotted}.tf-tree li.tf-dotted-children li:before{border-top-style:dotted}.tf-tree li.tf-dotted-children>.tf-nc:before,.tf-tree li.tf-dotted-children>.tf-node-content:before{border-left-style:solid}.tf-tree li.tf-dashed-children .tf-nc:after,.tf-tree li.tf-dashed-children .tf-nc:before,.tf-tree li.tf-dashed-children .tf-node-content:after,.tf-tree li.tf-dashed-children .tf-node-content:before{border-left-style:dashed}.tf-tree li.tf-dashed-children li:before{border-top-style:dashed}.tf-tree li.tf-dashed-children>.tf-nc:before,.tf-tree li.tf-dashed-children>.tf-node-content:before{border-left-style:solid}
+1
-1
docs/index.html

@@ -1,1 +0,1 @@

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="A library for drawing hierarchy trees with CSS"> <meta name="keywords" content="tree,hierarchy tree,css tree,flex,flexbox,css hierarchy tree,scss"> <meta name="author" content="dumptyd"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Treeflex - A library for drawing hierarchy trees with CSS</title> <link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Condensed:700" rel="stylesheet"> <link rel="stylesheet" href="/treeflex/main.d9ad2392.css"> </head> <body> <nav id="navigation"> <div> <a href="#" class="brand text-lg text-bold">Treeflex</a> </div> <div> <a class="navigator" href="#installation">Installation</a> <a class="navigator" href="#usage">Usage</a> <a class="navigator" href="#examples">Examples</a> <a class="navigator" href="#utility-classes">Utility classes</a> <a class="navigator" href="#customization">Customization</a> <a href="https://github.com/dumptyd/treeflex">Github</a> </div> </nav> <section id="intro"> <h1 class="brand">TreeFlex <sub class="text-xs"><small>1.0.2</small></sub></h1> <div class="text-lg">A library for drawing hierarchy trees with CSS</div> <div class="try-it-container"> <a href="https://jsfiddle.net/dumptyd/bfd2xwvq/" target="_blank" class="button">Try it live &rarr;</a> </div> <div class="trees"> <div class="demo-tree fixed-width-nodes tf-gap-lg"></div> <div class="demo-tree-sm fixed-width-nodes"></div> </div> </section> <section id="installation"> <div class="container"> <h2 class="container-header">Installation</h2> <p>Treeflex can be installed using <code>yarn</code> or <code>npm</code> by running</p> <pre>yarn install treeflex</pre> <p class="text-center"><strong>OR</strong></p> <pre>npm install treeflex</pre> <hr> <p>Treeflex can also be included directly from <a href="https://unpkg.com">unpkg.com</a>'s CDN.</p> <pre class="unstyled"><code class="unstyled">&lt;link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css"&gt;</code></pre> </div> </section> <section id="usage"> <div class="container"> <h2 class="container-header">Usage</h2> <p>Creating trees with Treeflex is as simple as writing nested HTML lists. Treeflex needs a block-level element with a <code>tf-tree</code> class and an unordered list (<code>ul</code>) as a direct child of the element.</p> <p>Each <code>li</code> element's <strong>first</strong> <code>span</code>, <code>div</code> or any element with a <code>tf-node-content</code> class is used as that node's content. One of these three elements are required in each <code>li</code> element.</p> <p>Each <code>li</code> element that is not the leaf node should have an <strong>unordered list (<code>ul</code>) as its second child</strong>. Each <code>li</code> element inside this <code>ul</code> acts as this node's child.</p> <p>There's no limit on how deep the trees could go. However, every new level adds to the width of the entire tree.</p> <p>As simple as that!</p> </div> </section> <section id="examples"> <div class="container"> <h2 class="container-header">Examples</h2> <div class="example example-basic"> <h3>Basic tree</h3> <div class="content"> <div class="description"> A basic hierarchy tree with one root node and two children. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-multilevel"> <h3>Multilevel tree</h3> <div class="content"> <div class="description"> A hierarchy tree with four levels and multiple children in each node. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-scaling"> <h3>Scaling</h3> <div class="content"> <div class="description"> Treeflex styles make use of <code>em</code> units. This allows you to scale the entire tree including the connectors and gaps just by changing the font-size of any or all <code>.tf-tree</code> element(s). <br> This is good for making the tree responsive. You can simply reduce the <code>font-size</code> of the tree on smaller screens to make it fit in the viewport. <br><br> This example shows how you can draw a tiny version of the tree from the above example. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <h2 id="utility-classes" class="text-center mt-0">Utility Classes</h2> <hr> <p> Treeflex comes with a few utility classes to help customize the trees. These are: <ul> <li><code>tf-gap-sm</code></li> <li><code>tf-gap-lg</code></li> <li><code>tf-dashed-children</code></li> <li><code>tf-dotted-children</code></li> </ul> </p> <p><code>tf-gap-*</code> classes go on the <code>tf-tree</code> element. These classes increase and decrease the gap between the nodes.</p> <p><code>tf-*-children</code> classes go on <code>li</code> elements. These classes change the connector style to dotted/dashed for all nodes inside the applied <code>li</code>.</p> <div class="example example-gaps"> <h3>Gaps</h3> <div class="content"> <div class="description"> This example shows the difference between <code>tf-gap-*</code> classes and the default gap. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-dotted"> <h3>Dashed &amp; dotted connectors</h3> <div class="content"> <div class="description"> An example of <code>tf-*-children</code> classes. This could be useful for scenarios where one might want to visually represent a node that hasn't been permanently added to the tree yet. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <h2 id="customization" class="text-center mt-0">Customization</h2> <hr> <p> Trees can be customized with your own styles. Here are the classes/elements you need to target to change various aspects of the tree. <br> <small>For node content related styles, only <code>span</code> elements are mentioned for brevity, these styles can and should be applied to <code>div</code> &amp; <code>.tf-node-content</code> too if that's what you choose to use. </small> <div> <h3>Styling the nodes</h3> <strong>Selector: </strong> <code>.tf-tree li span:first-child</code> <p> This selector can be used to style the look &amp; feel of the nodes. <br> There are some limitations to this though, you should not change the margins and the pseudo elements (<code>:before, :after</code>) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using <code>ul</code> inside node content. </p> <p> Changing the font-size of <code>.tf-tree</code> for non scaling related reasons should be avoided as all the gaps and margins are calculated based on that. <br> To change the font-size of the node content, content should be wrapped inside another element and styles should be applied on that element. </p> </div> <div> <h3>Styling the vertical node connectors</h3> <strong>Selector: </strong> <code>.tf-tree li span:first-child:before, .tf-tree li span:first-child:after</code> <p>These selectors can be used to style the vertical node connectors. For instance, you can use these to increase the width or border-style of the connectors.</p> </div> <div> <h3>Styling the horizontal connectors</h3> <strong>Selector: </strong> <code>.tf-tree li li:before</code> <p>Same as above but for styling the horizontal connectors.</p> </div> </p> <div class="example example-customized"> <h3>Customized tree</h3> <div class="content"> <div class="description"> This example demonstrates how these selectors can be used. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="footer-content"> <div>Made by <a href="https://github.com/dumptyd">dumptyd</a>.</div> <div> <a class="navigator" href="#navigation">Go up &uarr;</a> </div> </div> </div> </footer> <script src="/treeflex/main.e931964f.js"></script> </body> </html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="A library for drawing hierarchy trees with CSS"> <meta name="keywords" content="tree,hierarchy tree,css tree,flex,flexbox,css hierarchy tree,scss"> <meta name="author" content="dumptyd"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Treeflex - A library for drawing hierarchy trees with CSS</title> <link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Condensed:700" rel="stylesheet"> <link rel="stylesheet" href="/treeflex/main.90b84307.css"> </head> <body> <nav id="navigation"> <div> <a href="#" class="brand text-lg text-bold">Treeflex</a> </div> <div> <a class="navigator" href="#installation">Installation</a> <a class="navigator" href="#usage">Usage</a> <a class="navigator" href="#examples">Examples</a> <a class="navigator" href="#utility-classes">Utility classes</a> <a class="navigator" href="#customization">Customization</a> <a href="https://github.com/dumptyd/treeflex">Github</a> </div> </nav> <section id="intro"> <h1 class="brand">TreeFlex <sub class="text-xs"><small>2.0.0</small></sub></h1> <div class="text-lg">A library for drawing hierarchy trees with CSS</div> <div class="try-it-container"> <a href="https://jsfiddle.net/dumptyd/zpac63y8/" target="_blank" class="button">Try it live &rarr;</a> </div> <div class="trees"> <div class="demo-tree fixed-width-nodes tf-gap-lg"></div> <div class="demo-tree-sm fixed-width-nodes"></div> </div> </section> <section id="installation"> <div class="container"> <h2 class="container-header">Installation</h2> <p>Treeflex can be installed using <code>yarn</code> or <code>npm</code> by running</p> <pre>yarn install treeflex</pre> <p class="text-center"><strong>OR</strong></p> <pre>npm install treeflex</pre> <hr> <p>Treeflex can also be included directly from <a href="https://unpkg.com">unpkg.com</a>'s CDN.</p> <pre class="unstyled"><code class="unstyled">&lt;link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css"&gt;</code></pre> </div> </section> <section id="usage"> <div class="container"> <h2 class="container-header">Usage</h2> <p>Creating trees with Treeflex is as simple as writing nested HTML lists. Treeflex needs a block-level element with a <code>tf-tree</code> class and an unordered list (<code>ul</code>) as a direct child of the element.</p> <p>Each <code>li</code> element's <strong>first child</strong> with a <code>tf-node-content</code> class (or <code>tf-nc</code> for short) is used as that node's content. This is required. You can use whatever tag you like for node content, however it is suggested that you use a <code>span</code> or <code>div</code> element.</p> <p>Each <code>li</code> element that is not the leaf node should have an <strong>unordered list (<code>ul</code>) as its second child</strong>. Each <code>li</code> element inside this <code>ul</code> acts as this node's child.</p> <p>There's no limit on how deep the trees could go. However, every new level adds to the width of the entire tree.</p> <p>As simple as that!</p> </div> </section> <section id="examples"> <div class="container"> <h2 class="container-header">Examples</h2> <div class="example example-basic"> <h3>Basic tree</h3> <div class="content"> <div class="description"> A basic hierarchy tree with one root node and two children. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-multilevel"> <h3>Multilevel tree</h3> <div class="content"> <div class="description"> A hierarchy tree with four levels and multiple children in each node. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-scaling"> <h3>Scaling</h3> <div class="content"> <div class="description"> Treeflex styles make use of <code>em</code> units. This allows you to scale the entire tree including the connectors and gaps just by changing the font-size of any or all <code>.tf-tree</code> element(s). <br> This is good for making the tree responsive. You can simply reduce the <code>font-size</code> of the tree on smaller screens to make it fit in the viewport. <br><br> This example shows how you can draw a tiny version of the tree from the above example. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <h2 id="utility-classes" class="text-center mt-0">Utility Classes</h2> <hr> <p> Treeflex comes with a few utility classes to help customize the trees. These are: <ul> <li><code>tf-nc</code></li> <li><code>tf-gap-sm</code></li> <li><code>tf-gap-lg</code></li> <li><code>tf-dashed-children</code></li> <li><code>tf-dotted-children</code></li> </ul> </p> <p><code>tf-nc</code> is just short for <code>tf-node-content</code>. You can use either of these for node content.</p> <p><code>tf-gap-*</code> classes go on the <code>tf-tree</code> element. These classes increase and decrease the gap between the nodes.</p> <p><code>tf-*-children</code> classes go on <code>li</code> elements. These classes change the connector style to dotted/dashed for all nodes inside the applied <code>li</code>.</p> <div class="example example-gaps"> <h3>Gaps</h3> <div class="content"> <div class="description"> This example shows the difference between <code>tf-gap-*</code> classes and the default gap. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-dotted"> <h3>Dashed &amp; dotted connectors</h3> <div class="content"> <div class="description"> An example of <code>tf-*-children</code> classes. This could be useful for scenarios where one might want to visually represent a node that hasn't been permanently added to the tree yet. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <h2 id="customization" class="text-center mt-0">Customization</h2> <hr> <p> Trees can be customized with your own styles. Here are the classes/elements you need to target to change various aspects of the tree. <br> <small>For node content related styles, only <code>tf-nc</code> class is used for brevity, these styles can and should be applied to <code>.tf-node-content</code> too if that's what you choose to use. </small> <div> <h3>Styling the nodes</h3> <strong>Selector: </strong> <code>.tf-tree .tf-nc</code> <p> This selector can be used to style the look &amp; feel of the nodes. <br> There are some limitations to this though, you should not change the margins and the pseudo elements (<code>:before, :after</code>) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using <code>ul</code> and <code>li</code> elements inside node content. </p> <p> Changing the font-size of <code>.tf-tree</code> for non scaling related reasons should be avoided as all the gaps and margins are calculated based on that. <br> To change the font-size of the node content, content should be wrapped inside another element and styles should be applied on that element. </p> </div> <div> <h3>Styling the vertical node connectors</h3> <strong>Selector: </strong> <code>.tf-tree .tf-nc:before, .tf-tree .tf-nc:after</code> <p>These selectors can be used to style the vertical node connectors. For instance, you can use these to increase the width or border-style of the connectors.</p> </div> <div> <h3>Styling the horizontal connectors</h3> <strong>Selector: </strong> <code>.tf-tree li li:before</code> <p>Same as above but for styling the horizontal connectors.</p> </div> </p> <div class="example example-customized"> <h3>Customized tree</h3> <div class="content"> <div class="description"> This example demonstrates how these selectors can be used. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> <hr> <div class="example example-ancestor"> <h3>Ancestor tree</h3> <div class="content"> <div class="description"> While ancestor or upside-down trees are not supported out of the box, it can be implemented easily with some custom styles. This example shows how to do that. </div> <div class="code"> <pre class="unstyled"><code class="html hljs unstyled"></code></pre> </div> <div class="result"> <div>Loading...</div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="footer-content"> <div>Made by <a href="https://github.com/dumptyd">dumptyd</a>.</div> <div> <a class="navigator" href="#navigation">Go up &uarr;</a> </div> </div> </div> </footer> <script src="/treeflex/main.2989f187.js"></script> </body> </html>
+1
-1
package.json
{
"name": "treeflex",
"version": "1.0.2",
"version": "2.0.0",
"description": "Treeflex is a flexbox based CSS library for drawing hierarchy trees with HTML lists.",

@@ -5,0 +5,0 @@ "keywords": ["css", "flexbox", "scss", "hierarchy tree", "tree", "css tree"],

+41
-51
src/core/scss/treeflex.scss

@@ -30,34 +30,2 @@ $primary_color: #000;

/* node content */
span:first-child, div:first-child, .tf-node-content:first-child {
position: relative;
display: inline-block;
border: $connector_width solid $primary_color;
padding: ($node_gap / 2) $node_gap;
&:before {
position: absolute;
display: block;
height: $node_gap;
left: calc(50% - #{$connector_width / 2});
top: calc(#{-$node_gap} - #{$connector_width / 2});
content: '';
border-left: $connector_width $connector_style $primary_color;
width: $connector_width;
}
&:after {
position: absolute;
display: block;
height: $node_gap;
left: calc(50% - #{$connector_width / 2});
top: calc(100% + #{$connector_width / 2});
content: '';
border-left: $connector_width $connector_style $primary_color;
width: $connector_width;
}
&:only-child:after { display: none; }
}
ul { margin: ($node_gap * 2) 0; }

@@ -86,14 +54,43 @@

li:only-child:before,
li:only-child > span:first-child:before,
li:only-child > div:first-child:before,
li:only-child > .tf-node-content:first-child:before { display: none; }
li:only-child > .tf-node-content:before
li:only-child > .tf-nc:before { display: none; }
li:only-child { margin: -$node_gap; }
}
.tf-node-content, .tf-nc {
position: relative;
display: inline-block;
border: $connector_width solid $primary_color;
padding: ($node_gap / 2) $node_gap;
&:before {
position: absolute;
display: block;
height: $node_gap;
left: calc(50% - #{$connector_width / 2});
top: calc(#{-$node_gap} - #{$connector_width / 2});
content: '';
border-left: $connector_width $connector_style $primary_color;
width: $connector_width;
}
&:after {
position: absolute;
display: block;
height: $node_gap;
left: calc(50% - #{$connector_width / 2});
top: calc(100% + #{$connector_width / 2});
content: '';
border-left: $connector_width $connector_style $primary_color;
width: $connector_width;
}
&:only-child:after { display: none; }
}
>ul>li>span:first-child:before, >ul>li>div:first-child:before, >ul>li>.tf-node-content:first-child:before { display: none; }
>ul>li>.tf-node-content:before, >ul>li>.tf-nc:before { display: none; }
&.tf-gap-sm li {
padding: 0 $sm_node_gap;
span:first-child, div:first-child, .tf-node-content:first-child {
>.tf-node-content, >.tf-nc {
&:before {

@@ -112,3 +109,3 @@ height: $sm_node_gap;

padding: 0 $lg_node_gap;
span:first-child, div:first-child, .tf-node-content:first-child {
>.tf-node-content, >.tf-nc {
&:before {

@@ -126,5 +123,3 @@ height: $lg_node_gap;

li.tf-dotted-children {
span:first-child,
div:first-child,
.tf-node-content:first-child {
.tf-node-content, .tf-nc {
&:before, &:after { border-left-style: dotted; }

@@ -134,12 +129,9 @@ }

>span:first-child:before,
>div:first-child:before,
>.tf-node-content:first-child:before {
>.tf-node-content:before, >.tf-nc:before {
border-left-style: solid;
}
}
li.tf-dashed-children {
span:first-child,
div:first-child,
.tf-node-content:first-child {
.tf-node-content, .tf-nc {
&:before, &:after { border-left-style: dashed; }

@@ -149,5 +141,3 @@ }

>span:first-child:before,
>div:first-child:before,
>.tf-node-content:first-child:before {
>.tf-node-content:before, >.tf-nc:before {
border-left-style: solid;

@@ -154,0 +144,0 @@ }

+31
-12
src/site/index.html

@@ -29,6 +29,6 @@ <!DOCTYPE html>

<section id="intro">
<h1 class="brand">TreeFlex <sub class="text-xs"><small>1.0.2</small></sub></h1>
<h1 class="brand">TreeFlex <sub class="text-xs"><small>2.0.0</small></sub></h1>
<div class="text-lg">A library for drawing hierarchy trees with CSS</div>
<div class="try-it-container">
<a href="https://jsfiddle.net/dumptyd/bfd2xwvq/" target="_blank" class="button">Try it live &rarr;</a>
<a href="https://jsfiddle.net/dumptyd/zpac63y8/" target="_blank" class="button">Try it live &rarr;</a>
</div>

@@ -62,4 +62,3 @@ <div class="trees">

<p>Each <code>li</code> element's <strong>first</strong> <code>span</code>, <code>div</code> or
any element with a <code>tf-node-content</code> class is used as that node's content. One of these three elements are required in each <code>li</code> element.</p>
<p>Each <code>li</code> element's <strong>first child</strong> with a <code>tf-node-content</code> class (or <code>tf-nc</code> for short) is used as that node's content. This is required. You can use whatever tag you like for node content, however it is suggested that you use a <code>span</code> or <code>div</code> element.</p>

@@ -140,8 +139,11 @@ <p>Each <code>li</code> element that is not the leaf node should have an <strong>unordered list (<code>ul</code>) as its second child</strong>. Each <code>li</code> element inside this <code>ul</code> acts as this node's child.</p>

<ul>
<li><code>tf-gap-sm</code></li>
<li><code>tf-gap-lg</code></li>
<li><code>tf-dashed-children</code></li>
<li><code>tf-dotted-children</code></li>
<li><code>tf-nc</code></li>
<li><code>tf-gap-sm</code></li>
<li><code>tf-gap-lg</code></li>
<li><code>tf-dashed-children</code></li>
<li><code>tf-dotted-children</code></li>
</ul>
</p>
<p><code>tf-nc</code> is just short for <code>tf-node-content</code>. You can use either of these for node content.</p>

@@ -194,11 +196,11 @@ <p><code>tf-gap-*</code> classes go on the <code>tf-tree</code> element. These classes increase and decrease the gap between the nodes.</p>

<br>
<small>For node content related styles, only <code>span</code> elements are mentioned for brevity, these styles can and should be applied to <code>div</code> &amp; <code>.tf-node-content</code> too if that's what you choose to use. </small>
<small>For node content related styles, only <code>tf-nc</code> class is used for brevity, these styles can and should be applied to <code>.tf-node-content</code> too if that's what you choose to use. </small>
<div>
<h3>Styling the nodes</h3>
<strong>Selector: </strong> <code>.tf-tree li span:first-child</code>
<strong>Selector: </strong> <code>.tf-tree .tf-nc</code>
<p>
This selector can be used to style the look &amp; feel of the nodes.
<br>
There are some limitations to this though, you should not change the margins and the pseudo elements (<code>:before, :after</code>) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using <code>ul</code> inside node content.
There are some limitations to this though, you should not change the margins and the pseudo elements (<code>:before, :after</code>) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using <code>ul</code> and <code>li</code> elements inside node content.
</p>

@@ -217,3 +219,3 @@

<h3>Styling the vertical node connectors</h3>
<strong>Selector: </strong> <code>.tf-tree li span:first-child:before, .tf-tree li span:first-child:after</code>
<strong>Selector: </strong> <code>.tf-tree .tf-nc:before, .tf-tree .tf-nc:after</code>
<p>These selectors can be used to style the vertical node connectors. For instance, you can use these to increase the width or border-style of the connectors.</p>

@@ -243,2 +245,19 @@ </div>

</div>
<hr>
<div class="example example-ancestor">
<h3>Ancestor tree</h3>
<div class="content">
<div class="description">
While ancestor or upside-down trees are not supported out of the box, it can be implemented easily with some custom styles. This example shows how to do that.
</div>
<div class="code">
<pre class="unstyled"><code class="html hljs unstyled"></code></pre>
</div>
<div class="result">
<div>Loading...</div>
</div>
</div>
</div>
</div>

@@ -245,0 +264,0 @@ </section>

+1
-1
src/site/js/drawTreeFromObject.js

@@ -19,3 +19,3 @@ const emptyNode = node => {

arr.forEach(item => {
const li = createEl('li', createEl('span', item.text), [], true);
const li = createEl('li', createEl('span', item.text, ['tf-nc']), [], true);
parent.appendChild(li);

@@ -22,0 +22,0 @@ if (item.children && item.children.length) {

+89
-52
src/site/js/examples.js

@@ -9,6 +9,6 @@ import draw from './drawTreeFromObject';

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span class="tf-nc">2</span></li>
<li><span class="tf-nc">3</span></li>
</ul>

@@ -37,23 +37,23 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li>
<span>2</span>
<span class="tf-nc">2</span>
<ul>
<li><span>4</span></li>
<li><span class="tf-nc">4</span></li>
<li>
<span>5</span>
<span class="tf-nc">5</span>
<ul>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span class="tf-nc">9</span></li>
<li><span class="tf-nc">10</span></li>
</ul>
</li>
<li><span>6</span></li>
<li><span class="tf-nc">6</span></li>
</ul>
</li>
<li>
<span>3</span>
<span class="tf-nc">3</span>
<ul>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span class="tf-nc">7</span></li>
<li><span class="tf-nc">8</span></li>
</ul>

@@ -71,23 +71,23 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li>
<span>2</span>
<span class="tf-nc">2</span>
<ul>
<li><span>4</span></li>
<li><span class="tf-nc">4</span></li>
<li>
<span>5</span>
<span class="tf-nc">5</span>
<ul>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span class="tf-nc">9</span></li>
<li><span class="tf-nc">10</span></li>
</ul>
</li>
<li><span>6</span></li>
<li><span class="tf-nc">6</span></li>
</ul>
</li>
<li>
<span>3</span>
<span class="tf-nc">3</span>
<ul>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span class="tf-nc">7</span></li>
<li><span class="tf-nc">8</span></li>
</ul>

@@ -106,6 +106,6 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span class="tf-nc">2</span></li>
<li><span class="tf-nc">3</span></li>
</ul>

@@ -120,6 +120,6 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span class="tf-nc">2</span></li>
<li><span class="tf-nc">3</span></li>
</ul>

@@ -134,6 +134,6 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span class="tf-nc">2</span></li>
<li><span class="tf-nc">3</span></li>
</ul>

@@ -149,23 +149,23 @@ </li>

<li>
<span>1</span>
<span class="tf-nc">1</span>
<ul>
<li class="tf-dashed-children">
<span>2</span>
<span class="tf-nc">2</span>
<ul>
<li><span>4</span></li>
<li><span class="tf-nc">4</span></li>
<li>
<span>5</span>
<span class="tf-nc">5</span>
<ul>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span class="tf-nc">9</span></li>
<li><span class="tf-nc">10</span></li>
</ul>
</li>
<li><span>6</span></li>
<li><span class="tf-nc">6</span></li>
</ul>
</li>
<li class="tf-dotted-children">
<span>3</span>
<span class="tf-nc">3</span>
<ul>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span class="tf-nc">7</span></li>
<li><span class="tf-nc">8</span></li>
</ul>

@@ -183,3 +183,3 @@ </li>

.tf-custom li span:first-child {
.tf-custom .tf-nc {
height: 1em; width: 1em;

@@ -194,4 +194,4 @@ background-color: dodgerblue;

.tf-custom li span:first-child:before,
.tf-custom li span:first-child:after {
.tf-custom .tf-nc:before,
.tf-custom .tf-nc:after {
border-left-color: dodgerblue;

@@ -209,16 +209,16 @@ border-left-width: 2px;

<li>
<span></span>
<span class="tf-nc"></span>
<ul>
<li>
<span></span>
<span class="tf-nc"></span>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span class="tf-nc"></span></li>
<li><span class="tf-nc"></span></li>
</ul>
</li>
<li>
<span></span>
<span class="tf-nc"></span>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span class="tf-nc"></span></li>
<li><span class="tf-nc"></span></li>
</ul>

@@ -230,4 +230,41 @@ </li>

</div>`
}, {
className: 'example-ancestor',
useCode: true,
code: `<style>
/* make the nodes round and change their background-color */
.tf-ancestor-tree { position: relative; }
.tf-ancestor-tree > ul { transform: rotateX(180deg); }
.tf-ancestor-tree li ul { margin-bottom: 1em; }
.node-text {
display: inline-block;
transform: rotateX(180deg);
}
</style>
<div class="tf-tree tf-ancestor-tree">
<ul>
<li>
<span class="tf-nc"><span class="node-text">1</span></span>
<ul>
<li>
<span class="tf-nc"><span class="node-text">2</span></span>
<ul>
<li><span class="tf-nc"><span class="node-text">4</span></span></li>
<li><span class="tf-nc"><span class="node-text">5</span></span></li>
</ul>
</li>
<li>
<span class="tf-nc"><span class="node-text">3</span></span>
<ul>
<li><span class="tf-nc"><span class="node-text">6</span></span></li>
<li><span class="tf-nc"><span class="node-text">7</span></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>`
}];
export default examples;