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

Circle CI NPM Version License
## 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

Title

Description

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

Title

Description

Read more
``` ## 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)