Need a developer but don't need a full-time employee? I now offer subscription full stack engineering. Ship faster and build better systems. Pause or cancel any time.
Over the last week, we've looked at how Kelp UI implements four different layouts with modern CSS: the container layout pattern, the cluster layout, the split layout, and the stack.
Today, I wanted to show you how Kelp uses the .space-* class to control spacing. Let's dig in!
An example: the stack
The stack layout is a good example of where you may want to adjust spacing a bit.
Let's imagine you have a heading and subheading.
<h1>Acme Anvil Company</h1> <p>Stop roadrunners in their tracks!</p>
Normally, there would be a big gap between the h1 and p elements here. Using a .stack pattern, we can tighten it up a bit.
<div class="stack"> <h1>Acme Anvil Company</h1> <p>Stop roadrunners in their tracks!</p> </div>
Here's a demo with and without the .stack class.
But there's still a gap between those two items. In some situations, you might prefer a smaller gap, a bigger gap, or none at all.
Let's look at how to do that.
The .space-* classes
Kelp includes a handful of utility classes, and one of those is the .space-* class family.
These adjust the --gap CSS variable, adjusting the amount of space used in any of the Flexbox or CSS Grid based layouts.
.space-0 { --gap: 0; } .space-2xs { --gap: 0.25em; } .space-xs { --gap: 0.5em; } .space-s { --gap: 0.75em; } .space-m { --gap: 1em; } .space-l { --gap: 1.5em; } .space-xl { --gap: 1.75em; } .space-2xl { --gap: 2em; } .space-3xl { --gap: 3em; }
Looking at our example from earlier, we could tighten up the space between our h1 and p elements by adding .space-2xs to the .stack…
<div class="stack space-2xs"> <h1>Acme Anvil Company - Stack</h1> <p>Stop roadrunners in their tracks!</p> </div>
Here's an updated demo.
What now?
If you want to learn more about Kelp, head over to KelpUI.com and sign up for updates.
Sometime next week, I'll be releasing some very alpha HTML + CSS based components for folks to start playing around with. And I've got a handful of HTML Web Components ready to start sharing as well.
Next week, I'd like to take a look at how Kelp handles adjusting colors and styles on various elements.
Learn more about subscription full stack engineering. Ship faster and build better systems.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
.jpg)
0 Komentar untuk "[Go Make Things] Controlling spacing in modern CSS layouts"