...
LUX is also built for developers. Our front-end libraries are library is continuously maintained by the core UX team and serve as a fully functional example off the Verint Design Language. These libraries This library can be used in production if the development environment/ framework is suitable.
Our 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 the 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>>
Usage
Looking to quickly add Verint components for design concepts and prototypes? Use the internal Verint CDN, hosted at ux<<ux.verint.comcom>>. For production usage, download the source files from TBD<<TBD>>.
CSS
Copy-paste the stylesheet <link> and <meta> into your <head> before all other stylesheets to load our CSS.
| Code Block | ||
|---|---|---|
| ||
<meta charset="utf-8" /> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css"> |
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
...
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/jquery.min.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> |
Icons
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.
| 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.
| Code Block | ||
|---|---|---|
| ||
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> |
...