Getting Started

Overview

The IAA Design System is a corporate-wide design language that is focused on providing clarity, consistency, and efficiency.

The Components

The Component Library is a collection of HTML components that can be combined and reused to build consistent user interfaces. It empowers others to contribute to design implementation while also allowing teams to focus on how users will interact with our software rather than what the interface items will look like.

Setup

To get started, there are just 2 base files that you will need.

The Base CSS

Add the code below to point to the latest version of the library.

The Base JS files

The component library leverages bootstrap for its basic interactions like modal, tooltips, popovers, etc. The following 2 references are required:

Optional CSS and JS

The following are optional css and js files that are utilized for additional functionality. These should only be added as needed.

  • jquery-ui-1.12.0.min.js (used for datepicker)
  • gridforms.js (used for kendo grid tables)
Download jQuery UI 1.12.0

SVG Icons

You can add the icon set to your solution by downloading it.

Download Icon Set

Fonts

You can easily pull the Roboto typeface into your solution by referencing the Google API by including the following:

Design Templates

You can utilize our most recent Sketch template as a starting point for rapidly creating designs. This allows us to carry consistency for our global features throughout our products starting at the most basic level.

Install Sketch

In order to use our template library, you will need to have the most recent version of Sketch installed. (Required: MacOS)

Download the Template

Once you have sketch installed, you can download the most recent version from our Sketch cloud library. You can select download document from the panel on the right-hand side.

Usage

Location for adding the design system CSS and scripts to your layout file is important. Place design system specific CSS and scripts last after any other scripts and CSS within the head tags of your layout. Note the example below.

Recommended Folder Structure

  • prod
  • ├── css
  • └── home.min.css
  • └── login.min.css
  • └── iaa-pattern-library.scss(if localized version)
  • ├── js
  • ├── core
  • └── boostrap.js
  • └── jquery.js
  • ├── vendors
  • └── plugin.js
  • ├── pages
  • ├── home.js
  • └── login.js
  • ├── images
  • └── svg-icons
  • └── arrows__chevron__down.svg
  • dev
  • ├── base
  • └── variables.scss
  • ├── mixins
  • └── flex.scss
  • ├── modules
  • └── global
  • └── header.scss
  • └── vehicle
  • └── vehicle-media.scss
  • ├── pages
  • └── home.scss
  • └── login.scss
  • ├── vendors
  • └── jquery-ui.scss
  • └── ...

Recommended Layout Example

Download Starter Template

Do I need to include everything in my product solution?

The answer is no. Only include the mandatory CSS and scripts that you need, as you need them. The IAA Design System is designed with application performance in mind. Our CSS, JS, and SVGs are optimized for you so you can build with confidence.