# drops
> Primitive CSS classes to replace most commonly used styles
Latest version **0.3.2** (published 2025-10-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install drops
pnpm add drops
yarn add drops
bun add drops
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: no vulnerabilities; high maintenance score.
Warnings: low downloads; no types; no esm support; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.3.2 |
| Published | 2025-10-28 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Yegor Bugayenko |
| Maintainers | yegor256 |
| Keywords | css |
## Links
- npm: https://www.npmjs.com/package/drops
- Repository: https://github.com/yegor256/drops
- Issues: https://github.com/yegor256/drops/issues
- npm.io page: https://npm.io/package/drops
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 0.3.2 (latest) — 2025-10-28
- 0.3.1 — 2025-10-28
- 0.3.0 — 2025-08-29
- 0.2.0 — 2024-01-08
- 0.1.3 — 2019-10-04
- 0.1.2 — 2019-09-23
- 0.1.0 — 2019-09-23
- 0.0.0 — 2019-09-23
## README
# Simple but Useful CSS Classes
[](https://www.rultor.com/p/yegor256/drops)
[](https://github.com/yegor256/drops/actions/workflows/grunt.yml)
[](https://www.0pdd.com/p?name=teamed/yegor256/drops)
[](https://github.com/yegor256/drops/blob/master/LICENSE.txt)
[](https://badge.fury.io/js/drops)
[](https://hitsofcode.com/view/github/yegor256/drops)
First, you add it to your HTML:
```html
```
And then, instead of this:
```html
Hello
```
You do this:
```html
Hello
```
Here is a full list of "drops" (excluding the colors):
| CSS class | Style |
|---|---|
| `bold` | `font-weight: bold;` |
| `italic` | `font-style: italic;` |
| `underline` | `text-decoration: underline;` |
| `monospace` | `font-family: monospace;` |
| `serif` | `font-family: serif;` |
| `sans-serif` | `font-family: sans-serif;` |
| `right` | `text-align: right;` |
| `left` | `text-align: left;` |
| `center` | `text-align: center;` |
| `smaller` | `font-size: .8em;` |
| `larger` | `font-size: 1.2em;` |
| `invisible` | `display: none;` |
| `block` | `display: block;` |
| `inline` | `display: inline;` |
| `inline-block` | `display: inline-block;` |
| `position-static` | `position: static;` |
| `position-relative` | `position: relative;` |
| `position-absolute` | `position: absolute;` |
| `position-fixed` | `position: fixed;` |
| `position-sticky` | `position: sticky;` |
There is also a set of drops for responsive design, like `desktop-only` and
`no-printer` for `desktop`, `printer`, `mobile`, and `tablet`.
Also, all [140 web colors](https://en.wikipedia.org/wiki/Web_colors)
are supported, like `tomato` or `blueviolet`.
## How to contribute
Fork repository, make changes, send us a pull request. We will review
your changes and apply them to the `master` branch shortly, provided
they don't violate our quality standards. To avoid frustration, before
sending us your pull request please run full Grunt build:
```bash
npm install
npm test
```
---
_Source: https://npm.io/package/drops · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._