Get started

Using NPM

Run the following command:

npm install --save leonardo-ui

Add the following to your HTML:

  <link rel="stylesheet" href="node_modules/leonardo-ui/dist/leonardo-ui.css" type="text/css"/>
  <!-- Page content -->
  <script src="node_modules/leonardo-ui/dist/leonardo-ui.js" type="text/javascript"></script>

To use the icon font (optional), add this to your CSS:

@font-face {
  font-family: "LUI icons";
  src: url(node_modules/leonardo-ui/dist/lui-icons.woff) format('woff'),
     url(node_modules/leonardo-ui/dist/lui-icons.ttf) format('truetype');


You may include any version of these artifacts. Notice that using Javascripts is optional and you are free to provide your own custom implementation.

Artifact Description
leonardo-ui.min.css Minified CSS file to use in production
leonardo-ui.css CSS Source maps for CSS
leonardo-ui.min.js Minified JS file to use in production
leonardo-ui.js JS Source maps for JS
colors.less Color palette variables
variables.less General variables plus component specific variables (work ongoing)
lui-icons.ttf Truetype icon font
lui-icons.woff WOFF icon font