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');
}
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 |