Get started
Using NPM
Run the following command:
npm install --save leonardo-ui
Add the following to your HTML:
<head>
<link rel="stylesheet" href="node_modules/leonardo-ui/dist/leonardo-ui.css" type="text/css"/>
</head>
<body>
<!-- Page content -->
<script src="node_modules/leonardo-ui/dist/leonardo-ui.js" type="text/javascript"></script>
</body>
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');
}
Bundle
Alternatively, you can download a bundle and follow the instructions above. Replace the paths starting with node_modules. The bundle includes the same artifacts as the NPM package plus some code examples.
Artifacts
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 |
| leonardo-ui.css.map | Source maps for CSS |
| leonardo-ui.min.js | Minified JS file to use in production |
| leonardo-ui.js | JS |
| leonardo-ui.js.map | 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 |