- Requirements: Savvior depends on on
- Integrates easily: 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.
- Sensible configuration: CSS-driven configuration can make parsing CSS on a CDN troublesome, just pass the element selector instead and a single config object to init() and it's done.
- Lightweight: ~2.5 kB minified and gzipped
- Wide browser support: most modern devices/browsers and IE9+
Install it via npm for your Browserify-based project
npm install savvior
Install it via Bower
bower install savvior
Or just grab the latest release from the Releases page
Please refer to the Examples for detailed usage information.
Add some CSS
Add some CSS to support the layout when multiple columns are created, e.g
These CSS classes will be added to your columns by default. If you need another classes, you can specify them in
options as described in next sections.
In your Browserify projects you can require the module as usual:
var savvior = ;
In your configuration:
// Configure pathsrequirejs;```Then in your project:```js;
Using a plain script tag
Just add these before your
<!--[if IE 9]><script src="/path/to/media-match.js"></script><![endif]-->
Grid items can be excluded by using
filter in the options. This takes a
string consumable by
document.querySelectorAll(). This is processed in each
mediaMatch breakpoint, examples:
Also, you can specify which CSS classes will be applied to columns on each media query, examples:
savvior;// returns ["#myGrid"]savvior;// returns true
// destroy all instancessavvior;// destroy specific instancessavvior;
Add elements to a grid
// Set some options, defaults are:var options =method: 'append' // One of 'append', or 'prepend'.clone: false // Whether to clone elements or move them.;var someItems = document;savvior;
History of changes
If you find an bug or a problem please open an issue.
This project uses Grunt for running the builds and tests. The module uses an UMD wrapper to retain compatibility with CommonJS and AMD module formats. Tests are run via Jasmine in PhantomJS.
Install the development environment
To install the development dependencies, make sure you have nodejs installed, then:
- Install grunt-cli with
npm i grunt-cli -g
- Install development dependencies with
- Build the project by running
Pull requests for new features or bug fixes are most welcome, just make sure it conforms the current coding style of the project.
Project led and maintained by Attila Beregszaszi