If you have ever seen Red Onion’s Daily Prophet page then you’d know that it's a really awesome and creative layout which is built using CSS Grid. It’s similar to an old-style print layout which seems quite challenging to replicate on the web. Creating a clone of it using flexbox instead of css grid would be a really good challenge if you want to learn how to use the flexbox layout. (I guess that’s what my senior also thought when he sent me the link.)
Although flexbox and css grid have been around for awhile now, I haven’t really used them that much since I mostly relied on the existing css frameworks most of the time (I know).
So I decided to this exercise to find out if it's really complicated as it seems and here's what I've learned.
Seeing in boxes
The page layout seems very complicated when you first look at it but what I found is that it’s easier if I start looking at each section as a box. This is what the page looks like in boxes.
Inline and blocked elements
Some of the boxes are displayed inline to each other while others are displayed in blocks. By default when a flexed parent box has several children, those children are displayed beside each other in a row.
In order to display each child in it’s own block, you can use the flex-direction property as column.
Wrapping overlapping elements
One of the most important thing to also consider is how the page will look like in smaller devices (or the page responsiveness). By default when using flexbox,items will not be wrapped into a new line. So as the screen gets smaller, some of the content will not be visible. In order to fit them to the new viewport size, you have to declare the flex-wrap property as wrap.
.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
.child {}
}
Centering things inside an element
If I need to vertically and horizontally center a text inside the element, in the past, I would’ve use positioning on the parent and child element.
But with flexbox, you can use justify-content and align-items for this exact behaviour.
<div class="exclusive-story__marker">exclusive</div>
.exclusive-story__marker {
display: flex;
align-items: center;
justify-content: center;
}
Additional learnings
Use substitute fonts when the original font is not available
The original page is using Headline One HPLHS for the story headlines but I can’t find the exact font on Google fonts so I decided to use serif instead since it looks appropriate for newspaper headlines as well. It would be nice to have the exact same font but it’s not necessary at the moment. My goal is to learn how to use flexbox not making a pixel perfect replica of a page.
Avoid using height on divs to prevent overlapping content on smaller screens
Seeing the page sections in terms of boxes is a very helpful approach but it also made me think in heights. Yes, heights. I started assigning heights to the boxes that seems to have a very specific height like the publication name section and the exclusive story section.
But when I decreased the size of the viewport, the text and images inside it overlaps the flex container so I decided to remove those height declarations.
Lastly...
Using object-fit:cover to crop an image and display the center
Using the first-letter pseudo-code to make the first letter of the paragraph bigger than the rest of the sentence just like how it behaves in a newspaper.
Overall, I really liked doing this exercise. I gained more understanding on how flexbox works. There’s still a whole lot of flex properties I haven’t used like flex-basis, order, flex-shrink but for now this is okay, I can learn them as I go on.
Thanks for reading and you can check the cloned page @CodePen.
Have feedback/comments, please let me know.
*Daily Prophet's copyright reserved to Red Onion.
P.S. This wouldn't be possible without the encouragement of my senior/mentor Dinesh Pandiyan @flexdinesh. Thank you po.
Top comments (15)
This is amazing. Writing down what you learned and the process of how you learned helps others in the same boat. Looking forward to more of your posts.
Thanks Dinesh. Yup, I'm looking forward to it as well.:D
This is great, definitely bookmark material for future flexbox reference.
Thanks Ben. Flexbox is such a powerful tool to learn and a really nice addition to our front-end skill set. I haven't fully utilized all of flexbox properties on this exercise but I have time to learn them.
It’s also now super well supported and highly used. No reason to hesitate on making great use.
Yup, I'm building my portfolio site and I'm planning to use it together with CSS grid. It would be a really good learning experience as well.
this is top notch
Thanks Corey.
I've reimplemented this by using css grid and flexbox together. You can check it out here dev.to/analizapandac/using-css-gri...
Thanks for giving new stuff
You're welcome.:)
I'm currently re-implementing it again using flexbox, css grid and multi-columns layout altogether. Pretty interesting stuff, maybe I'll write about what I learned from it as well.
Feeling very happy to have inspired your post. Keep up the good work! Cheers from @fridanyvall , Red Onion (@RedOnionDev)
Thank you for the inspiration as well☺️. I'm glad to see you here. I'm sure I will learn a lot from your posts. Keep up the awesome work.
It would have been more awesome if you animated the hurricane :D
That would be a really cool effect. But with the weather right now, I don't want to add a new one.:D