...
LUX is also built for developers. Our front-end library is continuously maintained by the core UX team and serve serves as a fully functional example off the Verint Design Language. This library is a platform agnostic UI implementation of our components and patterns which can be used in production if the your chosen development environment / and framework is suitable.
Our platform agnostic implementation is a fork of the open source Bootstrap JavaScript library; that's written in ES6+, SCSS, and HTML and ships deliverables in vanilla JavaScript in ES5 as well as ES6, CSS, SCSS and HTML.
As this is a superset of Bootstrap, any developers already familiar with this library can design screens instantly. The guidelines included here are to ensure consistency and best practice across all newly designed screens within the Verint suite. Further detailed examples of runtime, class and usage documentation can be found from the Bootstrap JavaScript library documentation.
<<We are also working with development teams to create other>>
<<Platform agnostic>>
We will work with specific design teams to help them implement platform and framework specific implementations of LUX. We hope to be able to share and reuse those specific implementations in the future across different development teams within Verint. LUX platform specific implementations in Ext JS and React are currently in the pipeline.
Usage
Looking to quickly add Verint components for design concepts and prototypes? Use the internal Verint CDN, hosted at <<ux.verint.com>>. For production usage, download the source files from <<TBD>>.
...
Copy-paste the stylesheet <link> into your <head> before after our stylesheets to load the font icon CSS. More information about icons can be found in the Iconography section.
| Code Block | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css"> |
...
By default, all our components come pre-built for WCAG AA and Section 508 accessibility standards. To use our default accessibility settings, include the following in your <head> section. More information about icons can be found in the Accessibility section.
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> |
...