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.
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!
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:
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 😊
Thank you!