treeflex - A flexbox based CSS library for drawing hierarchy trees with HTML lists.

  •        474

Treeflex is a flexbox based CSS library for drawing hierarchy trees with HTML lists.



Related Projects

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

ast-types - Esprima-compatible implementation of the Mozilla JS Parser API

  •    Javascript

This module provides an efficient, modular, Esprima-compatible implementation of the abstract syntax tree type hierarchy pioneered by the Mozilla Parser API. Because it understands the AST type system so thoroughly, this library is able to provide excellent node iteration and traversal mechanisms.

ancestry - Organise ActiveRecord model into a tree structure

  •    Ruby

Ancestry is a gem that allows the records of a Ruby on Rails ActiveRecord model to be organised as a tree structure (or hierarchy). It uses a single database column, using the materialised path pattern. It exposes all the standard tree structure relations (ancestors, parent, root, children, siblings, descendants) and all of them can be fetched in a single SQL query. Additional features are STI support, scopes, depth caching, depth constraints, easy migration from older gems, integrity checking, integrity restoration, arrangement of (sub)tree into hashes and different strategies for dealing with orphaned records. In version 1.2.0 the acts_as_tree method was renamed to has_ancestry in order to allow usage of both the acts_as_tree gem and the ancestry gem in a single application. method acts_as_tree will continue to be supported in the future.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.

laravel-nestedset - Effective tree structures in Laravel 4-5

  •    PHP

This is a Laravel 4-5 package for working with trees in relational databases. The nested set model is to number the nodes according to a tree traversal, which visits each node twice, assigning numbers in the order of visiting, and at both visits. This leaves two numbers for each node, which are stored as two attributes. Querying becomes inexpensive: hierarchy membership can be tested by comparing these numbers. Updating requires renumbering and is therefore expensive.

closure_tree - Easily and efficiently make your ActiveRecord models support hierarchies

  •    Ruby

Common applications include modeling hierarchical data, like tags, threaded comments, page graphs in CMSes, and tracking user referrals. See Bill Karwin's excellent Models for hierarchical data presentation for a description of different tree storage algorithms.

angular-bootstrap-nav-tree - An AngularJS directive that creates a Tree based on a Bootstrap "nav" list

  •    CoffeeScript

This is a Tree directive for Angular JS apps that use Bootstrap CSS. The style is completely Bootstrap because the tree is actually just a Bootstrap "nav" list, with a few changes: Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.

teutonic-css - A modern CSS framework — versatile, well documented.

  •    CSS

Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars. This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.

doorstop - Requirements management using version control.

  •    Python

Doorstop is a requirements management tool that facilitates the storage of textual requirements alongside source code in version control. When a project leverages this tool, each linkable item (requirement, test case, etc.) is stored as a YAML file in a designated directory. The items in each directory form a document. The relationship between documents forms a tree hierarchy. Doorstop provides mechanisms for modifying this tree, validating item traceability, and publishing documents in several formats.

LINQ-to-GameObject-for-Unity - LINQ to GameObject - Traverse GameObject Hierarchy by LINQ

  •    CSharp

LINQ to GameObject is GameObject extensions for Unity that allows traverse hierarchy and append GameObject. The design aims both to get the power of LINQ and performance of iteration.The concept of LINQ to GameObject is axis on tree.

d3-dag - Layout algorithms for visualizing directed acyclic graphs

  •    Javascript

Often data sets are hierarchical, but are not in a tree structure, such as genetic data. In these instances d3-hierarchy may not suit your needs, which is why d3-dag (Directed Acyclic Graph) exists. This module implements a data structure for manipulating DAGs that mimics the API of d3-hierarchy as much as possible, while allowing layouts of acylic DAGs. The update from 0.1 to 0.2 includes a few small backwards incompatible changes.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

gonzales-pe - CSS parser with support of preprocessors

  •    Javascript

Gonzales PE is a CSS parser which plays nicely with preprocessors. Currently those are supported: SCSS, Sass, LESS. Try out Gonzales PE online: Gonzales PE Playground. The different type of tree nodes can be found in docs/

dFTree Dynamic Javascript Folder Tree

  •    Javascript

DFTree is a javascript+css folder tree with dynamic node insertion/erasing/alteration and other functionalities. It is also very lightweight and easy to use. Since version 0.2.2, it provides a graphical layout and supports AJAX to load tree definition.

iojs-cn - io.js ??? & ????

  •    CSS

- [io.js 官方网站翻译]( [官方 io.js Tweets 的转å?‘]( [io.js CHANGELOG]( [翻译]( [io.js Weekly]( [翻译]( [io.js 相关文章翻译]( [æ›´å

progress-tracker - A progress tracker written in SASS with flexbox to be flexible and responsive out of the box

  •    CSS

A progress tracker written in SASS with flexbox to be flexible and responsive out of the box. This can be used to illustrate a multi stage process e.g. form, quiz or a timeline. Once you have downloaded the code, run the commands below to view the demo.

corpus - Yet another CSS toolkit. Basically the stuff I use for most projects.

  •    CSS

Corpus is yet another CSS toolkit. It’s basically a collection of the things I find myself returning to for each new project. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities. For syntax highlighting I'm using Prism.js and my own Predawn color scheme, with code set in Office Code Pro. Styles are written in SCSS. The docs currently live here:, and is kept in a separate repo (rather than a branch) in order to make it possible to symlink the .scss files into other projects. This makes it easier to make revisions back into the Corpus source files within the context of the docs site and also requires less git pulling to keep separate projects up to date.

spectre - Spectre.css - A Lightweight, Responsive and Modern CSS Framework

  •    CSS

Spectre.css is a lightweight, responsive and modern CSS framework. Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.