0.3.0 • Published 9 years ago
CSS Utility Classes 
A collection of CSS utility classes - based on Emmet shorthand conventions - to aid in object-oriented CSS development.
Usage
Terse OOCSS classes can be a powerful tool for rapid and scalable development. They can be used independently, or to augment existing objects.
<div class="card">
<div class="card__photo ta-c">
<h3>Business Name</h3>
<div class="fz-s">Some City, America</div>
</div>
<div class="card__cell">
<h3 class="mt-xs mb-xxs">John Doe</h3>
<div class="fz-s"><span class="fw-b">Member number:</span> 081425</div>
<div class="mt mb-l">
123 Main St.<br />
Columbus, OH 43215
</div>
<a href="#" class="button">Select Account</a>
</div>
</div>
Install
You can download the repo, or install via Bower:
$ bower install css-utils --save-dev
The Classes
Display
| Selector | Responsibility |
|---|
.d-b | display block |
.d-i | display inline |
.d-ib | display inline-block |
.d-tb | display table |
.d-tbc | display table-cell |
.d-tbr | display table-row |
.vh | visually hidden, but available for screen readers |
Floats
| Selector | Responsibility |
|---|
.fl-l | float left |
.fl-r | float right |
.fl-n | float none |
.cl-b | clear both |
.cl-l | clear left |
.cl-r | clear right |
.cf | clear fix (contain floats) |
Media
| Selector | Responsibility |
|---|
.rwd-img | responsive image (max-width: 100%) |
.rwd-img-st | stretched responsive image (width: 100%) |
.intrinsic | intrinsic ratio wrapper; default 16:9 ratio |
.ir | image replacement (@mixin included) |
Position
| Selector | Responsibility |
|---|
.pos-r | position relative |
.pos-s | position static |
.pos-a | position absolute |
.pos-f | position fixed |
Spacing
| Selector | Responsibility |
|---|
.{p/m}{t/r/b/l}-{xxs/xs/s/l/xl/xxl} | apply padding/margin in a given direction (top/right/bottom/left) in a given increment. |
.{p/m}-0 | remove all padding/margin |
.m{r/l}-a | margin left/right auto (centering) |
| Increment | Value* |
|---|
xxs | 0.146em |
xs | 0.236em |
s | 0.618em |
| (none) | 1em |
l | 1.618em |
xl | 4.236em |
xxl | 6.854em |
*values derived from golden ratio
Examples:
<div class="mt-xl">
<!-- 4.236em top margin -->
</div>
<div class="pl-s">
<!-- 0.618em left padding -->
</div>
<div class="mb">
<!-- 1em bottom margin -->
</div>
The spacing scale and step progression are configurable. Set these values in your own Sass, before including the css-utils lib:
// default values
$util-ratio: 1.618;
$util-base: 1em;
$util-spacing: (
xxs: -4,
xs: -3,
s: -1,
base: 0,
l: 1,
xl: 3,
xxl: 4
);
Text
| Selector | Responsibility |
|---|
.ta-l | text align left |
.ta-c | text align center |
.ta-r | text align right |
.ta-j | text align justify |
.c-i | inherit ancestor text color |
.kern | enable font kerning |
.whs-nw | prevent wrapping on whitespace |
.truncate | limit text to a single line, truncating with an ellipsis |
.fw-l | font weight light (200) |
.fw-n | font weight normal (400) |
.fw-b | font weight bold (700) |
.fs-i | italic |
.tt-u | uppercase |
.wfsm | font anti-aliasing |
Vertical Alignment
| Selector | Responsibility |
|---|
.va-t | align to top |
.va-m | align to middle |
.va-b | align to bottom |
License
The MIT License (MIT)