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)

LukeAskew/css-utils