I created a copy of Red Onion's Daily Prophet using CSS Flexbox

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...

1. Using object-fit:cover to crop an image and display the center

2. 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.