> [!WARNING]
> This is still a beta version; no feature compatibility is guaranteed.

![puff](https://github.com/dknight/puff/blob/main/docs/assets/img/feather.png?raw=true)

# puff

[![License MIT](https://img.shields.io/npm/l/@dknight/puff)](https://github.com/dknight/puff/blob/main/LICENSE)
[![Version](https://img.shields.io/npm/v/@dknight/puff)](https://www.npmjs.com/package/@dknight/puff)
[![Size](https://img.shields.io/github/size/dknight/puff/dist/puff.min.css.gz)](https://github.com/dknight/puff/blob/main/dist/puff.min.css.gz)

***puff*** is a micro full-featured CSS framework for quick UI prototyping. puff is based on design tokens. Combining just several tokens gives an almost limitless number of UI combinations.

[Documentation](https://dknight.github.io/puff/)

## Features

- 🪶 Lightweight ~2kb (minified + gzipped)
- 🚀 Easy to install and launch
- 🚂 No dependencies
- 🌐 Supports all modern browsers
- 📐 Classic 12-column grid
- 🧱 Design tokens based
- 🔩 Customize with CSS custom properties
- 🌙 Dark them included
- 💬 Dialog and dropdown out-of-box
- 🟩 Valid semantics
- 👨‍👩‍👦‍👦 Accessible
- 🖨️ Sustainable printing

## Install

Installation is straightforward; just include the CSS file into your HTML page in any possible way.

```html
<link rel="stylesheet" href="puff.min.css" />
```

or install it from <a href="https://www.npmjs.com/package/puff">NPM</a>.

```sh
npm install @dknight/puff
```

## Usage

For detailed usage instructions, please go to the [documentation page](https://dknight.github.io/puff/).

## Development

### Build

```sh
npm run build
```

### Watch for changes

```sh
npm run watch
```

### Serve

```sh
npn run serve
```

## Contribution

Any help is appreciated. Found a bug, typo, inaccuracy, etc.? Please do not hesitate to make a pull request or issue.

## License

MIT 2023