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
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.
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
git clone https://github.com/audi/audi-ui.git && cd audi-ui
npm i
gulp
cd /path/to/audi-ui
gulp test:visual
npm install @audi/audi-ui
<link rel="stylesheet" href="/node_modules/@audi/audi-ui/lib/audiui.min.css">@import "/node_modules/@audi/audi-ui/src/index";// 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();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 class="aui-no-js">Replace the name with aui-js if JS is supported.
<head>
<script type="text/javascript">
document.documentElement.className = document.documentElement.className.replace(new RegExp("(^|\\s)aui-no-js(\\s|$)"), "$1aui-js$2");
</script>
</head>Supported evergreen browsers:
- Chrome
- Edge
- Firefox
- Opera
Supported versioned browsers:
- Internet Explorer 10
- Safari 8
- Mobile Safari 8
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent