Lightweight jQuery Pinterest-Like Fluid Grid Layout Plugin - Babylon Grid

Lightweight jQuery Pinterest-Like Fluid Grid Layout Plugin - Babylon Grid
File Size: 235 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Babylon Grid is a lightweight and customizable jQuery plugin to create the Pinterest-like responsive fluid grid layout for your website. JavaScript is setting up column grid and organize articles. Whole layout is define in CSS so it's pretty fast and easy customizable.

Features:

  • Fully responsive and customizable via Javascript and CSS3.
  • Ultra-lightweight. Only 3kb minified.
  • Custom grid schemes via javascipt.
  • Custom columns sizes via CSS or SASS.
  • Custom vertical align (bottom or center).

Basic Usage:

1. Include the jQuery Babylon Grid plugin and other resources in the document.

<link rel="stylesheet" href="stylesheets/jquery.babylongrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="javascript/jquery.babylongrid.min.js"></script>

2. Create the Html for a grid layout following the markup structure like this.

<div id="babylongrid">

<article>
<div class="h3 title"> Title 1 </div>
<div class="desc"> Description 1 </div>
</article>

<article>
<div class="h3 title"> Title 2 </div>
<div class="desc"> Description 2 </div>
</article>

<article>
<div class="h3 title"> Title 3 </div>
<div class="desc"> Description 3 </div>
</article>

</div>

3. Initialize the grid layout with default scheme.

<script>
(function($){
$('#babylongrid').babylongrid();
}(jQuery));
</script>

4. Available parameters.

<script>
(function($){
$('#babylongrid').babylongrid({
scheme: [ // custom grid scheme
{
minWidth: 960,
columns: 4
},
{
minWidth: 720,
columns: 3
},
{
minWidth: 550,
columns: 2
},
{
minWidth: 0,
columns: 1
}
],
display: null, // 'tower' or 'city'. Set vertical align to bottom or center
firstToRight: false, // Move first article to last column
heightDivisor: 25, // Article height divisor. For disable set 1
afterRender: null
});
}(jQuery));
</script>

Change log:

2015-09-28

  • v2.2

2014-09-22

2014-08-03

  • Update.

This awesome jQuery plugin is developed by turboMaCk. For more Advanced Usages, please check the demo page or visit the official website.