lukeaskew / css-utils

Emmet-inspired CSS utility classes for rapid website development

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)