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)
SVG Icons
You can add the icon set to your solution by downloading it.
Download Icon SetFonts
You can easily pull the Roboto typeface into your solution by referencing the Google API by including the following:
Right to Left Language Support
Right to left languages (ex. Arabic) support for all components is available on v2.0.1 and above.
Please note that in order to switch the interface RTL you'll need to add the following atributes to the html tag in the page.
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
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.