Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/attila/savvior
A Salvattore and Masonry alternative without CSS-driven configuration or absolute CSS positioning
https://github.com/attila/savvior
grid-layout masonry matchmedia multicolumn
Last synced: 26 days ago
JSON representation
A Salvattore and Masonry alternative without CSS-driven configuration or absolute CSS positioning
- Host: GitHub
- URL: https://github.com/attila/savvior
- Owner: attila
- License: mit
- Archived: true
- Created: 2014-02-03T17:41:22.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-02-26T20:49:22.000Z (over 1 year ago)
- Last Synced: 2024-07-21T03:33:40.639Z (4 months ago)
- Topics: grid-layout, masonry, matchmedia, multicolumn
- Language: JavaScript
- Homepage: http://savvior.org
- Size: 233 KB
- Stars: 128
- Watchers: 10
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Savvior
## No longer maintained
This project has not received any updates for several years now. Feel free to fork this project if you still rely on it, but I honestly believe that by now you have found a better solution for your multi-column layout needs. Thank you for your continued care!
[](https://travis-ci.org/attila/savvior) [](https://codeclimate.com/github/attila/savvior) [](https://codeclimate.com/github/attila/savvior)
A Javascript solution for multicolumn layouts, an alternative to Salvattore or Masonry, without CSS driven configuration or absolute CSS positioning. A large part of the code is heavily inspired by the excellent [Salvattore](http://salvattore.com), however it fixes many of its quirks.
## Features
* __Requirements:__ Savvior depends on on `window.matchMedia` and [enquire.js](http://wicky.nillia.ms/enquire.js/).
* __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+
## Installation
Install it via [npm](https://npmjs.com) for your Browserify-based project
```
npm install savvior
```
Install it via [Bower](http://bower.io)
```
bower install savvior
```
Or just grab the latest release from the [Releases page](https://github.com/attila/savvior/releases)
## Usage
Please refer to the [Examples](https://github.com/attila/savvior-examples) for detailed usage information.
### Add some CSS
Add some CSS to support the layout when multiple columns are created, e.g
````css
.column { float: left; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.33333%; }
.size-1of4 { width: 25%; }
````
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.
### Load the JavaScript
#### CommonJS
In your Browserify projects you can require the module as usual:
````js
var savvior = require('savvior');
````
#### using AMD/Require.js
In your configuration:
````js
// Configure paths
requirejs.config({
paths: {
enquire: 'path/to/enquire',
savvior: 'path/to/savvior'
}
});
```
Then in your project:
```js
require(['savvior', 'domReady!'], function(savvior) {
// Initialise savvior here.
//
// Enquire is a dependency of savvior which should already be loaded by Require
// You will need to load your own polyfills though.
});
````
#### Using a plain script tag
Just add these before your `