Never lose your train of thought again

The layout system that helps you build responsive layouts in seconds, without context switching, so you stay in your flow

Layouts can be a pain in the ass.

On bad days, they seem like energy blackholes that suck you in — before you know it, you’ve spent way too much time fiddling with CSS properties when you know you should be building a feature.

When you notice this, you pull back. But it’s already too late. You’ve lost track of what you were building — and you have to recall the context again, often from the beginning.

This is agonizing and it feels ineffective and inefficient.

“Is there a better way of doing this”? You might ask. But you also think “no”, because you just need to get better at Flexbox and CSS Grid and that should solve your problem.

Except… it didn’t — you still fiddle with layouts and you still lose context of what you were trying to do.

Maybe you blame your own discipline and focus. “I should know better than that. I shouldn’t mess around with CSS when I want to build features”. But you still end up messing around with CSS anyway.

I’ve been beating up myself over this issue for a long time. But recently, I recognize that people like us make great frontend developers:

• We’re meticulous
• We have a great eye for detail
• We want to do great work
• We don’t let anything get in our way
• And we care about providing an amazing experience for our users

But… losing track of what we’re doing is extremely frustrating. All of the thoughts we’ve built up over the last couple of hours is gone, just like that. And it’s just because we want to fix a simple CSS problem! (Haa…)

We know this isn’t right because we have bigger fish to fry, but we also know this is right because the craft is so dang important. And sweating the details makes us better at it.

I didn’t want to get caught in this dilemma forever. So, without making myself wrong, I tried to find a way to satisfy my desire for good craft and yet still be able to make layouts fast.

The Search For A Better Way To Handle Layouts

No matter how I searched, I could not find a good solution that would resolve this context-switching problem in an elegant way.

Frameworks don’t work because frameworks authors tend to think layout = 12-column grid. So they give you 12-column grid and call it a day (and it’s not even responsive).

Templates don’t work because you have to select the right template, read through the code, pick out the HTML structure and CSS properties you need, delete everything else that should not be there, test it, and debug if you made a mistake (which is very very common), to a point that writing HTML and CSS from scratch beats using templates (for me).

Tailwind doesn’t work because Tailwind simply gives you a different way of writing CSS. You still have to context-switch between CSS mode and whatever context you were holding on to.

So the only option left was to get better at CSS,

But that doesn’t work too… because I realized that no matter how good I got at CSS, I cannot expect my brain to regurgitate every HTML Structure and CSS pattern from memory within a couple of seconds. I STILL had to switch my brain into CSS mode…

I could remember all the possible patterns by heart, but that’s a lot of patterns to remember. If I had to remember these patterns, I’d rather just go into CSS mode…

(Haa..)

After months of research and testing, I finally found a breakthrough that lets me create layouts quickly without losing my train of thought.

If we don’t want to go into CSS mode and lose track of the context, we must remain high-level in our thinking.

To remain high-level in our thinking, we can use classes that match that high-level thinking model — like Sidebar, Masonry, Three Column Grid, and so on.

After researching deeply about layouts, I realize that a majority (maybe 90%?) of the CSS we write for layouts fall into 4 categories:

The requirements for each of these four layers are slightly different, so they need different CSS treatments:

• Shell layouts must be flexible enough to account for various holy-grail placements
• Macro layouts must enable responsive behavior and still be flexible enough for all kinds of placements
• Micro layouts needs to give you ways to shape the component to different styles
• Positioning layouts need quick precision so you don’t adjust top, left, bottom, and right positions manually, and so on.

When I realized this, I began building classes to support what each category needs — just like how we build functions to execute tasks without worrying about the implementation details within them.

The result of all of that is Splendid Layouts.

Splendid Layouts contains 25 layout “classes” spread over these four categories:

• 2 in shell
• 9 in macro
• 9 in micro
• 5 in positioning

I said “classes” because some for these classes are classes that you will use directly — like grid-simple. While some of these will be paired with a direction or placement — like edge-top.

Either way, these classes, paired or otherwise, are highly visual — you can see what they’re supposed to do; there’s no ambiguity; and so your mind can place them in the right location relatively quickly even when you create a layout from scratch.

All without diving deep into CSS-land!

Without further ado, here are the classes:

With these tools in your belt, you no longer need to remember the (who knows how many) CSS layout properties and value pairs.

• No more memorizing layout patterns
• No more losing your hard-earned “deep-work” context by diving into CSS mode
• Probably way way lesser frustration (and perhaps some joy) when creating CSS layouts.

These classes are mostly invisible once you have gotten used to them. Just like how Mac users can’t really switch back to Windows since Mac is well designed, I haven’t been able to go back after I began using these classes.

You have two ways to get access to Splendid Layouts today.

Choose Splendid Layouts if you want to work with our robust layout system today. Or get Splendid Pro to have an access pass to everything we have built for developers who value craft and DX.

Once you have decided:

• Click the respective button
• Make payment
• And you’ll receive an email with your password to login and read the guides for each tool.

Here’s what you can expect as you begin to use Splendid Layouts:

• Today: You can download and use it in your projects
• Tomorrow: You’ll be able to build simple layouts quickly — like responsive 3-column grids, masonry, and other straightforward stuff.
• Within this week: You might start using advanced classes like stack to create more complex layouts.
• By the end of this month: You might never want to go back to writing CSS properties or Tailwind utility classes for the use cases covered by Splendid Layouts.