SUIT CSS utilities

The full collection of SUIT CSS utility classes. Requires
suitcss-preprocessor or similar in
your build process, if you choose to use the packages directly.

Read more about SUIT CSS's design principles.

Installation

* npm: npm install suitcss-utils
* Download (compiled)

…is a convenient way to install all the SUIT utility packages:

* utils-align: Vertical alignment
* utils-display: Display types
* utils-layout: Clearfix, floats, and new block formatting contexts
* utils-link: Link things
* utils-offset: The before and after packages
* utils-position: Positioning utilities
* utils-size: Percentage sizing utilities
* utils-text: Text truncation, breaking, and alignment
* utils-flex: Align elements with Flexbox

Usage

Utilities are low-level. They have a very narrow scope and may end up being
used frequently, due to their separation from the semantics of the document and
the theming of a component. As a result, once a class is in significant use
great care should be taken when introducing any modifications to it.

Utilities make use of !important to ensure that their styles always apply
ahead of those defined in a component's dedicated CSS.

$3

Each utility class modifies a single trait (a small collection of similar
styles).

To apply a trait, or a combination of traits to an element, add the
corresponding class directly to the HTML.

Together, they can form a wide variety of UI patterns from simple principles.
Although you won't _always_ want to use combinations of utilities to generate
more complicated patterns, the option is there. Refactoring a component's HTML
to move particular utility traits into the component's own styles is a
relatively simple task.

The following contrived example would be a structural template for a simple
Tweet-like component. You would then create a new CSS file for the component to
contain any additional, specific styles (often a "skin" or "theme") needed to
fully realise the component.

``html


{{time}}

{{fullname}}
@{{username}}

{{text}}

Reply



Favorite

...

`
npm install
`

To generate a build:

`
npm run build
`

Browser support

* Google Chrome (latest)
* Opera (latest)
* Firefox 4+ (28+ for flex)
* Safari 5+ (6.1+ for flex)
* Internet Explorer 9+ (10+ for flex`)