Principles

Kelp tries to be simple and pragmatic.

HUG CSS

Kelp uses a HUG CSS approach to its architecture.

1. Classless HTML for the core styles.
2. Utility classes to nudge and tweak elements when needed.
3. Group classes to simplify styling more complex components.

That means that you can use any valid HTML element without having to ever add a class to it, and it will all be styled as part of a cohesive design system.

<h1>Hello world!</h1>
<p>How are you today?</p>

<button>Say Hi</button>

Classes let you nudge-and-tweak base styles, and extend HTML elements into more complex components.

<!-- 
	A button in your secondary brand color,
	with a more subtle shade
-->
<button class="secondary subtle">Say Hi</button>

HTML Web Components

As much as possible, Kelp treats Web Components like a progressive enhancement instead of browser-native React.

Usable content is included in the component instead of getting passed in as another attribute.

This costs 
<format-number type="currency">
	1295
</format-number>.

Before JavaScript loads, the user still gets something usable…

This costs 1295.

And once JavaScript is ready, they get something even better…

This costs $1,295.

No Build Step

Kelp embraces modern HTML, CSS, and JavaScript. This means you can use it without any build steps or compile process.

You can customize everything using CSS variables and HTML attributes.

The CSS and JavaScript are unminified. The code you write is the code you run in the browser. Reading the code is easier. Debugging is easier.

Of course, if you already have a build process for your website or web app, you can plug Kelp into it. But you don’t need one if you don’t want. You can just open up a browser and go.