Need help with audi-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

audi
251 Stars 50 Forks 86 Commits 21 Opened issues

Description

Audi UI components in CSS, Vanilla JavaScript, and HTML

Services available

!
?

Need anything else?

Contributors list

Audi UI

An implementation of Audi UI components in CSS, Vanilla JavaScript, and HTML. Complementary typefaces and icons can be found in the corresponding repositories on the same organization account.

Project status: alpha

Want to contribute?

If you found a bug, have any questions or want to contribute feel free to file an issue on GitHub. For general information on the audi corporate design please follow the official guidelines.

Getting Started

Build workflow

Our current build workflow requires Gulp v4. Make sure you have the latest version installed.

You will need to remove your current gulp global package before installing v4 in order to do an upgrade.

npm rm -g gulp
npm install -g gulp-cli

This command removes your current global package and installs v4 from the gulp-cli 4.0 branch.

Make sure you don't get any errors from the first command before you type the second. Depending on your set-up, you may need to run them with

sudo
.

To verify what version you have installed globally, you can run the below command (and should see a similar output).

gulp -v
CLI version 1.2.2

Setup the repo:

git clone https://github.com/audi/audi-ui.git && cd audi-ui
npm i

Build library files:

gulp

Build library and run the development server:

cd /path/to/audi-ui
gulp test:visual

Use Audi UI for your project

1. Install Audi UI via NPM

npm install @audi/audi-ui

2. Link CSS directly OR import library SCSS in your styles

@import "/node_modules/@audi/audi-ui/src/index";

3. Initialize JS

// Add DOM4 support, https://github.com/WebReflection/dom4
import 'dom4';

// Add Babel polyfill for ES2015, https://babeljs.io/docs/usage/polyfill/ import 'babel-polyfill';

// Import all components from Audi UI library import aui from 'audi-ui';

// Or only some import {Modal, Nav, Spinner} from 'audi-ui';

// Initialize all Audi UI components aui.upgradeAllElements();

// Or only some Modal.upgradeElements(); Nav.upgradeElements(); Spinner.upgradeElements();

4. Check if JavaScript is enabled

We use an approach like Modernizr to detect JS support, and change the styling accordingly. Add the class

aui-no-js
to the
html
element.
html

Replace the name with
aui-js
if JS is supported.

html

  

Browser Support

Supported evergreen browsers:

  • Chrome
  • Edge
  • Firefox
  • Opera

Supported versioned browsers:

  • Internet Explorer 10
  • Safari 8
  • Mobile Safari 8

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.