Getting Started with Indigo
Overview
The Indigo Design System provides the resources needed to create user interfaces that align with USAC design principles, visual language, and best practices. This allows developers to concentrate on application logic rather than pixels, and designers to focus on user experience, interactions, and flows.
The range of resources available for designers and developers includes:
- Fonts, icons, color palettes, and design guidelines
- High-quality, production-grade, semantic and accessible component markup
- Cross-browser compatible CSS
- Data-bound Vue.js components for developers to plug-and-play using a well-documented API
Make a Request
Indigo offers an easy-to-implement starting point. If you need something that's not available, you can request a style or component, and the team will design and build it if it applies across the USAC portfolio.
For Developers
The Indigo design system was built using the Vue Framework. The components within the design system can be consumed as Vue components or as HTML and CSS components.
Installing Indigo Fonts
To render Indigo components and styles correctly, a Google Web Font is required. Add this <link> tag to your application’s <head></head> to include the font in your application:
Installing Indigo Components
Vue
Requirements
Using the Vue version of Indigo Components requires your application to be built on the Vue Framework . You will also need Node JS in order to install the component library via the Node Package Manager (NPM).
Installing the library
Within your application run:
npm install indigo-component-library --save --registry http://svn.usac.loc/artifactory/api/npm/npm
This will add Indigo as a dependency to your application.
Component Usage
Refer to component documentation pages for Vue snippets you can copy and paste into your application.
HTML
The Indigo team recommends using the Indigo Vue components whenever possible. If you cannot use Vue, follow the instructions below to consume Indigo via CSS or SCSS and HTML.
Installing the library via CSS
The Indigo release ZIP file includes CSS and SVG Icon assets. These files should not be modified directly. Editing them can lead to conflicts and unexpected results when upgrading to new releases. If you need custom styles for your application you should use additional stylesheets to apply those overrides.
- To use CSS and SVG assets
- Copy the indi.css stylesheet and the indi_icons.svg icon sprite file into your code base.
- Add a
<link rel="stylesheet" href="indi.css">link in the<head/>of your template. - Refer to the Icons page for information on how to use icons.
Installing the library via SCSS
If your application uses SCSS for styling, you can @import Indigo’s source .scss files directly. This will give you access to Indigo’s library of scss variables.
- To use Indigo SCSS files:
- Access the source files in the src directory. The directory contains .scss files for each component, an indi_tokens.scss variables file, a base styles directory, and all the individual .svg icon files.
- Add the contents of the styles directory to your asset pipeline and include an
@import 'indi.scss'statement in your application’s main SCSS file.
Component Usage
Refer to component documentation pages for HTML snippets you can copy and paste into your application.
For Designers
- Designers can browse guidelines on visual style including color, typography, iconography, and space.
- Review the Components section to familiarize yourself with the existing components that you can incorporate into your designs.
Download Design Assets
Use the Example Layouts, Component Documentation and Visual Language pages, which provide starting points for your design mockups inclusive of components, color palettes, icons, and basic page layouts. Add this library to your project file to make all these resources available in the Assets toolbar.
Download a full set of Source Sans 3 fonts to use in your design applications (Sketch, Photoshop, Illustrator, etc).