This time I will share jQuery Plugin and tutorial about Lightweight Responsive Layout Framework With jQuery – columns.js, hope it will help you in programming stack.
columns.js is an extremely lightweight jQuery plugin used for creating simple, responsive layout controlled by CSS classes. Similar to the Bootstrap‘s grid system.
How to use it:
1. Include the jQuery columns.js plugin’s JS and CSS files after you’ve included jQuery JavaScript library.
1 |
<link rel="stylesheet" href="sass/columns.css"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="js/columns.js"></script> |
2. This jQuery & CSS layout framework consists of 5 CSS classes:
xxl: For desktop (screen size: 1441px)xl: For desktop (screen size: 1280px)l: For desktop & tablet (screen size: 1024px)m: For desktop & tablet (screen size: 800px)s: For mobile & tablet (screen size: 580px)xs: For mobile & tablet (screen size: less than 580px)
3. Make your custom layout using the CSS rules like this:
01 |
div class="col-l-1of12"></div> |
02 |
<div class="col-l-11of12"></div> |
03 |
<div class="col-l-2of12"></div> |
04 |
<div class="col-l-10of12"></div> |
05 |
<div class="col-l-3of12"></div> |
06 |
<div class="col-l-9of12"></div> |
07 |
<div class="col-l-4of12"></div> |
08 |
<div class="col-l-8of12"></div> |
09 |
<div class="col-l-5of12"></div> |
10 |
<div class="col-l-7of12"></div> |
11 |
<div class="col-l-6of12"></div> |
12 |
<div class="col-l-6of12"></div> |
This awesome jQuery plugin is developed by Bamboo3000. For more Advanced Usages, please check the demo page or visit the official website.
