CSS Utility Classes ![Build Status](https://camo.githubusercontent.com/8a45cf5265d2960b78f4add07cb1a9ea1c4a6fcc74b8e4605d201d6cda27dcd0/68747470733a2f2f7472617669732d63692e6f72672f4c756b6541736b65772f6373732d7574696c732e7376673f6272616e63683d6d6173746572)
A collection of CSS utility classes - based on Emmet shorthand conventions - to aid in object-oriented CSS development.
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>
You can download the repo, or install via Bower:
$ bower install css-utils --save-dev
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 |
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) |
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) |
Selector |
Responsibility |
.pos-r |
position relative |
.pos-s |
position static |
.pos-a |
position absolute |
.pos-f |
position fixed |
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
);
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 |
Selector |
Responsibility |
.va-t |
align to top |
.va-m |
align to middle |
.va-b |
align to bottom |
The MIT License (MIT)