Responsive & Dynamic jQuery Grid Layout Plugin - Brick Folio
File Size: | 31.1 KB |
---|---|
Views Total: | 4509 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Brick Folio is a responsive jQuery plugin to create dynamic, fluid, animated and highly customizable layouts for your portfolio website.
More examples:
Basic Usage:
1. Embed the jQuery Javascript library and the jQuery brick folio plugin in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/js/jquery.brickfolio.js"></script>
2. Create a responsive and dynamic portfolio layout using plain html structure as follows.
<div class="brickfolio"> <div class="bf-item"> <img data-src="1.jpg"> <h4>Title 1</h4> <p>Description 1</p> </div> <div class="bf-item"> <img data-src="2.jpg"> <h4>Title 2</h4> <p>Description 2</p> </div> <div class="bf-item"> <img data-src="3.jpg"> <h4>Title 3</h4> <p>Description 3</p> </div> ... </div>
3. Initialize the plugin with one JS call.
jQuery(function($){ $('.brickfolio').brickfolio(); });
4. The sample CSS to style the layout and children items.
.brickfolio { font-size: 16px; margin: 0 auto; background: #fff; padding: 40px; height: 200px; /* The brickfolio container must have a width set and it is recommended to make the min-width the same as the item width. */ width: 100%; min-width: 250px; } .brickfolio.bf-loaded { background: #fff; } .bf-item { background-color: #FFF; color: #333333; -webkit-box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); -moz-box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); box-shadow: 0 3px 8px rgba(50, 50, 50, 0.50); /* The brickfolio item must have a width set. */ width: 250px; } .bf-item.bf-loaded { } .bf-item.bf-error { } .bf-item.blue { border: solid 4px #2074ff; } .bf-item.red { border: solid 4px #ff2f25; } .bf-item.green { border: solid 4px #62ff50; } .bf-item > img { display: block; margin: 0; } .bf-item > h4 { margin: 0; padding: 10px 0; border-bottom: solid 3px #333333; text-indent: 10px; } .bf-item > p { font-size: 11px; padding: 0 10px; }
5. Available options to customize your layout.
// adds the specified animation class to the container. // Available = 'swing-forward'|'fly'|'fall' animation: '', // a selector used to filter out items filter: '', // the jQuery selector to find items within the container. itemSelector: '> .bf-item', // the jQuery selector to find the main image within an item. imageSelector: '> img:first', // number in pixels of the gutter between items. // This is used as a minimum value for vertical gutters and an absolute value for horizontal ones. gutter: 40, // number in milliseconds before the layout is redrawn after the window resizes responseTime: 100, // automatically hides any items where the image has failed to load hideErrors: false, // only used to delay loading for testing and demo purposes. loadTime: 0, classes: { // class added to the container container: 'brickfolio', // class added to the container once items are loaded loaded: 'bf-loaded', // class added to items within the container item: 'bf-item', // class added to items that have broken images error: 'bf-error', // class added to filtered items filtered: 'bf-filtered' }
Change log:
0.0.5 (2016-04-12)
- update.
0.0.4 (2015-05-23)
- update.
This awesome jQuery plugin is developed by fooplugins. For more Advanced Usages, please check the demo page or visit the official website.