-
Building Pure CSS Trees (part 5)
After the first 4 parts of our series, we have some flexible (S)CSS that will render nested lists as trees. It can render horizontal trees, vertical trees, trees going from top-to-bottom or bottom-to-top, left-to-right or right-to-left , and even bracket-style centered trees.
Continue reading … -
Building Pure CSS Trees (part 4)
The last we left our pure-CSS tree component, it could render both horizontally oriented as well as vertically oriented as well as the inverse direction for either. With each orientation now capable of being rendered in either direction, might we be able to build a tree component that could put the root node in the center of the graph and have half of the descendant graph render to left and have to the right (for the horizontal orientation) or half to the top and half to the bottom (for the vertical orientation)?
Continue reading … -
Building Pure CSS Trees (part 3)
The last we left our pure-CSS tree component, it could render both horizontally oriented as well as vertically oriented; however, each orientation only worked in one direction—the horizontal tree only rendered left-to-right and the vertical tree only rendered top-to-bottom. What if we wanted to render trees in the inverse orientations?
Continue reading … -
Building Pure CSS Trees (part 2)
In our last post, we built a simple pure-CSS tree from a nested list. That tree was horizontally oriented, but what if we wanted a vertically oriented tree? Today, let’s build that.
Continue reading … -
Building Pure CSS Trees (part 1)
Have you ever wanted to represent some hierarchical data on a webpage as a tree? In this series of posts, we are going to build a CSS-only solution for rendering hierarchical trees.
Continue reading …