3 |
2 |
3 |
6 | Lazy Kit is a complete design system built on Bootstrap 4.
7 | It is created for all web makers that want to get a project off the ground quickly and neatly.
8 | It overwrites all Bootstrap 4 components and adds 2 more plugins. It also comes with 3 example pages.
9 |
14 | Components • 15 | Documentation • 16 | Official Page 17 |
18 | 19 |
| 
| 
|
32 | | ------------- |:-------------:| -----: |
33 | | [Register Page](https://bootstrapbay.github.io/lazy-kit/register.html) | [Profile Page](https://bootstrapbay.github.io/lazy-kit/profile.html) | [Landing Page](https://bootstrapbay.github.io/lazy-kit/landing.html) |
34 | Create an account to start playing.
67 |Already have an account? Log in.
90 |185 | If you find an issue, please report it on our GitHub repo. In this way, we can repair the bug and update the code base for all the people that are using the kit. 186 |
187 |188 | You can also please visit our profile page and send us a message or ask a question at contact@bootstrapbay.com. 189 |
190 | 191 | 192 | 204 | 205 |185 | Lazy Kit uses the Bootstrap 12 columns grid system. If you want to learn more about using it, please look at our Bootstrap grid system tutorial. We start from the basic structure and go more in depth over there. Learning more about Bootstrap 4 flex is also useful, as it makes aligning items much easier and it is the basis for the grid system. 186 |
187 | 188 | 189 | 201 | 202 |185 | The development of this kit was made possible by using the following resources. We thank the people behind them for their openness and constant work to keep them live and updated. 186 |
187 |
55 | 134 posts
6.6m followers
201 following
Ella Yelich-O'Connor
69 |Let's let things come out of the woodwork. I'll give you my best side, tell you all my best lies. Yeah, awesome right?
70 |Nothing saved yet.
121 |Help people tag you.
124 | Find Friends 125 |MIT License
185 | 186 |Copyright (c) 2019 BootstrapBay.
187 | 188 |Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
189 | 190 |The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
191 | 192 |THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
193 | 194 | 195 | 207 | 208 |
185 | The Lazy Kit sliders are based on the NoUiSlider library. In order to use them, you need to specifically import the nouislider.js in your file.
186 |
188 | To create a basic slider you need a <div> with an id that you can use to select it and initialize the slider plugin.
189 |
<!-- html -->
198 | <div class="wrapper">
199 | <div id="demo-slider"></div>
200 | </div>
201 |
202 | // javascript
203 | var slider = document.getElementById('demo-slider');
204 | noUiSlider.create(slider, {
205 | start: '20',
206 | connect: [true, false],
207 | range: {
208 | 'min': 0,
209 | 'max': 100
210 | }
211 | });
212 | You can add multiple handles to the slider by adding multiple values to the start option; one value for where each handle should start.
<!-- html -->
224 | <div class="wrapper">
225 | <div id="demo-slider-handles"></div>
226 | </div>
227 |
228 | // javascript
229 | var slider_handles = document.getElementById('demo-slider-handles');
230 | noUiSlider.create(slider_handles, {
231 | start: ['20', '40'],
232 | connect: !0,
233 | range: {
234 | 'min': 0,
235 | 'max': 100
236 | }
237 | });
238 | 242 | For more details on the available configuration options make sure you check out the official noUiSlider documentation. 243 |
244 | 245 | 246 | 258 | 259 |After you download the Lazy Kit archive and unzip it, you will see the following files:
185 | 186 |We have used SCSS to create the Lazy kit design. SCSS is a preprocessor scripting language that is interpreted or compiled into CSS. If you want to learn more about the advantages of working with it, you can go here.
188 | If you want to change the syling of the kit, you can create your own CSS and overwrite the default styling. Or you can modify the SCSS source files. Inside the assets/scss/custom folder you will find a file for every components. To be able to use SCSS (generate new CSS files based on your changes) on your local machine, you will need a compiler. We recommend the Scout App.
Here are the elements from Bootstrap 4 that have been restyled in the Lazy Kit:
192 |Besides overwritting the Bootstrap components, we have also added 2 new ones. These are:
210 |185 | Bootstrap 4 doesn’t come with its own pack of icons. So, if you want to use icons in your project you will need to use an outside library. We have used the Font Awesome Icons for the Lazy Kit. It is one of the most popular options and it has a free version that is usually diverse enough to support your project's needs. 186 |
187 | 188 |190 | You can place icons in almost any element without the need of adding adjustments in order for them to fit. Here is an example of an icon placed in a button. 191 |
192 |<button class="btn btn-danger btn-pill">
199 | <i class="fa fa-heart mr-1"></i>
200 | Favourite
201 | </button>
202 | 205 | And here is an example of an icon placed in an input group. 206 |
207 |<div class="input-group">
216 | <div class="input-group-prepend">
217 | <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
218 | </div>
219 | <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
220 | </div>
221 | 225 | We have also used icons throughout our presentation, in alerts, badges, cards and navigation. Since Font Awesome is a font, all typography options apply when using it (e.g. sizing utilities, colouring utilities). If you want to see more examples, check out our Bootstrap 4 icons tutorial. 226 |
227 | 228 | 229 | 241 | 242 |185 | Tooltips and popovers require the Popper.js library. And they both need to be initialized inside your JS file. 186 |
187 | 188 | 189 |
191 | The easiest way to add a tooltip to an element is to add the data-toggle="tooltip" attribute and the data-placement="..." to place it top/bottom/left/right. The content that will be visible inside the tooltip needs to placed inside the title attribute.
192 |
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
199 | Tooltip on top
200 | </button>
201 |
205 | In order for this code to work, you must specify inside your js that all elements with the data-toggle="tooltip" attribute should initialise a tooltip using the following code:
206 |
$(function () {
208 | $('[data-toggle="tooltip"]').tooltip()
209 | });
210 |
215 | If you want to add a popover to an element you need to add the data-toggle="popover" attribute and the data-placement="..." to place it top/bottom/left/right. The content that will be visible inside the popover needs to placed inside the data-content="..." attribute.
216 |
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="right" data-content="Wherever you go, there you are.">
223 | Popover on right
224 | </button>
228 | In order for this code to work, you must specify inside your js that all elements with the data-toggle="popover" attribute should initialise a popover using the following code:
229 |
$(function () {
231 | $('[data-toggle="popover"]').popover()
232 | });
233 | 237 | If you want to see more configuration options, make sure you check out the official Bootstrap 4 documentation on tooltips and popovers. 238 |
239 | 240 | 241 | 253 | 254 |You can use the .badge class to create labels for different elements. Here is a label inside a button.
<button class="btn btn-outline-primary">
189 | Messages <span class="badge badge-success badge-pill">10</span>
190 | </button>
191 | The default styling for the badge is outlined. Badges have contextual variations that you can see below.
196 |<span class="badge badge-primary">Primary</span>
207 | <span class="badge badge-secondary">Secondary</span>
208 | <span class="badge badge-success">Success</span>
209 | <span class="badge badge-danger">Danger</span>
210 | <span class="badge badge-warning">Warning</span>
211 | <span class="badge badge-info">Info</span>
212 | <span class="badge badge-light">Light</span>
213 | <span class="badge badge-dark">Dark</span>
214 | You can get a secondary styling and have the badges filled by adding the .badge-pill class. here is how they look.
<span class="badge badge-pill badge-primary">Primary</span>
230 | <span class="badge badge-pill badge-secondary">Secondary</span>
231 | <span class="badge badge-pill badge-success">Success</span>
232 | <span class="badge badge-pill badge-danger">Danger</span>
233 | <span class="badge badge-pill badge-warning">Warning</span>
234 | <span class="badge badge-pill badge-info">Info</span>
235 | <span class="badge badge-pill badge-light">Light</span>
236 | <span class="badge badge-pill badge-dark">Dark</span>
237 | 185 | You can create a modal using the following example. If you want to see details regarding the options you have for modals and how to create them, check out our Bootstrap 4 modals tutorial. 186 |
187 |<!-- button that opens the modal -->
195 | <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">
196 | Click for More
197 | </button>
198 |
199 | <!-- the modal -->
200 | <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
201 | <div class="modal-dialog modal-dialog-centered" role="document">
202 | <div class="modal-content">
203 | <div class="modal-header">
204 | <h5 class="modal-title" id="exampleModalLabel">Here is a modal</h5>
205 | <button type="button" class="close" data-dismiss="modal" aria-label="Close">
206 | <span aria-hidden="true">×</span>
207 | </button>
208 | </div>
209 | <div class="modal-body">
210 | Modals are a simple way to display information upon request. They let you easily add another layer upon your site and give you the possibility to create popups.
211 | </div>
212 | <div class="modal-footer">
213 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
214 | <button type="button" class="btn btn-success">View More</button>
215 | </div>
216 | </div>
217 | </div>
218 | </div>You can create alerts using the .alert class combined with a contextual modifier class to provide colour (e.g. .alert-info).
<!-- Primary Alert -->
218 | <div class="alert alert-primary" role="alert">
219 | <strong>Primary!</strong> This is an primary alert.
220 | </div>
221 |
222 | <!-- Secondary Alert -->
223 | <div class="alert alert-secondary" role="alert">
224 | <strong>Secondary!</strong> This is an secondary alert.
225 | </div>
226 |
227 | <!-- Info Alert -->
228 | <div class="alert alert-info" role="alert">
229 | <strong>Info!</strong> This is an info alert.
230 | </div>
231 |
232 | <!-- Success Alert -->
233 | <div class="alert alert-success" role="alert">
234 | <strong>Success!</strong> This is an success alert.
235 | </div>
236 |
237 | <!-- Warning Alert -->
238 | <div class="alert alert-warning" role="alert">
239 | <strong>Warning!</strong> This is an warning alert.
240 | </div>
241 |
242 | <!-- Danger Alert -->
243 | <div class="alert alert-danger" role="alert">
244 | <strong>Danger!</strong> This is an danger alert.
245 | </div>
246 | You can also create dismissible alerts by adding the .alert-dismissible class to the alert and inserting a close button. Here is an example.
<!-- Info Dismissible Alert -->
262 | <div class="alert alert-info alert-dismissible fade show" role="alert">
263 | <button type="button" class="close" data-dismiss="alert" aria-label="Close">
264 | <span aria-hidden="true">×</span>
265 | </button>
266 | <strong>Hey!</strong> I think you should know <a href="#">this</a>.
267 | </div>
268 | Make sure you check out the official Bootstrap 4 documentation for more information on alert components.
271 | 272 | 273 | 285 | 286 |This guide will guide through the process of starting to use the Lazy Kit. 185 | We have tried to make as user-friendly and easy-to-use as possible. We hope you will have a nice time 186 | using it and it will be of help to you in your projects. 187 |
188 |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.
189 | 190 |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.
192 |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).
193 | 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 -->
197 | <link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
198 |
199 | <!-- font awesome icons -->
200 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
201 |
202 | <!-- lazy styling -->
203 | <link rel="stylesheet" href="./assets/css/lazy.css">
204 | 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 -->
210 | <script src="./assets/vendor/jquery/jquery.min.js"></script>
211 | <script src="./assets/vendor/popper/popper.min.js"></script>
212 | <script src="./assets/vendor/bootstrap/bootstrap.min.js" ></script>
213 |
214 | <!-- lazy javascript -->
215 | <script src="./assets/js/lazy.js"></script>
216 | If you’re starting a new project from scratch, you can use the following HTML starter template:
219 |
220 | <!DOCTYPE html>
221 | <html lang="en">
222 | <head>
223 | <meta charset="utf-8">
224 | <meta name="viewport" content="width=device-width, initial-scale=1">
225 | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
226 | <link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
227 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
228 | <link rel="stylesheet" href="./assets/css/lazy.css">
229 | </head>
230 | <body>
231 | <!-- your content here -->
232 |
233 | <!-- jQuery first, then Popper.js, then Bootstrap JS -->
234 | <script src="./assets/vendor/jquery/jquery.min.js"></script>
235 | <script src="./assets/vendor/popper/popper.min.js"></script>
236 | <script src="./assets/vendor/bootstrap/bootstrap.min.js" ></script>
237 |
238 | <!-- optional plugins -->
239 | <script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
240 |
241 | <!-- lazy javascript -->
242 | <script src="./assets/js/lazy.js"></script>
243 | </body>
244 | </html>
245 |
246 |
247 |
248 |
249 |
261 |
262 |
185 | You can create a simple progress bar using the .progress wrapper and the .progress-bar helper class inside.
186 |
<div class="progress">
195 | <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
196 | </div>
201 | You can create a smaller progress bar with the class .progress-sm or a larger one with the class .progress-lg.
202 |
<div class="progress progress-sm">
212 | <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
213 | </div>
214 | <div class="progress progress-lg">
215 | <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
216 | </div>221 | You can use the background color utilities to color the progress bars. 222 |
223 |<div class="progress">
241 | <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
242 | </div>
243 | <div class="progress">
244 | <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
245 | </div>
246 | <div class="progress">
247 | <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
248 | </div>
249 | <div class="progress">
250 | <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
251 | </div>
252 | <div class="progress">
253 | <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
254 | </div>258 | To find out more about progress bars and their options, check out the official Bootstrap 4 documentation. 259 |
260 | 261 | 262 | 274 | 275 |