Viewport Relative Responsive Grid Plugin - columns
File Size: | 6.63 KB |
---|---|
Views Total: | 1447 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

columns is a responsive grid plugin that provides a method to quickly create reponsive layouts using the native jQuery css method.
How to use it:
1. Include jQuery library and columns.js
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.columns.js"></script>
2. Include columns css
<link rel="stylesheet" href="jquery.columns.css" type="text/css" />
3. Markup
<header class="row-1"> <div class="col"> <!-- content --> </div> </header> <article class="row-3"> <div class='col'> <!-- content --> </div> <div class='col'> <!-- content --> </div> <div class="col"> <!-- content --> </div> <div class='col'> <!-- content --> </div> <div class='col'> <!-- content --> </div> <div class="col"> <!-- content --> </div> </article> <footer class="row-3"> <div class="col"> <!-- content --> </div> <div class="col push-1"> <!-- content --> </div> </footer>
4. Call the plugin
<script type="text/javascript" charset="utf-8"> $.columns.quickSetup() // Slider: setInterval(function() { $('#slider img').attr('src', 'http://lorempixel.com/1344/450?'+ new Date().getTime()) }, 2500 ) $.columns.setCols({ // set 2 columns per row on #mycontainer when window is less than 1280, // and 1 column per row when it's less than 1024 'content-1': [ [1024, 1] ], 'content-2': [ [1024, 2] ] }); </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.