+201223538180

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Solution8 CSS & JavaScript Snippets for Creating Fashionable Weblog Layouts

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Solution8 CSS & JavaScript Snippets for Creating Fashionable Weblog Layouts

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Answer

The fantastic thing about running a blog is that it gives a approach to specific ourselves. We will accomplish that not solely by way of phrases, however design as effectively. The look and structure of a weblog can say lots about each the creator and the contents inside.

And because of fashionable CSS structure methods similar to CSS Grid and Flexbox, we’ve by no means had extra design potentialities. Whether or not you’re concerned with one thing complicated or minimalistic – there are many methods to perform a given structure.

With that, we’ve put collectively a group of lovely weblog layouts. They run the gamut of kinds and use circumstances. Some are geared in direction of dwelling pages, whereas others are laser-focused on single submit templates. Get pleasure from!

Fashionable Weblog Format with CSS Grid by Aysenur Turk

Maybe nothing demonstrates the magic of CSS Grid greater than this newspaper-like structure. Simply think about the hacks you’d need to resort to in any other case. That mentioned, the monochromatic colour scheme and sophisticated structure are one thing to behold. Bonus factors for using scrollbars to assist with responsiveness.

See the Pen Fashionable Weblog Format with CSS Grid by Aysenur Turk

Flex Weblog Entries by Mark Murray

This weblog structure encompasses a stable stability between photos and textual content. The cardboard UI is each engaging and makes nice use of the accessible area. Its timeless look solely provides to the general intuitiveness.

See the Pen Flex Weblog Entries by Mark Murray

grid-based weblog structure by Wealthy Lewis

Right here’s one other instance of what’s potential with CSS Grid. A clear masonry-style structure was constructed with just some traces of CSS – no JavaScript required. It is a good answer for these seeking to function a number of posts in a restricted quantity of display actual property.

See the Pen grid-based weblog structure by Wealthy Lewis

Responsive Minimal Weblog structure by Arjun Sreekumar

There’s one thing to be mentioned for simplicity – and this snippet makes nice use of it. It places the main focus squarely on typography and spacing. Who says you want photos to construct one thing lovely?

See the Pen Responsive Minimal Weblog structure by Arjun sreekumar

A Cool Weblog Format by Bhavik Joshi

Typography and whitespace are additionally necessary parts to contemplate for particular person weblog posts. On this snippet, we get an easy-to-read format – however there’s extra. Some fascinating mini sidebars and pictures/quotes break by way of the in any other case slim column width.

See the Pen A Cool Weblog Format by Bhavik Joshi

Day 20:Weblog Format by Joseph

Imagery performs a giant function on this super-clean weblog structure. Featured photographs are massive and draw consideration to every submit within the index. That’s complemented additional by daring headlines and a contrasting colour scheme.

See the Pen Day 20:Weblog Format by Joseph

CSS Grid Weblog Format by Kaustubh Menon

This snippet goes all-in with regards to colour. The mix of vibrant background colours and delightful pictures creates an immersive expertise. Additionally, be aware the design sample that reverses the picture and textual content placement for every submit.

See the Pen CSS Grid Weblog Format by Kaustubh Menon

Responsive Weblog Publish by Joshua Ward

There are a few good touches with this weblog submit structure. First, it’s purportedly written by actor Gary Busey (an adventurous choose in its personal proper). However the actual good things comes within the type of the general class of the design. The animated quote within the hero space, the lazy-loaded textual content, and the full-width breakout sections carry a novel model.

See the Pen Responsive Weblog Publish by Gary Busey by Joshua Ward

Running a blog Made Lovely

Again within the day, weblog design had a sure sameness – however not anymore. The examples above present that just about any sort of look is feasible. It’s all because of developments in CSS, mixed with good utilization of JavaScript. Oh, and nice content material definitely helps as effectively.

We hope these snippets have impressed you to construct one thing that displays who you’re and the message you wish to share. And when you’re searching for much more artistic concepts, take a look at our CodePen assortment.

Supply hyperlink

Leave a Reply