Styleguide

Jump to: Color Typography Lists Buttons Forms Helpers

Color Palette

The following list represents all color variables available in the project. Reference them throughout the code using their $name.

• $color-pink
• $color-pink-dark
• $color-pink-light
• $color-pink-over
• $color-brown
• $color-brown-dark
• $color-brown-mid
• $color-brown-light
• $color-orange
• $color-orange-dark
• $color-yellow
• $color-black
• $color-gray-dark
• $color-gray-med
• $color-gray-light
• $color-gray-lightest
• $color-gray-warm
• $color-white
• $color-tan
• $color-tan-light
• $color-error
• $color-error-bg

Typography

The elements below represent the default styling for H1-H6 semantic heading levels in HTML. These elements are usually styled with additional classes.

Lists

Note that these styles are only applied when the ol, ul and dl are within a .u-authorable container.

Buttons

The following variant classes can be added to .u-cta as needed: .u-cta--secondary, .u-cta--tertiary, .u-cta--quaternary.

.u-add-item

Forms

Forms should be marked up with fieldsets and legends. Legends will be automatically hidden (accessibly). Form fields should be organized within an ordered list. Each list item contains a label with a for attibute matching the appropriate input ID. Placeholder text should be added as an attribute for all applicable fields.

Add data-parsley-validate attribute to forms (or add the .js-validate class somewhere inside the form) to initialize Parsley validation library. Set field types and required attribute on forms for Parsley to use. Add override error messages (by criteria) such as the following attribute on a given input: data-parsley-required-message="Please enter your first name."

Helpers