Features

Demo

This demo shows some images in multiple columns. Resize your browser window to see different columns kicking in.

Getting some images from Flickr...

Usage

This demo shows some images in multiple columns. Resize your browser window to see different columns kicking in.

Add some CSS

Add some CSS to support the layout when multiple columns are created, e.g

.column { float: left; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.33333%; }
.size-1of4 { width: 25%; }

Load it synchronously

Place your script and its dependencies just before the closing <body> tag.

<!--[if IE 9]>
  <script src="/path/to/media-match.js"></script>
<![endif]-->
<script src="/path/to/enquire.js"></script>
<script src="/path/to/savvior.js"></script>

...or load it asynchronously

In the <head>:

using as an AMD module, via Require.js
// Configure at least the paths for your modules
requirejs.config({
  paths: {
    enquire: 'path/to/enquire',
    savvior: 'path/to/savvior'
  }
});

require(['savvior', 'domReady!'], function(savvior) {
  // Enquire is a dependency of savvior so you can initialize it right here.
  // You'll need to load your own polyfills though.
  // Initialise savvior here.
});

using Modernizr
<script type="text/javascript">
var mq = Modernizr.mq("only all");
Modernizr.load([{
  test: mq && !window.matchMedia, // Media query support wihtout matchMedia support.
  yep: "/path/to/media.match.js", // Load the polyfill for matchMedia
  complete: function() {
    (typeof window.matchMedia === "function") && Modernizr.load('/path/to/enquire.js');
  }
},
{
  load: '/path/to/savvior.js',
  complete: function() {
      // Initialise savvior here.
    }
  }
}]);
</script>

Initialise

savvior.init('#myGrid', {
  "screen and (max-width: 20em)": { columns: 2 },
  "screen and (min-width: 20em) and (max-width: 40em)": { columns: 3 },
  "screen and (min-width: 40em)": { columns: 4 },
});
        

Get status

savvior.ready();
// returns ["#myGrid"]
savvior.ready("#myGrid");
// returns true

Destroy

// destroy all instances
savvior.destroy();
// destroy specific instances
savvior.destroy(["#myGrid", "#anotherGrid"]);

Events

Savvior dispatches the following custom events to help interacting with the layout:

Contributing

This project is actively developed at the moment. If you found a bug or would like to add something, you are most welcome in the issue queue on Github!

Alternatively, follow us on Twitter to get updates.


Fork me on GitHub