# emma.css

> Emma.css { emmet-like utility classes }

Latest version **0.16.1** (published 2026-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install emma.css
pnpm add emma.css
yarn add emma.css
bun add emma.css
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.16.1 |
| Published | 2026-04-07 |
| First published | 2015-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=20.0.0 |
| Dependencies | 0 |
| Unpacked size | 137.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 56 |
| Author | ruedap |
| Maintainers | ruedap |
| Keywords | sass, scss, css, emmet, utility, coding |

## Links

- npm: https://www.npmjs.com/package/emma.css
- Repository: https://github.com/ruedap/emma.css
- Issues: https://github.com/ruedap/emma.css/issues
- npm.io page: https://npm.io/package/emma.css

## 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.16.1 (latest) — 2026-04-07
- 0.16.0 — 2026-04-07
- 0.15.1 — 2022-10-08
- 0.15.0 — 2018-05-28
- 0.14.0 — 2018-04-19
- 0.13.0 — 2018-03-28
- 0.12.0 — 2018-03-28
- 0.11.0 — 2017-07-30
- 0.10.0 — 2017-05-27
- 0.9.0 — 2017-05-21
- 0.8.0 — 2017-04-10
- 0.7.0 — 2016-08-08
- 0.6.0 — 2016-06-03
- 0.4.0 — 2015-04-25
- 0.3.0 — 2015-03-25
- … 1 more at https://npm.io/package/emma.css/versions

## README

<h1 align="center">
<img src="https://github.com/ruedap/emma.css/raw/assets/images/logo-box.svg" style="max-width:100%;" />
</h1>

<p align="center">Emmet-like utility classes for rapid and easy front-end development.</p>

<div align="center">
<a href="https://circleci.com/gh/ruedap/emma.css"><img src="https://circleci.com/gh/ruedap/emma.css.svg?style=shield" alt="Circle CI"></a>
<a href="https://www.npmjs.com/package/emma.css"><img src="https://img.shields.io/npm/v/emma.css.svg?style=flat" alt="NPM Version"></a>
<a href="https://github.com/ruedap/emma.css/blob/master/LICENSE"><img src="https://img.shields.io/github/license/ruedap/emma.css.svg" alt="License"></a>
</div>

## Example

| Emma.css class | [Emmet](https://docs.emmet.io/cheat-sheet/) abbreviation | Declaration (Expanded abbreviation)                                   |
|-----------|---------|---------------------------------------------------------------------|
| .d-b      | d-b     | display: block;                                                     |
| .d-fx     | d-fx    | display: flex;                                                      |
| .m-a      | m-a     | marign: auto;                                                       |
| .m0       | m0      | margin: 0;                                                         |
| ―         | m-5     | margin: -5px;                                                      |
| .w1       | w1      | width: 1px;                                                         |
| .h100p    | h100p   | height: 100%;                                                       |
| .mah50vh  | mah50vh | max-height: 50vh;                                                   |
| .ff-t     | ff-t    | font-family: "Times New Roman", Times, Baskerville, Georgia, serif; |
| .fz16     | fz16    | font-size: 16px;                                                    |
| .fz-sm    | ―       | font-size: small;                                                   |
| .pb-md    | ―       | padding-bottom: 1.0rem; *(default value)*                           |
| .ml-lg    | ―       | margin-left: 2.0rem; *(default value)*                              |

See [emma.css](emma.css) (all classes)

Emma.css only:

``` html
<article class="cf">
  <img class="d-b fl-l w-a mr-xl bdrs3" src="foo.png">
  <div class="fl-l ml-lg p-md">
    <h1 class="m0 ff-t">Title</h1>
    <p class="wow-bw wfsm-a">Description</p>
    <a class="d-ib fz-sm lh2" href="#">Read more</a>
  </div>
</article>
```

[SUIT CSS](https://suitcss.github.io/) naming convention + Emma.css (set prefix `u-`):

``` html
<article class="Excerpt u-cf">
  <img class="Excerpt-thumbnail u-d-b u-fl-l u-w-a" src="foo.png">
  <div class="u-fl-l u-ml-lg u-p-md">
    <h1 class="Excerpt-title">Title</h1>
    <p class="u-wow-bw u-wfsm-a">Description</p>
    <a class="Excerpt-readMore" href="#">Read more</a>
  </div>
</article>
```


## Installation

Install or download Emma.css from one of these sources.

```sh
npm install emma.css
```

**Rails** ([RubyGems](https://rubygems.org/gems/emma-css-rails))

```sh
gem install emma-css-rails
```

**Download**

https://github.com/ruedap/emma.css/releases

**Alfred**

https://github.com/ruedap/alfred-emma-css-workflow


## Getting Started

### Basic usage

SCSS:

``` scss
@import "emma.css/scss/all";
```

CSS output:

``` css
.pos-s { position: static !important; }
.pos-a { position: absolute !important; }
.pos-r { position: relative !important; }
(snip)
```

### Add prefix to utility classes

You can add prefix to utility classes by `$emma-prefix` variable:

``` scss
$emma-prefix: "u-"; // Set prefix
@import "emma.css/scss/all";
```
CSS output:
``` css
.u-pos-s { position: static !important; }
.u-pos-a { position: absolute !important; }
.u-pos-r { position: relative !important; }
(snip)
```

### Remove !important annotations

You can remove `!important` annotations by `$emma-important` variable:

``` scss
$emma-important: false; // Remove !important annotations
@import "emma.css/scss/all";
```
CSS output:
``` css
.pos-s { position: static; }
.pos-a { position: absolute; }
.pos-r { position: relative; }
(snip)
```

### Change default sizes or colors

You can change default sizes or colors by [variables](scss/_vars.scss):

``` scss
$emma-padding-md: 20px;  // default: `1.0rem`
$emma-color-black: #000; // default: `#111111`
@import "emma.css/scss/all";
```


## License

Released under the [MIT license](LICENSE).


## Author

[ruedap](https://github.com/ruedap)

---
_Source: https://npm.io/package/emma.css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._