ZL
About Articles Contact
Published on Jan 30, 2024
Filed under:
#announcements,
#css,
#layout,
#splendidlabz

Splendid Layouts

If everything has gone according to plan, I will be launching the complete version of CSS Layout Patterns today.

Unfortunately, things didn’t go according to plan.

Though I must say it didn’t go according to the plan in a good way.

When I started CSS Layout Patterns, I wanted to create a library of CSS Layouts that you can copy-paste to build almost every layout you imagine.

Little did I know, I wasn’t just thinking about the library. Deeper in my psyche, I was looking to create a system that one can use to build any layout easily.

This system is now born — and undergoing improvements as we speak. I’m going to call it Splendid Layouts. (I found the courage to call it Splendid Layouts after chatting with you last week).

There are only 6 kinds of layouts

Upon hours of research (which I may release in a future blog post), I discovered that there are only 6 kinds of layouts.

  1. Shell layouts
  2. Macro layouts
  3. Micro layouts
  4. Positioning
  5. Layouts for effects
  6. Component based layouts

The system that I’ve created allows me to handle the first 4 types of layouts effortlessly.

I’ve already worked out some component layouts too — and you’ll be surprised how easy it will be to build Card layouts (without having to mess around with the paddings) when you get your hands on Splendid Layouts.

I’ll work on the fifth category, layouts for effects, last — this is the kind of layouts that make your website POP. They’re nice to have, but they’re not essential.

Now, I’m tempted to show you some examples, but I have my hands full creating the system and writing the documentation right now. So I ask you to be patient for a bit more.

Documentation will be released next week

I didn’t think I would have to create documentations, since the initial idea was to have a library of patterns you could copy and paste.

But now we’re talking about a system.

To use a system, you need to understand the system — hence the documentation is necessary.

Right now I’ve completed about 1/2 of the documentations for the system I’ve created. I should be able to release the documentations for what I’ve created so far next week.

When the documentations are done, patterns will begin to rain.

Soon — I will complete the promise I made to you when I created CSS Layout Patterns.

  • You will no longer have CSS Layout issues
  • You’ll have the CSS you need to create every grid
  • You’ll be able to create every component layout almost effortlessly.
  • And you’ll be able to combine the patterns to create layouts for every page you wish to make (both marketing sites and web applications)

I ask you to hold on for just a little bit longer. Patterns will soon begin to rain, and when it does, all the frustrations you have about CSS will evaporate.

Price has increased to $49 now

There will be no more Super Early Bird pricing ($29) since we now have more clarity over the project.

If you wish to purchase Splendid Layouts (previously CSS Layout Patterns), before prices go up even further, please do so as soon as you can.

Just click here to do so. (You’ll still see CSS Layout Patterns on this page because I just changed the name of the project to Splendid Layouts today, so I haven’t had the chance to update the website yet!).

Stay awesome, Zell

Previous My CSS of Late Next Splendid Layouts in here!

Join My Newsletter

I share what I’m learning on this newsletter: code, building businesses, and living well.

Sometimes I write about technical deep-dives, product updates, musings on how to live, and sometimes my struggles and how I’m breaking through.

Regardless of the type of content, I do my best to send you an update every week.

If you’re into making things and growing as a person, you’ll probably feel at home here.

“

Zell’s writing is very accessible to newcomers because he shares his learning experience. He covers current topics and helps all readers level up their web development skills. Must subscribe.

Chen Hui Jing
Chen Hui Jing — Web Developer
The Footer

General

Home About Contact Testimonials Tools I Use

Projects

Magical Dev School Splendid Labz

Socials

Youtube Instagram Tiktok Github Bluesky X

Follow Along

Email RSS
© 2013 - 2025 Zell Liew / All rights reserved / Terms