An OOCSS library for Stylus

Loom is an OOCSS-inspired library with a small but useful collection of helpers, objects and utilities for Stylus.

It uses a modified BEM notation for the class names and a is- prefix for different states.

Although it’s not required, using normalize.css with the library is highly recommended.

Installation

bower install loom --save

Usage

Loom is primarily designed for importing the objects that you need and to leave out the rest. However, it does come with an index.styl file that you can use to import the whole library at one fell swoop.

It uses a hash to set the base values used throughout the library:

loom = {}

loom.base = {
  fontSize: 1rem,
  spacingUnit: 1.5rem,
  wrapWidth: 64rem
}

loom.breakpoint = {
  palm: 'screen and (max-width: 480px)',
  lap: 'screen and (min-width: 769px)',
  desk: 'screen and (min-width: 1024px)'
}

loom.width = {
  fluid: true,
  'one-of-one': 100%,
  'three-of-four': 75%,
  'two-of-three': 66.666%,
  'one-of-two': 50%,
  'one-of-three': 33.333%,
  'one-of-four': 25%
}

Tip: use a tool like Pixrem in your build process to support older browsers when using the defaults.

Core

box-sizing

The box-sizing file is used for globally applying box-sizing: border-box; to all elements.

It needs to be included in order for Loom to work properly.

@import '<path>/loom/core/box-sizing'

Tip: use a tool like autoprefixer in your build process to add the appropriate vendor prefixes for the box-sizing property.

Helpers

lead

The lead object is used to make a typographic element slightly bigger than a normal paragraph.

<p class="lead">
  <!-- ... -->
</p>

centi

The centi object is used to make a typographic element slightly smaller than a normal paragraph.

<p class="centi">
  <!-- ... -->
</p>

milli

The milli object is used to make a typographic element much smaller than a normal paragraph.

<p class="milli">
  <!-- ... -->
</p>

kilo

The kilo object is used to make a typographic element slightly bigger than a normal first-level heading.

<h1 class="kilo">
  <!-- ... -->
</h1>

mega

The mega object is used to make a typographic element much bigger than a normal first-level heading.

<h1 class="mega">
  <!-- ... -->
</h1>

giga

The giga object is used to make a typographic element significantly bigger than a normal first-level heading.

<h1 class="giga">
  <!-- ... -->
</h1>

Objects

space

The space object is used to add margins to the top and/or the bottom of an element.

<p class="space">
  <!-- ... -->
</p>

<p class="space--above">
  <!-- ... -->
</p>

<p class="space--below">
  <!-- ... -->
</p>

cramp

The cramp object is used to remove margins from the top and/or the bottom of an element.

<p class="cramp">
  <!-- ... -->
</p>

<p class="cramp--above">
  <!-- ... -->
</p>

<p class="cramp--below">
  <!-- ... -->
</p>

shh

The shh object is used to disguise anchor links to make them appear like the surrounding text.

<a class="shh" href="/">
  <!-- ... -->
</a>

<h1 class="shh">
  <a href="/">
    <!-- ... -->
  </a>
</h1>

button

The button object is used to make an element into a button.

It depends on a modifier class for the actual styling.

<a class="button" href="/">
  <!-- ... -->
</a>

<button class="button">
  <!-- ... -->
</button>

<input class="button" type="button" value="Button">

bare

The bare object is used to remove the styling from a list element.

<ul class="bare">
  <li>
    <!-- ... -->
  </li>
  <li>
    <!-- ... -->
  </li>
</ul>

lineup

The lineup object is used to remove styling from a list element and to make the list items (and anchor links) into inline block elements.

It can also be used on non-list elements in conjunction with .lineup__item.

It depends on the bare object.

<ul class="lineup">
  <li>
    <!-- ... -->
  </li>
  <li>
    <a href="/">
      <!-- ... -->
    </a>
  </li>
</ul>

<div class="lineup">
  <div class="lineup__item">
    <!-- ... -->
  </div>
  <div class="lineup__item">
    <!-- ... -->
  </div>
</div>

stack

The stack object is used to remove the styling from a list element and to make the list items (and anchor links) into block elements.

It can also be used on non-list elements in conjunction with .stack__item.

It depends on the bare object.

<ul class="stack">
  <li>
    <!-- ... -->
  </li>
  <li>
    <a href="/">
      <!-- ... -->
    </a>
  </li>
</ul>

<div class="stack">
  <div class="stack__item">
    <!-- ... -->
  </div>
  <div class="stack__item">
    <!-- ... -->
  </div>
</div>

island

The island object is used to add paddings to an element and to make it into a block element.

<div class="island">
  <!-- ... -->
</div>

<div class="islet">
  <!-- ... -->
</div>

<div class="landmark">
  <!-- ... -->
</div>

wrap

The wrap object is used to wrap the content inside an element and to centrally align the element.

<div class="wrap">
  <!-- ... -->
</div>

clearfix

The clearfix object is used to clear all floats inside an element.

<div class="clearfix">
  <!-- ... -->
</div>

media

The media object is used to place an image and text-like content side-by-side.

It depends on the the clearfix object.

<div class="media">
  <img class="media__figure" src="image.jpg" alt="">
  <p class="media__body">
    <!-- ... -->
  </p>
</div>

<div class="media">
  <img class="media__figure--rev" src="image.jpg" alt="">
  <p class="media__body">
    <!-- ... -->
  </p>
</div>

grid

The grid object is used to build a grid-based layout.

It depends on the clearfix object and utilizes the widths utilities.

<div class="grid">
  <div class="grid__item one-of-one">
    <!-- ... -->
  </div>
</div>

ratio

The ratio object is used to handle responsive aspect ratios for embed content.

It utilizes the ratios utilities.

<div class="ratio four-by-three">
  <iframe|object|embed>
</div>

<div class="ratio three-by-one">
  <img class="ratio__item" src="image.jpg" alt="...">
</div>

Utilities

widths

The widths utilities are used to set the width of an element. Using a predefined breakpoint prefix will make them context-sensitive.

one-of-one

<div class="grid__item one-of-one">
  <!-- ... -->
</div>

<div class="grid__item palm--one-of-one">
  <!-- ... -->
</div>

<div class="grid__item lap--one-of-one">
  <!-- ... -->
</div>

<div class="grid__item desk--one-of-one">
  <!-- ... -->
</div>

three-of-four

<div class="grid__item three-of-four">
  <!-- ... -->
</div>

<div class="grid__item palm--three-of-four">
  <!-- ... -->
</div>

<div class="grid__item lap--three-of-four">
  <!-- ... -->
</div>

<div class="grid__item desk--three-of-four">
  <!-- ... -->
</div>

two-of-three

<div class="grid__item two-of-three">
  <!-- ... -->
</div>

<div class="grid__item palm--two-of-three">
  <!-- ... -->
</div>

<div class="grid__item lap--two-of-three">
  <!-- ... -->
</div>

<div class="grid__item desk--two-of-three">
  <!-- ... -->
</div>

one-of-two

<div class="grid__item one-of-two">
  <!-- ... -->
</div>

<div class="grid__item palm--one-of-two">
  <!-- ... -->
</div>

<div class="grid__item lap--one-of-two">
  <!-- ... -->
</div>

<div class="grid__item desk--one-of-two">
  <!-- ... -->
</div>

one-of-three

<div class="grid__item one-of-three">
  <!-- ... -->
</div>

<div class="grid__item palm--one-of-three">
  <!-- ... -->
</div>

<div class="grid__item lap--one-of-three">
  <!-- ... -->
</div>

<div class="grid__item desk--one-of-three">
  <!-- ... -->
</div>

one-of-four

<div class="grid__item one-of-four">
  <!-- ... -->
</div>

<div class="grid__item palm--one-of-four">
  <!-- ... -->
</div>

<div class="grid__item lap--one-of-four">
  <!-- ... -->
</div>

<div class="grid__item desk--one-of-four">
  <!-- ... -->
</div>

ratios

The ratios utilities are used to set the ratio of an element.

four-by-three

<div class="ratio four-by-three">
  <!-- ... -->
</div>

sixteen-by-nine

<div class="ratio sixteen-by-nine">
  <!-- ... -->
</div>

two-by-one

<div class="ratio two-by-one">
  <!-- ... -->
</div>

three-by-one

<div class="ratio three-by-one">
  <!-- ... -->
</div>

breadcumb

The breadcrumb utility is used to add breadcrumb-like styling to an element.

It should be used in conjunction with the lineup object.

<ol class="lineup">
  <li class="breadcumb" data-crumb="»">
    <a href="/">
      <!-- ... -->
    </a>
  </li>
  <li>
    <!-- ... -->
  </li>
</ol>

states

The states utilities are used for adding various state-based modifications to a block.

A state should be scoped to a specific context.

is-hidden

.thing.is-hidden
  is-hidden()

is-visible

.thing.is-visible
  is-visible()

is-disabled

.thing.is-disabled
  is-disabled()

.thing.is-disabled
  is-disabled(true) /* With opacity */

is-truncated

.thing.is-truncated
  is-truncated()

is-fixed

.thing.is-fixed
  is-fixed() /* Fixed to the top */

.thing.is-fixed
  is-fixed(top)

.thing.is-fixed
  is-fixed(right)

.thing.is-fixed
  is-fixed(left)

.thing.is-fixed
  is-fixed(bottom)