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.
Some systems addressed this by shorting modifiers, so
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! ContainersA container limits the width of the content inside to a maximum size, and typically centers itself inside its parent element.
For this (and many other) classes in Kelp, I use the substring selector ( I also use CSS variables to easily modify just one aspect of a class as needed.
This will target any class that includes With this approach,
Because of the substring selector, you don't need to include both the
Here's a demo of the 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 Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Want to share this with others or read it later? View it in a browser. |
0 Komentar untuk "[Go Make Things] 4 common layouts made easy with modern CSS"