Install with npm
npm install knopf.cssInstallation
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 yarn
yarn add knopf.cssAnd 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.
Playground
Try out the different built-in modifiers to find the style that you need.
You can also see the full test suite on this pen.
<button class="knopf">
Button
</button>