# suitcss-utils

> Utilities for SUIT CSS

Latest version **3.0.0** (published 2017-04-28) · 0 weekly downloads

## Install

```sh
npm install suitcss-utils
pnpm add suitcss-utils
yarn add suitcss-utils
bun add suitcss-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-04-28 |
| First published | 2014-03-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 305 |
| Maintainers | giuseppegurgone, necolas, simonsmith, timkelty |

## Links

- npm: https://www.npmjs.com/package/suitcss-utils
- Repository: https://github.com/suitcss/utils
- Homepage: https://github.com/suitcss/utils#readme
- Issues: https://github.com/suitcss/utils/issues
- npm.io page: https://npm.io/package/suitcss-utils

## Dependencies (9)

- [suitcss-utils-flex](https://npm.io/package/suitcss-utils-flex.md) ^2.0.0
- [suitcss-utils-link](https://npm.io/package/suitcss-utils-link.md) ^1.0.1
- [suitcss-utils-size](https://npm.io/package/suitcss-utils-size.md) ^2.0.0
- [suitcss-utils-text](https://npm.io/package/suitcss-utils-text.md) ^1.0.0
- [suitcss-utils-align](https://npm.io/package/suitcss-utils-align.md) ^1.0.0
- [suitcss-utils-layout](https://npm.io/package/suitcss-utils-layout.md) ^1.0.1
- [suitcss-utils-offset](https://npm.io/package/suitcss-utils-offset.md) ^1.0.0
- [suitcss-utils-display](https://npm.io/package/suitcss-utils-display.md) ^1.0.2
- [suitcss-utils-position](https://npm.io/package/suitcss-utils-position.md) ^1.0.1

## Recent versions

- 3.0.0 (latest) — 2017-04-28
- 2.0.0 — 2016-08-03
- 1.0.0 — 2016-02-27
- 0.12.0 — 2016-01-28
- 0.11.0 — 2015-11-20
- 0.10.3 — 2014-10-29
- 0.10.2 — 2014-10-28
- 0.10.1 — 2014-10-03
- 0.10.0 — 2014-06-22
- 0.9.0 — 2014-05-16
- 0.8.0 — 2014-03-31

## README

# SUIT CSS utilities

The full collection of SUIT CSS utility classes. Requires
[suitcss-preprocessor](https://github.com/suitcss/preprocessor) or similar in
your build process, if you choose to use the packages directly.

Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).

## Installation

* [npm](http://npmjs.org/): `npm install suitcss-utils`
* [Download](https://github.com/suitcss/utils/releases/latest) (compiled)

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

* [utils-align](https://github.com/suitcss/utils-align/): Vertical alignment
* [utils-display](https://github.com/suitcss/utils-display/): Display types
* [utils-layout](https://github.com/suitcss/utils-layout/): Clearfix, floats, and new block formatting contexts
* [utils-link](https://github.com/suitcss/utils-link/): Link things
* [utils-offset](https://github.com/suitcss/utils-offset/): The `before` and `after` packages
* [utils-position](https://github.com/suitcss/utils-position/): Positioning utilities
* [utils-size](https://github.com/suitcss/utils-size/): Percentage sizing utilities
* [utils-text](https://github.com/suitcss/utils-text/): Text truncation, breaking, and alignment
* [utils-flex](https://github.com/suitcss/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.

### Templating

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
<article class="Tweet">
  <a class="u-floatRight" href="{{permalinkUrl}}">
    {{time}}
  </a>
  <a class="u-floatLeft" href="{{userUrl}}">
    <img src="{{userAvatar}}" alt="{{username}}'s avatar">
  </a>
  <div class="u-sizeFill">
    <a class="u-linkComplex" href="{{userUrl}}">
      <span class="u-linkComplexTarget">{{fullname}}</span>
      <span>@{{username}}</span>
    </a>

    <p class="u-textBreak">{{text}}</p>

    <div>
      <a class="u-linkComplex" href="#" role="button">
        <span class="Icon Icon--reply"></span>
        <span class="u-linkComplexTarget">Reply</span>
      </a>
      <a href="#" role="button">
        <span class="Icon Icon--favorite"></span>
        <span class="u-hiddenVisually">Favorite</span>
      </a>
      ...
    </div>
  </div>
</article>
```

## Building

Install [Node](http://nodejs.org) (comes with npm).

```
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`)

---
_Source: https://npm.io/package/suitcss-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._