A modular, scalable, Sass-based, OOCSS framework for quick development of web application interfaces.

Typography

Main Heading

Subpage Title

Section Header

Labels

Bold content within body

The children groped their way back to the spring. The weary time dragged on; they slept again, and awoke famished and woe-stricken. Tom believed it must be Tuesday by this time.

Meta content

Code

Primary buttons should have a class of c-button--primary added.

.c-button--primary {
  background-color: $color-primary;
}

Buttons

Button Groups

Modals

Modals should only be used when blocking the user from taking any other action is absolutely necessary.

All modals must have a heading (<h2>).

Alerts

The children groped their way back to the spring.

The user "Carolyn Chapman" was successfully added.

There is a problem with your network connection.

A user with the email address "c.chapman@sterlingindustries.com" already exists.

Dropdown

Progress Indicator

63% complete

Tooltip

Inputs

Text Input Password Search Email Address The email address is required. Phone Number URL Number Range Disabled Usernames cannot be changed. Textarea Select Checkbox This text helps describe the checkbox.

Checkbox Group

Security alerts related to your account All account security alerts will be emailed to c.chapman@sterlingindustries.com.
Product releases

Radio Group

Email
Phone You'll only receive calls between 9 AM and 5 PM.
None

Inline Radio Group

Email
Phone
None

Switch Switches can have field text too.

Switch Group

Security alerts
Product releases
Company announcements

	Person Details
#	First Name	Last Name	Email Address	Phone Number	Contact Method
1	Amy	Brooks	amybrooks@gmail.com	(586) 832 6954	Email
2	Carolyn	Chapman	c.chapman@sterlingindustries.com	(908) 103 8288	Phone
3	Rachel	Fowler	rfowler@tempagency.com	(704) 918 8233	Email
4	Christian	Henry	christian.henry@gmail.com		Email
5	Douglas	Warren	douglas82@gmail.com	(635) 286 1093	Email
#	First Name	Last Name	Email Address	Phone Number	Contact Method

Components