Getting Started with the SAO Design System

The SAO design system offers:

Style integrations
- Source SASS files
- Compiled CSS files
- Theme support for:
  - Telerik’s Kendo UI
  - DevExtreme
Angular Components
- Storybook for Kendo based components
- Storybook for DevExtreme based components

Integrating styles with source SASS files

In your application, require the SAO Design System TFS project and add the following structure to your main SASS file:

/* ================
   MAIN STYLESHEET
   ================ */

// Design system core files (includes variables, mixins, resets, objects, and components)
@import "../..path/to../sao-patterns/src/assets/styles/system-core";

// Import your applications styles
@import "../your-application-specific-styles-here";

// Design system utilities
@import "../..path/to../sao-patterns/src/assets/styles/system-utilities";

// Import any custom utilities
@import "../application-specific-utilities-here";

Integrating styles with built CSS files

In your application, link the design system CSS file ahead of your custom styles and components in the <head> of your document:

<!-- SAO Design System Styles: -->
<link href="https://sao-patterns.sao.wa.gov/main.css" rel="stylesheet" />

<!-- Your Styles: -->
<link href="/main.css" rel="stylesheet" />

Integrating styles with Telerik’s Kendo UI

You can use this SASS variable file or use this theme file with your Kendo UI project:

<link href="https://sao-patterns.sao.wa.gov/theme-kendo-ui.css" rel="stylesheet" />

Integrating styles with DevExtreme

Include this LESS variable file or use this theme file with your DevExtreme project:

<link href="https://sao-patterns.sao.wa.gov/theme-dev-extreme.css" rel="stylesheet" />

Integrating with the Angular libraries

SAO Design System provides a library of Kendo UI themed components and DevExtreme UI components. Import the modules from the design system project into your app.module.ts file like so:

// For Kendo UI use:
import { SAOButtonComponent } from '../..path/to../sao-patterns-kendo-angular';

// For DevExtreme use:
import { SAOButtonComponent } from '../..path/to../sao-patterns-devextreme-angular';

@NgModule({
  declarations: [
    ...
    SAOButtonComponent
  ]
  ...
})