» Tanpa Label » [Go Make Things] The split layout with modern CSS

[Go Make Things] The split layout with modern CSS

By

​

On Monday, I shared how Kelp UI implements the container layout pattern. And yesterday, we learned about the cluster layout.

Today, we're going to look at another layout pattern in Kelp: the split. Let's dig in!

The split layout

A split layout is when you have two elements in a section, and want to push them both to the edges of the layout.

A common example of this pattern would be a logo and nav items on a website header.

<div class="split">  	<a href="/">Kelp UI</a>  	<div>  		<ul><!-- Nav Items... --></ul>  	</div>  </div>

For this layout, we'll again remove any margin on the direct child elements so that we can control that directly.

.split > * {  	margin: 0;  }

Then we'll again use flexbox, this time with justify-content: space-between to push the two items apart from each other. We'll also again use --gap variable for easy adjustment later.

.split {  	--gap: 1em;  	display: flex;  	justify-content: space-between;  	gap: var(--gap);  }

This pattern can also be used with three items. You sometimes see this pattern where a header has a logo to start, so nav in the middle, and then some social media icons at the end.

<div class="split">  	<a href="/">Kelp UI</a>  	<div>  		<ul><!-- Nav Items... --></ul>  	</div>  	<div>  		<ul><!-- Social Icons... --></ul>  	</div>  </div>

Here's a demo of the .split layout.

Stacks on stacks on stacks

Tomorrow, we'll learn "the stack." And on Friday, we'll look at how Kelp uses utility classes to adjust 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,
Chris

​

Want to share this with others or read it later? View it in a browser.​

​

Share :

Facebook Twitter Google+ Lintasme

Related Post:

0 Komentar untuk "[Go Make Things] The split layout with modern CSS"

Back To Top