This content originally appeared on Go Make Things and was authored by Go Make Things
I’ve been working hard on getting Kelp, my UI library for people who love HTML, ready to share publicly.
A big part of the library design has been providing layout options that are flexible and give you a lot of options, without resulting classitis like you see in systems like Bootstrap and Tailwind.
This week, I wanted to share four common layouts, and how they’re handled in Kelp. Let’s dig in!
What we don’t want!
Years ago, Bootstrap and systems like BEM popularized having a base class, and modifying it with lots of utilities classes.
Because classes were often scoped to specific components, class names could get pretty long and unwieldy.
<div
class="callout callout_secondary font-large padding-xlarge margin-bottom-small">
...
</div>Some systems addressed this by shorting modifiers, so padding-* becomes p-*, bottom becomes b, small becomes s, and so on.
<div
class="callout callout_secondary font-l p-xl mb-s">
...
</div>Better, I guess. But a little cryptic!
I love utility classes, but also think that it’s easy to overuse them. I’m being really careful about adding too many for things that might be better handled with other approaches.
With that out of the way, let’s look at the layouts!
Containers
A container limits the width of the content inside to a maximum size, and typically centers itself inside its parent element.
<div class="container">
...
</div>For this (and many other) classes in Kelp, I use the substring selector (*=) to match all classes that use a naming pattern.
I also use CSS variables to easily modify just one aspect of a class as needed.
[class*="container"] {
--width: 38em;
margin-left: auto;
margin-right: auto;
max-width: var(--width);
width: 88%;
}This will target any class that includes .container, and establishes a --width variable.
With this approach, .container is the default class with a width of 38em. I can include alternate versions that have different widths, simply by defining a new value for the --width variable later in the cascade.
.container-xs {
--width: 18em;
}
.container-s {
--width: 28em;
}
.container-l {
--width: 52em;
}
.container-xl {
--width: 60em;
}
.container-2xl {
--width: 80em;
}Because of the substring selector, you don’t need to include both the .container and .container-xl classes to adjust a container size. You can just use the right one for the size.
<!-- Do this -->
<div class="container-xl">...</div>
<!-- NOT this -->
<div class="container container-xl">...</div>Here’s a demo of the .container class.
Moar patterns!
Tomorrow, we’ll look at the cluster pattern. Later in the week, we’ll also look at how Kelp handles split and stack patterns. And on Friday, I’ll share how we can use some simply utility classes to tweak the spacing.
You can learn more about Kelp over at KelpUI.com.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-06-09T14:30:00+00:00) 4 common layouts made easy with modern CSS. Retrieved from https://www.scien.cx/2025/06/09/4-common-layouts-made-easy-with-modern-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.