Components THEME_NAME/core/css/components

These are specific UI patterns that are designed to be as modular and extensible as possible.

Buttons THEME_NAME/core/css/components/buttons.css

A button is used to bring attention to key interactions on the page.

Buttons should be labelled in a way that gives the user a clear and concise understanding of what will happen when they are pressed.

Example

• Tiny Button
• Small Button
• Button
• Large Button
• Huge Button

• Full Width Button

• Hollow Button
• Clear Button
• Disabled Button
• Error Button
• Glossy Button

Control Groups THEME_NAME/core/css/components/control-groups.css

To group related buttons and/or inputs together, you can use the .c-control-group wrapping element. This will bunch the related elements together and remove the spacing between them.

Example

Button 1 Button 2 Button 3

Button 1 Button 2 Button 3

Button 1 Button 2 Button 3

Button 1 Button 2 Button 3

Button 1 Button 2 Button 3

Divider THEME_NAME/core/css/components/divider.css

Divider component to provide more prominent horizontal rules between other elements.

Example

Standard Divider

Top Divider

Forms THEME_NAME/core/css/components/forms.css

Forms are the standard way of receiving user inputted data, and therefore are an integral and crucial aspect of our interaction with customers.

Forms should utilise a fieldset, descriptive legend (visually hidden but announced by screen readers) and a form list. Form fields should be presented in a list so that they are easier to navigate using a screen reader and, if CSS fails to load for any reason, the user is still presented with a well-formatted list of fields.

Example

Default Form Layout

Custom Form Layout

Keyline THEME_NAME/core/css/components/keyline.css

Simple keyline component to provide horizontal rules between other elements.

Example

Menu THEME_NAME/core/css/components/menu.css

Simple menu layout component.

Example

Mini-Modal THEME_NAME/core/css/components/mini-modal.css

Mini-modal is a lightweight and responsive light box plugin which supports images, YouTube, Vimeo, Google Maps, Inline, Iframe, and AJAX content.

Example

Click Product Image

Navigation THEME_NAME/core/css/components/navigation.css

Simple navigation layout component.

Example

Tables THEME_NAME/core/css/components/tables.css

Example

Simple Table
The simple table offers easy to read data with a horizontal divider between rows.

Stripped Table
The stripped table offers easy to read data with alternating background rows.

Typography THEME_NAME/core/css/components/typography.css

In order to divorce our semantic decisions from our stylistic ones, we only define opinionated typographical styles against classes, NOT against typographic HTML elements.

PROJECT: EVERGREEN uses a fluid typographic scale for all screen sizes between 640px and 960px. This allows for a smooth transition of written content across an infinite number of devices.

Example

Heading Alpha Subheading

Heading Bravo Subheading

Heading Charlie Subheading

Heading Delta Subheading

Heading Echo

Heading Foxtrot

Body Copy