The word 'hierarchy' has Greek origin; formed through the combination of words hieros (meaning "holy") and archos (meaning "ruler"). It has continued to be used as an expressive term when referring to different forms of graded classification or structure.
Hierarchy uses pure HTML and CSS for its presentation. Not only does this mean the stack works reliably in all newer web browsers, it is also brings the benefit of being search engine optimised, faster loading and more accessible. The alternatives to Hierarchy would be to either convert your diagram into an image or embrace SVG / Javascript; the latter of which can become extremely complicated.
You can configure Hierarchy to render a nested unordered list (configured with Stacks or raw HTML) as a tree. Alternatively Hierarchy can be made to display a compatible theme navigation structure as a tree; which can form an attractive sitemap.
Hierarchy is pretty clever stuff! From a technical standpoint, it takes a fairly mundane HTML unordered list and spreads the list items out horizontally using CSS Flexbox Layout. To render the lines between items, we use pseudo classes. The finished structural hierarchy is presented with subtle styling and colouring. Hierarchy has no dependencies on any third-party code, plugins or libraries. So hopefully what you create today with the stack will still be working in many years from now!
Within the stack settings, there's a customisable Breakpoint option. On all screen widths less than the breakpoint you provide, Hierarchy will morph magically into a simple series of vertical boxes. Sure it may not look quite as pretty, but it offers a robustly reliable solution for your tablet and smartphone users to continue accessing the Hierarchy content. The default breakpoint is 768px, but this can be increased or reduced to suit.
Hierarchy uses pure HTML and CSS for its presentation. Not only does this mean the stack works reliably in all newer web browsers, it is also brings the benefit of being search engine optimised, faster loading and more accessible. The alternatives to Hierarchy would be to either convert your diagram into an image or embrace SVG / Javascript; the latter of which can become extremely complicated.
You can configure Hierarchy to render a nested unordered list (configured with Stacks or raw HTML) as a tree. Alternatively Hierarchy can be made to display a compatible theme navigation structure as a tree; which can form an attractive sitemap.
Hierarchy is pretty clever stuff! From a technical standpoint, it takes a fairly mundane HTML unordered list and spreads the list items out horizontally using CSS Flexbox Layout. To render the lines between items, we use pseudo classes. The finished structural hierarchy is presented with subtle styling and colouring. Hierarchy has no dependencies on any third-party code, plugins or libraries. So hopefully what you create today with the stack will still be working in many years from now!
Mobile support
Hierarchy looks truly fantastic on large laptop or desktop displays. But how can we deal with the inevitable problem of people trying to view your Hierarchy stack on tablets or smartphones? By default, Hierarchy will scroll horizontally on any screen size, if there's insufficient space to display all the items.Within the stack settings, there's a customisable Breakpoint option. On all screen widths less than the breakpoint you provide, Hierarchy will morph magically into a simple series of vertical boxes. Sure it may not look quite as pretty, but it offers a robustly reliable solution for your tablet and smartphone users to continue accessing the Hierarchy content. The default breakpoint is 768px, but this can be increased or reduced to suit.
Example
Here is an example of Hierarchy with its default style settings applied. In this example, we are using the stack to display a simplified version of the British Royal Family. Each person on the family tree has had their name set as a link to https://example.com. In a real life genealogy website, it would be just as easy to have the link open inside a TopBox lightbox or perhaps open another webpage.You can scroll the family tree horizontally. On smaller screens (like mobile) the family tree reverts back to its native unordered list formatting.
Setup
Hierarchy is a stack element for RapidWeaver. Please install Hierarchy into Stacks and RapidWeaver as you would normally do. Hierarchy is not compatible for use with other publishing platforms like Wordpress.When you add a Hierarchy stack to a webpage, it defaults straight to the 'Stacks' configuration. In this configuration, you are presented with a blue button. Each press of this button adds a new Hierarchy Item.
Every Hierarchy Item comprises of 4 elements:
- Box Content is where you enter the content you want shown in the item. Most commonly you would drag and drop Text, HTML or Markdown stacks here and set the content as links to a lightbox or other webpages. If you type multiple links separated with line breaks, they will be placed into multiple dotted boxes.
- Left Nodes are optional items prepended before the Box Content, with a single horizontal connection line. For example, if a parent divorced or remarried, you would typically treat this as a node.
- Right Nodes are identical to Left Nodes, with the exception they are appended after your Box Content.
- Branches are decedents from the current item, like children or grand children. When you add one or more branches, this action creates new instances of the Hierarchy Item to populate. You just continue the cycle on.
Hierarchy will render a vertical line below every Hierarchy Item, in readiness for you to add the next branch down. To stop a branch connector line being displayed below an item, simply select the desired Hierarchy Item in edit mode, go into its settings, and check the Terminator Item checkbox. A terminator item implies it is at the end of the branch and will be treated like a node.
Hierarchies can quickly become quite complicated! To maintain a tidy workspace in Stacks edit mode, you can optionally colour-code your Hierarchy Items and write notes for them. These colour-codings and private notes are never exported or published. If you are certain that you are never going to use left or right nodes in your Hierarchy, then these can be disabled in the main stack settings too.
For complicated Hierarchies (like a family tree) it is well-worth drafting something out before using the Hierarchy stack. Working from a visual makes things much easier.
Hierarchy is totally unlike any stack you may have previously used. However with some practice, you will find it to be an excellent add-on. We have tried to strike a careful balance between keeping the stack easy to use, while still offering users adequate flexibility. Hierarchy is about the only stack available for RapidWeaver that would let you create something like a basic family tree.
Style settings
Hierarchy has lots of useful style and colour settings, so you can build a chart that truly looks like your own! In the main Hierarchy stack settings, you can customise the styling for branches, nodes and items. These style selections take effect on all areas of the stack.What if you wanted to mark one or more items or nodes with special colouring, to distinguish them from the rest? Simply select the item or node in RapidWeaver edit mode and click the Custom Colours For This Item checkbox. Now you are presented with colour pickers to change the background gradient, border and text colouring of this item. It is also feasible to apply CSS classes onto items and nodes, if you wish to style things yourself with custom code.
Changing the positioning of vertical connectors
By default, Hierarchy displays the vertical connector line (the one used for descendants) 50% from the left. Hierarchy has an extremely challenging job of trying to position all the items as best as it can. Sometimes it does not always get it quite correct! This is especially true if some items are significantly larger than others or you have introduced left / right nodes, which can unbalance a branch. You can give Hierarchy a helping hand by manually adjusting the positioning of vertical connectors. Simply select the Hierarchy Item you want to adjust its lower vertical connector on, and use the setting provided. Either increase or decrease the percentage setting, using the slider or number box.Displaying Hierarchy on your own website
Hopefully by this stage, you are impressed with the capabilities of Hierarchy. It's quite surprising how this stack is able to convert a regular HTML unordered list into structural hierarchies, like a family tree. Now it's worth considering the best approaches towards getting the Hierarchy displaying good on your own website.For smaller hierarchies, you should be fine to place the stack in your normal page flow. If the Hierarchy is too wide to display on tablet or mobile, we simply display a horizontal scrollbar. That way there is never any danger of Hierarchy getting cropped. You can write your own text above or below the stack, informing users they can scroll it horizontally.
For instances where you want to display Hierarchy at the full size of the laptop or desktop screen (not just the maximum browser window size) download and use one of our free FullScreen stacks. Place Hierarchy inside a FullScreen stack. Now users can click a button and have your Hierarchy open at full screen, in compatible web browsers.
If you have configured a much larger Hierarchy, it may be wise to put it on its own webpage and apply a theme like ThemeFlood Blank with its width constraints disabled. This will allow users to display Hierarchy at the maximum size their browser window permits. If there is no other content on the webpage, then it also makes it easier for people to print Hierarchy and tape each part of it back together again to create a large poster. Hierarchy is specially optimised for print and PDF output.
Of course, not forgetting also, that you can split larger hierarchies into smaller hierarchies placed on separate webpages. For example if you were working on a family tree and had information on decedents that went back 'up' another fork, from a presentational perspective, it would probably be a lot easier to create a new instance of the Hierarchy stack, for that bloodline.
