Lightweight and Dynamic Javascript Grid Layout - Salvattore

File Size: 74.6 KB
Views Total: 4429
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight and Dynamic Javascript Grid Layout - Salvattore

Salvattor is a javascript layout library that enables you to create customizable and dynamic grid layout with html5 data-* attributes and CSS-driven configuration. A good alternative to the jQuery Masonry plugin.

How to use it:

1. Markup html structure

<div id="timeline" data-columns>
  <div class="column">
    <div>Item #001</div>
    <div>Item #004</div>
  <div class="column">
    <div>Item #002</div>
    <div>Item #005</div>
  <div class="column">
    <div>Item #003</div>

2. The sample css

#timeline[data-columns] {
    content: '2';

@media screen and (min-width: 601px){
  #timeline[data-columns] {
    content: '3';

Change logs:

v1.0.9 (2015-08-08)

  • Fix IE9 throwing error not implemented when using @import rule with an url

v1.0.8 (2015-07-09)

  • Convert all exposed to camelCase notation, underscore notation is now deprecated
  • Expose recreateColumns function to allow column recreation
  • Expose rescanMediaQueries function to check all styles for new definitions
  • Fix IE 11 DocumentFragment bug
  • Fix reading of empty css files
  • @import statements no longer lead to errors
  • <style>-Tags without type="text/css" are now parsed
  • Fix grid setting obtaining on older android browsers
  • Interate over any interatable elements passed to appendElements

v1.0.7 (2014-03-14)

  • Fixes append_elements bug for empty grids

v1.0.6 (2014-03-11)

  • Fixes append_elements bug

v1.0.5 (2014-02-27)

  • Fixes Chrome Canary bug

v1.0.4 (2013-11-21)

  • Fixes error regarding JS API

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