Calcite Web: Deep Dive

Design Characteristics of Calcite Web

Flat (Mostly)

No embossing, no crazy drop shadows, no skeuomorphism

Button Clear Button

Tooltip

Neutral Colors

Most UI elements are accomplished in grayscale

Meaningful Color

Color must be used with purpose.

How can color be used?

1. Show state
2. Encourage Action
3. Explain success and failure

1. Show State

Pagination

Focus States

2. Encourage Action

3. Explain Success and Failure

Red and green are generally used to indicate error and success, respectively

Inputs

Alerts

Labels

standard labelerror labelsuccess label

Simple, "With the Grain"

Try to keep it simple and go "with the grain" of the web.

Straight Lines, Square Corners

Generally UI elements don't have a border radius

Open

Use ample white space to make designs welcoming.

Bad

This is a paragraph that has the margin intentionally set to 0 in order to demonstrate how un-Calcified it looks.

Good

This is the standard paragraph styles. As you can see, it has quite a bit of margin built in so that content has room to breath.

Type Scale

A double-stranded modular scale allows for flexibility without craziness

Rational Grid

Flexible, responsive grid based on viewport widths

Subtle Animation

Used sparingly, to help users understand moments of transition

Modal

Loader

</design>

Questions?

Basic CSS Rules

1. Use low-specificity selectors

.sidebar {}               /* less specific */
#page .sidebar div > a {} /* waaay more specific */

2. Only Use Classes

#banner {
  background-color: blue;
}

#banner h1 {
  color: white;
}

.banner {
  background-color: blue;
}

.banner-title {
  color: white;
}

3. Namespace Classes

.btn {
  padding: .25em;
  background-color: blue;
  color: white;
}

.btn.red {
  background-color: red;
}

.btn {
  padding: .25em;
  background-color: blue;
  color: white;
}

.btn-red {
  background-color: red;
}

4. JavaScript hooks should use the js- prefix

<a href="#" class="btn">Click Me!</a>

<a href="#" class="btn js-btn">Click Me!</a>

Basic Sass Rules

1. Everything can be turned off

2. Everything can be called as a mixin

3. Only use colors from the brand palette

Basic Accessibility Rules

1. Ensure Sufficient Contrast

2. Use Semantic Markup

<a href="#" class="btn js-btn">Click Me!</a>

<button class="btn js-btn">Click Me!</button>

3. Make sure focus states work

NEVER DO THIS

.my-cool-element:focus {
  outline: none;
}

3. Use Correct Aria Roles (when needed)

List of Roles:

Localization

1. Right to Left

2. Character Support for Most Languages

Done!

Questions?