Features
- Requirements: Savvior relies on window.matchMedia and enquire.js;
- Easy to integrate: No automatic execution, init the script when YOU think it should happen. For further integration, custom events are dispatched after initialisation or redrawing the layout
- Simple configuration: CSS-driven configuration makes parsing CSS on a CDN troubled, with Savvior just pass an element selector and an object of media queries with column numbers to init() and be done with it
- Lightweight: ~1.96 kB minified and gzipped
- Wide browser support: all modern browsers and IE9+
- AMD compatible: Can be used in your RequireJS projects
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
// 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.
});<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 trueDestroy
// 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:
savvior:initis dispatched when Savvior has finished registering all behaviours.savvior:destroyis dispatched when Savvior has finished removing itself.savvior:setupis dispatched when a media match setup phase occurs in any given enquire handler set by Savvior.savvior:redrawis dispatched when a column has been redrawn.Event.detailsholds extra information on the element redrawn plus the number of previous and current columns.savvior:restoreis dispatched when a column has been restored to its original state.
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.
