This guide will guide through the process of starting to use the Lazy Kit. We have tried to make as user-friendly and easy-to-use as possible. We hope you will have a nice time using it and it will be of help to you in your projects.
To start using this UI Kit you will need to import some files in your current project or start from scratch using our starter template.
After you have downloaded Lazy Kit, make sure you unzip the archive. Inside of the folder, you will find all the files necessary for it to work.
Since Lazy Kit is built on top of Bootstrap 4, so you will need to include the Bootstrap stylesheet and javascript file for the kit to work. Since Bootstrap needs jQuery, you will need to include this before Bootstrap. And popper.js is used for some of the components (like tooltips and popovers, so it will also need to be included).
After including the Bootstrap dependencies, you need to include the lazy.css stylesheet inside your project’s <head>.
Copy and paste the following stylesheets link inside your <head> section.
<!-- bootstrap -->
<link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
<!-- font awesome icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<!-- lazy styling -->
<link rel="stylesheet" href="./assets/css/lazy.css">
Place the following <script>s near the end of your pages, right before the closing </body> tag.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/vendor/bootstrap/bootstrap.min.js" ></script>
<!-- lazy javascript -->
<script src="./assets/js/lazy.js"></script>
If you’re starting a new project from scratch, you can use the following HTML starter template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/lazy.css">
</head>
<body>
<!-- your content here -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/vendor/bootstrap/bootstrap.min.js" ></script>
<!-- optional plugins -->
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<!-- lazy javascript -->
<script src="./assets/js/lazy.js"></script>
</body>
</html>