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.
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.
For styling we will use flexbox (because it`s really flex):
We will get something like this:
Cool! Actually this is what we want. Only one thing is missing. Guess what..
Exactly! - Lines, lines, 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:
Child pseudo class:
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 😊