• Stars
    star
    304
  • Rank 137,274 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 12 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS utility classes

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

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

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.

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

More Repositories

1

suit

Style tools for UI components
HTML
3,801
star
2

base

CSS base styles for web apps (a thin layer on top of normalize.css)
HTML
194
star
3

components-grid

Component CSS for grids
HTML
156
star
4

preprocessor

A future-facing CSS preprocessor (used by SUIT CSS)
JavaScript
135
star
5

components-flex-embed

Component CSS for intrinsic ratio embeds
HTML
111
star
6

stylelint-config-suitcss

SUIT CSS config for Stylelint
JavaScript
77
star
7

components-arrange

Component CSS for arranging/aligning horizontal cells, a bit like flexbox
HTML
72
star
8

utils-flex

CSS flexbox utilities
HTML
63
star
9

components-button

Component CSS for buttons
HTML
52
star
10

rework-suit

Collection of "pure CSS" plugins for Rework (DEPRECATED)
JavaScript
50
star
11

rework-suit-conformance

Rework plugin for SUIT CSS to check component style isolation (DEPRECATED)
JavaScript
41
star
12

utils-size

CSS sizing utilities
CSS
38
star
13

components

Collection of SUIT CSS components
CSS
34
star
14

theme

Example theme for SUIT CSS
CSS
29
star
15

generator-suit

A Yeoman generator for SUIT packages
JavaScript
26
star
16

utils-text

CSS text utilities
HTML
23
star
17

stylelint-suitcss

A collection of Stylelint plugins for SUIT CSS
JavaScript
22
star
18

components-button-group

Component CSS for button-groups (DEPRECATED)
HTML
21
star
19

components-test

Component CSS to help test the visual presentation of components
CSS
19
star
20

utils-layout

CSS layout utilities
HTML
19
star
21

suitcss.github.io

SUIT CSS project site
HTML
18
star
22

utils-link

CSS link utilities
HTML
16
star
23

utils-display

CSS display utilities
HTML
15
star
24

utils-position

CSS positioning utilities
HTML
13
star
25

utils-state

CSS state utilities (DEPRECATED)
HTML
13
star
26

utils-align

CSS vertical-alignment utilities
HTML
12
star
27

component-builder-suit

A Component(1) builder plugin for SUIT CSS (DEPRECATED)
JavaScript
10
star
28

utils-before

CSS leading offset utilities
CSS
8
star
29

utils-after

CSS trailing offset utilities
CSS
8
star
30

utils-offset

CSS offset utilities
JavaScript
8
star
31

initial-values

1
star