Overview

As the Service Year Alliance and the Service Year Exchange continue to grow, both as a product and an organization, one challenge we are faced with is learning how to refine the Service Year brand identity and apply it cohesively to each of our products. We created this styleguide to act as a central location where we house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more. Anyone working on the Service Year product is encouraged to stay familiar with this styleguide and help ensure that it is kept up-to-date.

Goals

Cohesive design language: Refine our visual language to be simpler, more fun and more communicative.
Platform agnostic system: Develop a single, unified system that is transferrable across all platforms and devices.
Expedite the design process: By abstracting our base styles layer, now developers can churn out UIs with minimal design input.

Notes

This is not a 100% comprehensive or updated inventory of components on the Service Year Exchange
Certain design aspects in the style guide do not reflect the new branding of the Service Year Alliance

Service Year Developer Notes

The following are explanations of high-level approaches used in this project's styles. They are guidelines which means they should be adhered to as much as possible, but are breakable when needed.

BEM

The BEM (block, element modifier) approach to writing styles is extensively utilized throughout the Service Year styles. This helps us avoid style conflicts while maintaining low-specificity CSS. Side Effects in CSS is an excellent article describing these methodologies.

Blocks should be named descriptively yet succinctly:

.preview-bar {
    background: blue;
    color: white;
    padding: 1em;
}

Elements nested inside of these blocks are indicated with __elem syntax:
```
.preview-bar__icon {
    vertical-align: middle;
}
```

Modifier classes are added to top-level blocks to apply style overrides:

.preview-bar--large {
    font-size: 2em;

    .preview-bar__icon {
        padding-bottom: 0.25em;
    }
}

Normalize

We use Normalize instead of a reset to assist with consistent rendering across all browsers.

Foundation

We use Zurb Foundation as a boilerplate for this project. Where possible, it's recommended to adjust the _settings.scss file for global style changes. Foundation's documentation includes an overview of how to use settings

Autoprefixer

All of our CSS files are automatically vendor prefixed with autoprefixer during the build process. You can safely avoid manually writing vendor prefixes in your SASS files.

Smart quotes

Instead of using the ' and " characters, we use smart quote HTML escape codes. This small details provides a nice touch, and is the icing on the cake for our typography.

Left and right single quote:

‘ ‘

’ ’

Left and right double quote:

“ “

” ”

Use ‘smart apostrophes’ vs 'dumb apostrophes'

Use “smart quotes” vs "dumb quotes"