This Just In: Excellent News and Magazine CSS Layouts
For those of us who experiment with CSS, it’s an exciting time. The advent of CSS Grid and Flexbox have opened up a whole new world of page layout possibilities.
And one of the more interesting uses for these tools is their integration within news and magazine-style websites. They often have more complex and unique layout requirements than other genres. It has led to some very creative solutions.
Today, we’ll show you some exciting examples of both news index page layouts and even a few for individual articles as well. Each one is hosted on CodePen, so you can see exactly how they were created.
Great Grid
Here’s a prime example of CSS Grid’s fitness for a news page. It’s a 12-column layout, with a large feature story up top that takes up two-thirds of the first row. From there, it alternates between one-third and two-thirds stories below and a one-third listing along the right. The look creates a nice balance and allows each story to stand out.
See the Pen
News Layout by Marc Müller
Artistic Touch
These newfangled CSS techniques are often used to imitate classic print layouts. This magazine layout uses Flexbox to add retro shapes, multicolumn flowing text and a large featured image.
See the Pen
Magazine Layout by Raisa Yang
A Fully-Visual Experience
This article layout looks attractive, yet fairly standard on first glance. A massive image on the left is paired up with nice typography on the right. But start scrolling and you’ll see what makes this one stand out. The first section of text scrolls as the image stays in place. Go further and you’re met with full-width images and multiple columns of text. It’s a clever design that will keep readers interested.
See the Pen
Article Development // Modular CSS Grid Layout Sections by Brian Haferkamp
Big Steps
The modern age of news sites has made visual stories, ones without a lot of text, quite popular. Here’s an interesting layout that could be a great fit for explaining multistep processes or listing the popular posts of the day.
See the Pen
CSS Grid Magazine Layout by Elzette
Masonry Blocks
This CSS Grid-based masonry layout of posts has several things going for it. First, the layout is complex – but without being disorienting. The use of faded background images and legible typography make it easy to distinguish one article from the next. And the stunning hover effects make for a fun and effective user experience.
See the Pen
CSS Grid Layout as Masonry case study by @Kseso by Kseso
Break Past Your Limits
So-called “break out” sections are a popular feature within articles. They are great for adding emphasis to important quotes or even images. But the CSS used to require all sorts of hacks in order to get an element to go beyond a fixed-width container. That is, until CSS Grid came along. This example demonstrates just how easy it is to integrate into your layout.
See the Pen
Breaking Out With CSS Grid Layout by Steven Monson
Barebones
Sometimes it’s nice to see an example layout that eschews content. This makes it easier to grasp, especially if you’re just learning a new technique such as CSS Grid. With a clear outline of each container and helpful terminology, you’ll gain a better understanding of how this one was put together.
See the Pen
CSS Grid Layout – New Terminology by Stacy
Pretty Posts
Post grids are a terrific solution for both news websites and blogs. A well-designed one is easy to read, provides some whitespace and adds interactivity. All of those traits are well-represented here. The clean card layout is easy on the eyes, while the hover effects give it a high tech feel.
See the Pen
Expandable Post Grid by Daniel Högel
Good News
Designing a news-oriented website can be a real challenge. It requires a strategy for getting your best content in front of users while ensuring that it entices them to click. And, once they are reading an article, you want to provide them with the best experience possible.
Thankfully, CSS layouts have never been more capable of helping you achieve these goals. Looks that used to be reserved for desktop publishing software are now easily replicated – as many of the snippets above demonstrate.
The first step is to take some time to think about how you want to present your content. From there, you can use one of these examples as a starting point to make it come to life.
If you’d like to see even more unique layout snippets, check out our CodePen collection.
The post This Just In: Excellent News and Magazine CSS Layouts appeared first on Speckyboy Design Magazine.