Hierarchy view component with pure CSS (SASS)

Hi reader!

This is my first blog post-tutorial ever :). I decided to write posts from my experience in Web design and development.

Recently I got a task at my work to design the flow of purchase order through jobs. It might sound weird but the component I came up with might be useful for displaying relational data.

Let`s Start

The final component looks complex but in reality there is only one key component nested in each other. This is how our hero looks:

So, it contains one parent element with N number of child elements. The component HTML structure is composed of two blocks: .hv-item-parent and .hv-item-children -wrapper for children.

Base layout

For styling we will use flexbox (because it`s really flex):

Layout scss

We will get something like this:

Cool! Actually this is what we want. Only one thing is missing. Guess what..

Exactly! - Lines, lines, lines!

Creating lines

For creating lines we’re going to use css pseudo elements. Parent element will have only bottom line. Child element needs two lines — one vertical(on top of it) and one horizontal (which will connect children to each other). Here is the illustration what we are going to build:

Parent pseudo class:

Pseudo class for parent element line

Child pseudo class:

Pseudo classes for child element lines

Our component is ready. Now you can replace .hv-item-child with any thing. If we replace one child element with entire component we will get nested hierarchi view as it’s shown below:

here are DEMOS of the component.

This is a GitHub repo of complete component with demos.

And down here is a heart icon. If you click(or tap), it will turn into green 💚. Don`t believe? Try 😊

Thank you!