Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frameable/knopf.css
Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications
https://github.com/frameable/knopf.css
css css-framework design-system knopf ui-component utility-classes
Last synced: 3 months ago
JSON representation
Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications
- Host: GitHub
- URL: https://github.com/frameable/knopf.css
- Owner: frameable
- License: mit
- Created: 2019-07-30T20:50:14.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T00:06:25.000Z (over 1 year ago)
- Last Synced: 2024-07-04T23:54:15.345Z (4 months ago)
- Topics: css, css-framework, design-system, knopf, ui-component, utility-classes
- Language: CSS
- Homepage: https://knopf.dev
- Size: 3 MB
- Stars: 199
- Watchers: 10
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- Awesome-CSS-Resources - knopf.css: - ready applications. (Frameworks / Resources / K)
README
# knopf.css
Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.
Made by [Frameable](https://frameableinc.com/), the team behind [Social hour](https://socialhour.com) and [Subtask](https://subtask.co).
## Installation
Just [download](http://knopf.dev/knopf.css.zip) and include the minified stylesheet on your website.
```html
```
You could also link to a CDN hosted file.
```html
```
***
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.
```node
import 'knopf.css'
```
## Usage
By including **knopf** you get a [bunch of goodies](https://codepen.io/HiroAgustin/full/mdVRdVg) 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:
```css
:root {
--knopf-hue: 164;
--knopf-saturation: 88%;
--knopf-luminosity: 28%;
}
```
```html
Button
```
### Extend via modifier
You can also create your own class that sets new values for a particular instance:
```css
.negative {
--knopf-hue: 356;
--knopf-saturation: 57%;
--knopf-luminosity: 51%;
}
```
```html
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.
```css
.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));
}
```
```html
Button
```
***
The same logic is applicable to all of the built-in modifiers, try out the [playground](https://knopf.dev/#Playground) to check them out.
I would also suggest taking a look at the [source code](https://github.com/team-video/knopf.css/blob/main/knopf.css) for the full list of customizable custom properties.
You can see the full test suite on [this pen](https://codepen.io/HiroAgustin/full/mdVRdVg).
## Contributing
Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved.