knopf.css

Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Made by Frameable, the team behind Social hour and Subtask.

Installation

Just download and include the minified stylesheet on your website.

<link rel="stylesheet" href="/knopf.min.css">

You could also link to a CDN hosted file.

<link rel="stylesheet" href="https://unpkg.com/knopf.css/knopf.min.css">

Otherwise, you can use your favorite package manager to install it as a dependency.

Install with npm

npm install knopf.css

Install with yarn

yarn add knopf.css

And then import it wherever you are importing your styles.

import 'knopf.css'

Usage

By including knopf you get a bunch of goodies out of the box; however, you should probably customize the styles to meet your design needs, and there are multiple ways of doing just that.

Override default values

All of the base values can be changed by overriding the custom properties at root:

:root {
  --knopf-hue: 164;
  --knopf-saturation: 88%;
  --knopf-luminosity: 28%;
}

<button class="knopf">
  Button
</button>

Extend via modifier

You can also create your own class that sets new values for a particular instance:

.negative {
  --knopf-hue: 356;
  --knopf-saturation: 57%;
  --knopf-luminosity: 51%;
}

<button class="knopf negative">
  Button
</button>

Leverage the cascade

As with any CSS library, you can override the base class to make it your own. This aproach still lets you take advantage of the existing properties, variables and modifiers.

.knopf.knopf {
  --knopf-raised-height: 6px;
  border-block-end-color: hsl(var(--knopf-hover-background-color));
  border-block-end-width: var(--knopf-raised-height);
  margin-block-start: calc(var(--knopf-raised-height) * -1);
}

.knopf.knopf:hover {
  --knopf-raised-height: 2px;
  border-block-end-color: hsl(var(--knopf-active-background-color));
}

<button class="knopf large wide pill">
  Button
</button>

The same logic is applicable to all of the built-in modifiers, try out the playground to check them out.

I would also suggest taking a look at the source code for the full list of customizable custom properties.

You can see the full test suite on this pen.

Contributing

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.