{"id":13397984,"url":"https://github.com/attila/savvior","last_synced_at":"2025-03-14T00:32:52.128Z","repository":{"id":13791728,"uuid":"16487143","full_name":"attila/savvior","owner":"attila","description":"A Salvattore and Masonry alternative without CSS-driven configuration or absolute CSS positioning","archived":true,"fork":false,"pushed_at":"2023-02-26T20:49:22.000Z","size":239,"stargazers_count":128,"open_issues_count":0,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-06T20:47:15.731Z","etag":null,"topics":["grid-layout","masonry","matchmedia","multicolumn"],"latest_commit_sha":null,"homepage":"http://savvior.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/attila.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-02-03T17:41:22.000Z","updated_at":"2024-06-01T17:18:28.000Z","dependencies_parsed_at":"2024-01-18T10:22:34.903Z","dependency_job_id":"e60dd7ab-127f-4c64-a6dd-96d25fe87372","html_url":"https://github.com/attila/savvior","commit_stats":{"total_commits":116,"total_committers":5,"mean_commits":23.2,"dds":0.06034482758620685,"last_synced_commit":"ddd2d6c8f3c7eeb53c130425f530104671b02633"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attila%2Fsavvior","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attila%2Fsavvior/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attila%2Fsavvior/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attila%2Fsavvior/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/attila","download_url":"https://codeload.github.com/attila/savvior/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243505162,"owners_count":20301564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid-layout","masonry","matchmedia","multicolumn"],"created_at":"2024-07-30T18:01:59.910Z","updated_at":"2025-03-14T00:32:51.808Z","avatar_url":"https://github.com/attila.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Savvior\n\n## No longer maintained\n\nThis 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!\n\n[![Build Status](https://travis-ci.org/attila/savvior.svg?branch=master)](https://travis-ci.org/attila/savvior) [![Code Climate](https://codeclimate.com/github/attila/savvior/badges/gpa.svg)](https://codeclimate.com/github/attila/savvior) [![Test Coverage](https://codeclimate.com/github/attila/savvior/badges/coverage.svg)](https://codeclimate.com/github/attila/savvior)\n\nA 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.\n\n## Features\n\n* __Requirements:__ Savvior depends on on `window.matchMedia` and [enquire.js](http://wicky.nillia.ms/enquire.js/).\n* __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.\n* __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.\n* __Lightweight:__ ~2.5 kB minified and gzipped\n* __Wide browser support:__ most modern devices/browsers and IE9+\n\n## Installation\n\nInstall it via [npm](https://npmjs.com) for your Browserify-based project\n\n```\nnpm install savvior\n```\n\nInstall it via [Bower](http://bower.io)\n\n```\nbower install savvior\n```\n\nOr just grab the latest release from the [Releases page](https://github.com/attila/savvior/releases)\n\n## Usage\n\nPlease refer to the [Examples](https://github.com/attila/savvior-examples) for detailed usage information.\n\n### Add some CSS\n\nAdd some CSS to support the layout when multiple columns are created, e.g\n\n````css\n.column { float: left; }\n.size-1of2 { width: 50%; }\n.size-1of3 { width: 33.33333%; }\n.size-1of4 { width: 25%; }\n````\n\nThese 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.\n\n### Load the JavaScript\n\n#### CommonJS\n\nIn your Browserify projects you can require the module as usual:\n\n````js\nvar savvior = require('savvior');\n````\n\n#### using AMD/Require.js\n\nIn your configuration:\n\n````js\n// Configure paths\nrequirejs.config({\n  paths: {\n    enquire: 'path/to/enquire',\n    savvior: 'path/to/savvior'\n  }\n});\n```\n\nThen in your project:\n\n```js\nrequire(['savvior', 'domReady!'], function(savvior) {\n  // Initialise savvior here.\n  //\n  // Enquire is a dependency of savvior which should already be loaded by Require\n  // You will need to load your own polyfills though.\n});\n````\n\n#### Using a plain script tag\n\nJust add these before your `\u003c/body\u003e`.\n\n````html\n\u003c!--[if IE 9]\u003e\n\u003cscript src=\"/path/to/media-match.js\"\u003e\u003c/script\u003e\n\u003c![endif]--\u003e\n\u003cscript src=\"/path/to/enquire.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/savvior.min.js\"\u003e\u003c/script\u003e\n````\n\n\n### Initialise\n\n````javascript\n  savvior.init(\"#myGrid\", {\n    \"screen and (max-width: 20em)\": { columns: 2 },\n    \"screen and (min-width: 20em) and (max-width: 40em)\": { columns: 3 },\n    \"screen and (min-width: 40em)\": { columns: 4 },\n  });\n````\n\nGrid items can be excluded by using `filter` in the options. This takes a\nstring consumable by `document.querySelectorAll()`. This is processed in each\nmediaMatch breakpoint, examples:\n\n````javascript\n  savvior.init(\"#myGrid\", {\n    \"screen and (max-width: 20em)\": {\n      columns: 2,\n      filter: '#excludeme'\n    },\n    \"screen and (min-width: 20em) and (max-width: 40em)\": {\n      columns: 3,\n      filter: '#excludeme, .filter-these-as-well'\n    },\n    \"screen and (min-width: 40em)\": { columns: 4 },\n  });\n````\n\nAlso, you can specify which CSS classes will be applied to columns on each media query, examples:\n\n````javascript\n  savvior.init(\"#myGrid\", {\n    \"screen and (max-width: 20em)\": {\n      columns: 2,\n      columnClasses: 'mobile-columns mobile-columns-one-half' // as a string\n    },\n    \"screen and (min-width: 20em) and (max-width: 40em)\": {\n      columns: 3,\n      columnClasses: ['tablet-columns', 'tablet-columns-1-3'] // as an array\n    },\n    \"screen and (min-width: 40em)\": { columns: 4 }, // default classes \"column size-1of4\"\n  });\n````\n\n### Get status\n\n````javascript\n  savvior.ready();\n  // returns [\"#myGrid\"]\n  savvior.ready(\"#myGrid\");\n  // returns true\n````\n\n### Destroy\n\n````javascript\n  // destroy all instances\n  savvior.destroy();\n  // destroy specific instances\n  savvior.destroy([\"#myGrid\", \"#anotherGrid\"]);\n````\n\n### Add elements to a grid\n\n````javascript\n  // Set some options, defaults are:\n  var options = {\n    method: 'append' // One of 'append', or 'prepend'.\n    clone: false // Whether to clone elements or move them.\n  };\n  var someItems = document.querySelectorAll('.new-items');\n  savvior.addItems('#myGrid', someItems, options, function (grid) {\n    // All done by now.\n    console.log(grid);\n  });\n````\n\n## History of changes\n\nSee [CHANGELOG](https://github.com/attila/savvior/blob/master/CHANGELOG.md)\n\n## Contributing\n\nIf you find an bug or a problem please open an issue.\n\nThis 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.\n\n### Install the development environment\n\nTo install the development dependencies, make sure you have\n[nodejs](http://nodejs.org) installed, then:\n\n1. Install grunt-cli with `npm i grunt-cli -g`\n2. Install development dependencies with `npm i`\n3. Build the project by running `grunt`\n\nPull requests for new features or bug fixes are most welcome, just make sure it\nconforms the current coding  style of the project.\n\n## Development\n\nProject led and maintained by [Attila Beregszaszi](http://attilab.com/)\n\nDevelopment sponsored by [Dennis Publishing](http://www.dennis.co.uk/) and [Front Seed Labs](http://frontseed.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattila%2Fsavvior","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattila%2Fsavvior","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattila%2Fsavvior/lists"}