Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ruedap/emma.css
🍴 Emma.css { utility-classes: emmet-like; }
https://github.com/ruedap/emma.css
bem bower css css-framework emmet haml html npm rails sass scss suit-css utility utility-classes
Last synced: 5 days ago
JSON representation
🍴 Emma.css { utility-classes: emmet-like; }
- Host: GitHub
- URL: https://github.com/ruedap/emma.css
- Owner: ruedap
- License: mit
- Created: 2015-03-15T09:02:20.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T18:17:01.000Z (7 days ago)
- Last Synced: 2024-10-29T20:24:21.806Z (7 days ago)
- Topics: bem, bower, css, css-framework, emmet, haml, html, npm, rails, sass, scss, suit-css, utility, utility-classes
- Language: SCSS
- Homepage: https://www.npmjs.com/package/emma.css
- Size: 1.29 MB
- Stars: 55
- Watchers: 3
- Forks: 13
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Emmet-like utility classes for rapid and easy front-end development.
## 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
```
[SUIT CSS](https://suitcss.github.io/) naming convention + Emma.css (set prefix `u-`):
``` html
```
## 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)