The stack layout in modern CSS

This week, we learn how Kelp UI implements the container layout pattern, the cluster layout, and the split layout.

Today, we’re going to look at one last layout pattern in Kelp: the stack. Let’s dig in!

The stack layout

In Kelp, most elements have spacing applied them by default.

This lets you write content without having to worry about margins or padding between elements. You don’t need to wrap everything in classes.

But sometimes, you want to more tightly control the spacing between things. A common example of this might be a form, where you want a controlled amount of space between each field.

This stack layout is perfect for that.

<form class="stack">
	<div>
		<label for="username">Username</label>
		<input type="text" id="username">
	</div>
	<div>
		<label for="password">Password</label>
		<input type="password" id="password">
	</div>
	<button>Login</button>
</form>

As always, we’ll remove any margin from the direct child elements so that we can control that directly.

.stack > * {
	margin: 0;
}

Then, we’ll use flexbox with a flex-direction of column to create a vertical layout (in top-to-bottom languages).

The --gap variable, as always, let’s us control and easily modify the amount of spacing between our items.

.stack {
	--gap: 1em;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

Here’s a demo of the .stack layout.

Adjusting spacing

With all of these layouts, we’ve used the gap property to control the space between items. Tomorrow, I’ll share the small assortment of utility classes Kelp uses to adjust that spacing.

You can learn more about Kelp over at KelpUI.com.

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.

Cheers,
Chris