https://github.com/dknight/puff

Full-featured, CSS micro framework with tiny footprint
https://github.com/dknight/puff

css framework light lightweight lightweight-framework micro

Last synced: 26 days ago
JSON representation

Full-featured, CSS micro framework with tiny footprint

• Host: GitHub
• URL: https://github.com/dknight/puff
• Owner: dknight
• License: mit
• Created: 2023-08-12T09:30:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-19T22:48:35.000Z (over 1 year ago)
• Last Synced: 2025-12-27T02:07:44.566Z (6 months ago)
• Topics: css, framework, light, lightweight, lightweight-framework, micro
• Language: CSS
• Homepage: https://dknight.github.io/puff/
• Size: 841 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
> [!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

```

or install it from NPM.

```shell

npm install @dknight/puff

```

## Usage

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

## Development

### Build

```shell

npm run build

```

### Watch for changes

```shell

npm run watch

```

### Serve

```shell

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