File Structure
The compiled library contains the necessary files to get up and running:
wvus.uikit/
├── css/
│ ├── wvus.uikit.css
│ ├── wvus.uikit.css.map
│ └── wvus.uikit.min.css
├── js/
│ ├── wvus.uikit.js
│ └── wvus.uikit.min.js
├── img/
│ └── ico/
│ └── (favicons)
| └── checkbox-radio
| └── sector
| └── play
├── less/
│ ├── variables.less
│ └── mixins.less
│ └── mixins/
│ └── (mixins in module files)
└── fonts/
├── (Bootstrap Glyphicon)
└── (Font Awesome)Include
Including the UiKit is simple:
Add the CSS files:
<!DOCTYPE html>
<html>
<head>
<!-- CSS (use minified versions on production sites) -->
<link rel="stylesheet" type="text/css" href="/path/to/uikit/css/wvus.uikit.min.css">
</head>
<body>
...Add the JavaScript files:
...
<script src="/path/to/uikit/js/jquery.min.js"></script>
<script src="/path/to/uikit/js/wvus.uikit.min.js"></script>
</body>
</html>Add the CSS namespace:
<!DOCTYPE html>
<html class="wvusUikit">
<head>
...Note: the UiKit uses a CSS and JavaScript namespace. See namespace section.
Responsive
Tell browsers how they should scale to your site by including a <meta name="viewport">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Project Use
If the compiled CSS doesn’t provide enough flexibility for your project, we have that covered. The variables.less and mixins.less have been extracted to be included in a projects stylesheet.
- Variables.less contains all of the colors, fonts, and basic sizing
- Mixins.less contains mixins for easily creating background effects, applying border radius, gradients, etc
Include both of these in a LESS file to use with custom styles for a site. A starter.less can be found in the less folder.
Example less file:
/* Start a less file by importing the variables.less and mixins.less */
@import "/path/to/uikit/less/variables.less";
@import "/path/to/uikit/less/mixins.less";
/* Start LESS code */FYI: Be sure to checkout the LESS docs for more help