Giters

blude / suit

HTML/CSS framework for creating loosely coupled UI components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SUIT

An HTML/CSS framework for creating loosely coupled UI components.

SUIT also provides a collection of small, adaptive, structural HTML/CSS modules built using a naming convention inspired by the BEM methodology.

Documentation.

Installation

Recommended: install Bower, then run this command in your project directory:

bower install --save suit

Alternative: (a download bundle will be available at some point)

Features

  • Very small footprint.
  • Scoped components.
  • Individually versioned modules.
  • Consistent class name conventions.
  • Develop components independently of their context (mitigates rule-order issues).
  • Provides common, utility classes.
  • Testing friendly.
  • Responsive friendly.
  • Work more with HTML than CSS.
  • Theme-independence.
  • Designed for teams working on large, changing web sites and applications.
  • Easy to extend and build upon.

Official 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:

Components:

N.B. There is a Yeoman generator for creating SUIT component packages.

Example

HTML:

<article class="Excerpt u-cf">
    <img class="Excerpt-thumbnail u-sizeFit" src="{{src}}" alt="">
    <div class="u-sizeFill">
        <h1 class="Excerpt-title u-h3"><a href="{{url}}">{{title}}</a></h1>
        <p class="Excerpt-text">{{description}}</p>
        <span class="Excerpt-readMore">
            <a class="Button Button--secondary">{{button_text}}</a>
        </span>
    </div>
</article>

CSS:

/**
 * Excerpt component
 *
 * @require u-cf
 * @require u-sizeFit
 * @require u-sizeFill
 *
 * <article class="Excerpt u-cf">
 *     <img class="Excerpt-thumbnail u-sizeFit" src="{{src}}" alt="">
 *     <div class="u-sizeFill">
 *         <h1 class="Excerpt-title u-h3">{{title}}</h1>
 *         <p class="Excerpt-text">{{description}}</p>
 *         <span class="Excerpt-readMore">
 *             <a class="Button Button--secondary">{{button_text}}</a>
 *         </span>
 *     </div>
 * </article>
 */

.Excerpt {
    line-height: 1.2857em;
}

.Excerpt-thumbnail {
    border: 2px solid #000;
    border-radius: 3px;
    margin-right: 10px;
}

.Excerpt-title {
    border-bottom: 1px solid #ccc;
    margin: 0 0 15px;
    padding-bottom: 5px;
}

.Excerpt-readMore {
    display: inline-block;
    margin-top: 10px;
}

Suggested tooling

Browser support

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

About

HTML/CSS framework for creating loosely coupled UI components

License:Other