A collection of small, adaptive, structural CSS modules for building web UIs and custom toolkits.

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)

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

Utilities:

• All
• Dimension
• Display
• Layout
• Link
• Space
• State
• Text

Components:

• Arrange
• Button
• Button group
• Flexible embeds
• Grid
• Grid Layouts

Themes:

• (soon)

Read about the design decisions and authoring principles of Suit.

• Highly modular; each module is individually versioned.
• Provides common, low-level utility classes.
• Provides common structural UI patterns.
• Responsive grid.
• Consistent class name conventions.
• Work more with HTML than CSS.
• Theme-independence.
• Designed for large web sites and applications.
• Easy to build your application's custom toolkit on top of Suit.
• Very small footprint.

• Monolithic UI frameworks don't make it easy to use, share, and version specific UI traits and components.
• Complex applications need to loosely couple content, document semantics, and presentational structure to make it easier to change any layer while minimizing the impact on other layers.
• Complex applications need to clearly surface and scope the relationship between all HTML classes (and their attached styles and behaviour).
• Complex applications can accumulate technical debt when components are not kept independent of one-another, or the dependencies aren't clear.

• Build progressive enhancement into the UI layers themselves. Use low-level utilities to build up a skeleton UI.
• Codify the separation of responsibilities by using structured class names that reflect different purposes and relationships.
• Provide clear, constrained, and explicit authoring principles.
• Use multiple classes in HTML templates to combine styles.
• Organize discrete UI features into small, standalone packages / files.

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