Using Cedar

Cedar supports multiple tools and consumption methods. Reference the information below for an overview of the system parts and determine how to use Cedar in your project.

# Cedar Tools and Resources

# UI Toolkit

The Sketch UI Toolkit maintained by Cedar includes all published components and foundational styles.

For more information about using the UI Toolkit, visit the Getting Started for Designers article.

# Design Tokens

Design tokens are special variables used to maintain a scalable visual system for UI development and brand consistency. Cedar design tokens store the visual design attributes that define the foundation of REI’s visual language, including color, typography, and spacing.

For example: cdr-color-text-primary-lightmode would be used to set the primary text color on a light background.

For more information about design tokens, read the Design Tokens article.

# Components

Components use Cedar’s tokens and design foundations to distribute code templates that extend basic HTML elements and encapsulate reusable code. These custom markup elements represent specific portions of the user interface. When used in your application, they will help ensure the UI remains consistent with REI’s digital display standards.

For example: <cdr-link href=”rei.com”>CdrLink Component</cdr-link>

# Component Variables

Component variables are available for a subset of Cedar components. These SCSS or LESS mixins extend design tokens and define additional specific variables that are used to display Cedar components.

For example: cdr-link-base-mixin would be used to style an element like a CdrLink component.

For more information on Component variables, visit the Component Variables article.

# Utilities

Utility CSS classes allow users to extend Cedar components by providing options for layout, such as spacing, text alignment, or element display.

For example: cdr-align-text-center would be used to align text to the center.

Find the list of Utility classes in the Utilities article.

# Documentation Site

The documentation for each component and foundational style includes design guidelines, do’s and don’ts, considerations for accessibility, and API instructions for developers.

# Dev Tools Comparison Chart

	Features	Requirements of usage
Design Tokens	Versioned and maintained by the design systems team Semantic relationship to your content rather than to design Represented in the UI Toolkit Consistent release schedule Up-to-date with digital brand standards Distributed as SCSS, LESS, JSON, commonJS, or es6 module exports Documented Usage Design API Quick to implement Compatible and can be combined with all other Cedar-distributed display assets	Usage requires a SCSS or LESS preprocessor for styles Distributed as a pull model which your team integrates and maintains within your project Users are required to stay within one major version of the current release Support provided only for the current REI.com-supported browser matrix
Vue components (recommended)	Versioned and maintained by the design systems team Represented in the UI Toolkit as a named symbol Consistent release schedule Self-contained and encapsulated markup, behavior, and styles Up-to-date with digital brand standards Documented Usage Design API Meets WCAG AA standards for display and markup pertaining to the component without context to the page Support for server and client rendering Distributed as commonJS or es module exports Precompiled assets do not require a CSS preprocessor Tree-shakeable assets Quick to implement Compatible and can be combined with all other Cedar-distributed display assets	Requires Vue.js Distributed as a pull model which your team integrates and maintains within your project Support provided only for: Current and previous major versions Standard micro site architecture framework, expectations, and standards Current REI.com supported browser matrix
Component variables	Versioned and maintained by the design systems team Represented in the UI Toolkit as a named symbol Consistent release schedule Up-to-date with digital brand standards Documented markup contract Meets WCAG AA standards for specific proprietary display only Distributed as SCSS or LESS mixins Compatible and can be combined with all other Cedar-distributed display assets	Requires SCSS or LESS preprocessor Distributed as a pull model which your team integrates and maintains within your project Support provided only for: Current and previous major versions Current REI.com supported browser matrix
Utility Classes	Non-modularized CSS classes allow you to apply these styles where needed Consistent release schedule Up-to-date with digital brand standards Documented markup contract Meets WCAG AA standards for specific proprietary display only Distributed as CSS Compatible and can be combined with all other Cedar-distributed display assets	Ability to extend or define the application markup Distributed as a pull model which your team integrates and maintains within your project Support provided only for: Current and previous major versions Current REI.com supported browser matrix