Getting Started

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.css
  • jquery-ui-1.12.0.min.js
  • gridforms.js

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:

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 yur layout. Note the example below.

Recommended Folder Structure - Visual Studio Solution

  • Solution 'Main'
  • ├── app_start/
  • └── BundleConfig.cs
  • ├── content/
  • ├── bootstrap/
  • └── boostrap.min.css
  • ├── images/
  • └── asap-logo.svg
  • ├── kendoUI/
  • ├── kendo.asap.css
  • └── kendo.common-bootstrap.css
  • ├── standardized/
  • └── "project".css
  • ├── svg-icons/
  • └── icon-"name".css
  • └── jquery-ui.css
  • ├── controllers/
  • ├── models/
  • ├── scripts/
  • ├── bootstrap/
  • └── boostrap.min.js
  • ├── kendoUI/
  • └── kendo.web.min.js
  • └── jquery-1.9.1.js
  • └── ...

Recommended Layout Example

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.