loading...
Cover image for I created a copy of Red Onion's Daily Prophet using CSS Flexbox

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

analizapandac profile image Ana Liza Pandac ・3 min read

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.

Daily Prophet's sections as seen 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.

Items displayed inline

In order to display each child in it’s own block, you can use the flex-direction property as column.

Items displayed in blocks

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.

Discussion

pic
Editor guide
Collapse
flexdinesh profile image
Dinesh Pandiyan

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.

Collapse
analizapandac profile image
Ana Liza Pandac Author

Thanks Dinesh. Yup, I'm looking forward to it as well.:D

Collapse
ben profile image
Ben Halpern

This is great, definitely bookmark material for future flexbox reference.

Collapse
analizapandac profile image
Ana Liza Pandac Author

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.

Collapse
ben profile image
Ben Halpern

It’s also now super well supported and highly used. No reason to hesitate on making great use.

Thread Thread
analizapandac profile image
Ana Liza Pandac Author

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.

Collapse
ccleary00 profile image
Corey Cleary

this is top notch

Collapse
analizapandac profile image
Collapse
analizapandac profile image
Ana Liza Pandac Author

I've reimplemented this by using css grid and flexbox together. You can check it out here dev.to/analizapandac/using-css-gri...

Collapse
shahdevarsh profile image
ShahDevarsh

Thanks for giving new stuff

Collapse
analizapandac profile image
Ana Liza Pandac Author

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.

Collapse
fridanyvall profile image
Frida Nyvall

Feeling very happy to have inspired your post. Keep up the good work! Cheers from @fridanyvall , Red Onion (@RedOnionDev)

Collapse
analizapandac profile image
Ana Liza Pandac Author

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.

Collapse
rrconstantin profile image
rrconstantin

It would have been more awesome if you animated the hurricane :D

Collapse
analizapandac profile image
Ana Liza Pandac Author

That would be a really cool effect. But with the weather right now, I don't want to add a new one.:D