Emmet-like utility classes for rapid and easy front-end development.

Example

| Emma.css class | Emmet 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 (all classes)

Emma.css only:

`` html


Title

Description

Read more

SUIT CSS naming convention + Emma.css (set prefix u-):

` html


Title

Description

Read more

`sh
npm install emma.css
`

Rails (RubyGems)

`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

$3

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)
`

$3

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)
`

$3

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)
`

$3

You can change default sizes or colors by variables:

` 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.

Author

ruedap