Bits.sass

A structural UI toolkit.

Practically a fork of Nicolas Gallagher's SUIT rewritten using SASS and considerably extended.

See documentation.

Installation

Bower: bower install --save bits-sass

This command installs all subpackages. See the list below.

Packages

Each package is stand-alone, contains its own documentation and tests, and is written to follow a common set of naming conventions. Dependencies are best managed using Bower – a package manager for the web.

Utilities: all, detailed info

• Dimension / responsive
• Display / responsive
• Image
• Layout / responsive
• Link
• Offset / responsive
• Space / responsive
• State
• Text / responsive

Helpers: all

• Miscellaneous
• Responsive
• Text

Components: detailed info

• Arrange / responsive
• Button
• Collection
• Flexible embeds
• Form control
• Grid / responsive
• Group

Features

• Very small footprint.
• Individually versioned modules.
• Provides common, utility classes.
• Provides common, structural UI patterns.
• Consistent class name conventions.
• Testing friendly.
• Responsive friendly.
• Work more with HTML than CSS.
• Theme-independence.
• Designed for teams working on large web sites and applications.
• Easy to extend and build upon.

Example

HTML:

<article class="app-Excerpt u-cf">
  <img class="app-Excerpt-thumbnail u-sizeFit" src="{src}" alt="">
  <div class="u-sizeFill">
    <h1 class="app-Excerpt-title u-textGamma"><a href="{url}">{content}</a></h1>
    <p class="app-Excerpt-text">{content}</p>
  </div>
</article>

CSS:

/**
 * Excerpt component
 *
 * @require u-cf
 * @require u-sizeFit
 * @require u-sizeFill
 *
 * <article class="app-Excerpt u-cf">
 *   <img class="app-Excerpt-thumbnail u-sizeFit" src="{src}" alt="">
 *   <div class="u-sizeFill">
 *     <h1 class="app-Excerpt-title">{content}</h1>
 *     <p class="app-Excerpt-text">{content}</p>
 *   </div>
 * </article>
 */

.app-Excerpt {
  line-height: 1.2857em;
}

.app-Excerpt-thumbnail {
  margin-right: 10px;

  border: 2px solid #000;
  border-radius: 3px;
}

.app-Excerpt-title {
  margin: 0 0 15px;
  padding-bottom: 5px;

  border-bottom: 1px solid #ccc;
}

Suggested tooling

• autoprefixer
• csslint
• html-inspector
• rework

Browser support

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 8+