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

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!