{"id":19026826,"url":"https://github.com/psolbach/ordnung","last_synced_at":"2025-10-24T21:41:45.538Z","repository":{"id":57316172,"uuid":"45112774","full_name":"psolbach/ordnung","owner":"psolbach","description":"The 1kb alternative to Isotope","archived":false,"fork":false,"pushed_at":"2016-01-07T12:43:58.000Z","size":18,"stargazers_count":79,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T01:46:53.227Z","etag":null,"topics":["isotope","layout-engine","layouts","masonry"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/psolbach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-28T13:04:45.000Z","updated_at":"2024-12-05T16:09:25.000Z","dependencies_parsed_at":"2022-08-25T20:00:36.678Z","dependency_job_id":null,"html_url":"https://github.com/psolbach/ordnung","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psolbach%2Fordnung","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psolbach%2Fordnung/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psolbach%2Fordnung/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psolbach%2Fordnung/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psolbach","download_url":"https://codeload.github.com/psolbach/ordnung/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167158,"owners_count":21223499,"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":["isotope","layout-engine","layouts","masonry"],"created_at":"2024-11-08T20:50:50.063Z","updated_at":"2025-10-24T21:41:40.498Z","avatar_url":"https://github.com/psolbach.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ordnung.js\n_The 1kb alternative to Isotope._    \n_Does grid column layouts in a jiffy, no globals asked._\n\n## Demo\n\n\u003ca href=\"http://static.psolbach.com/ordnung.js/example\" target=\"_blank\"\u003eExample\u003c/a\u003e\n\n## Install\n`npm install ordnung-js`\n\n\n## Download\n+ [ordnung.js](https://raw.githubusercontent.com/psolbach/ordnung/master/ordnung.js) un-minified, or\n+ [ordnung.min.js](https://raw.githubusercontent.com/psolbach/ordnung/master/ordnung.min.js) minified\n\n\n## Usage\n\n_JS_\n\n``` js\nvar container = document.querySelector('.container');\nvar ordnung = new Ordnung(container);\n\nordnung.layout();\n```\n\n_HTML_\n``` html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"elem\"\u003e\u003c/div\u003e\n  ...\n\u003c/div\u003e\n```\n\nElements should be of equal width but variable height and ``float: left``.    \nAfter layout, the container height will be adjusted to the condensed height of the elements.    \n\n_CSS_    \n\nTo use Ordnung with media-queries, you need to use a hack for now:\nClear the styles on ``window.resize`` and call ``ordnung.layout()``. See example.\n\n## Compatibility\nOrdnung.js uses CSS-transforms to move stuff around. This is a widely supported property, please consult [Can I Use](http://caniuse.com/#feat=transforms2d) for specifics. As we're not implementing a bin packing algorithm, Ordnung only works with _equal-width_ columns, just like many use cases with the original Isotope.\n\n## Performance\nPlenty fast, albeit at the cost of being a one-trick pony.  \nAlign 1000 elements x 100 runs ➝ median, on an Intel i7-3720QM.\n\n| Browser            | Ordnung ops/sec      | Other ops/sec        |\n| ------------------ |:--------------------:|:--------------------:|\n| Chrome 46          | 32.26                | 10.64                |\n| Firefox 41         | 19.23                | 0.39                 |\n| Safari 8           | 29.41                | 8.85                 |\n\n## License\n\nOrdnung.js is licensed under [MIT](https://opensource.org/licenses/MIT).    \nYou may use this library at will – if you mention the author.\n\n## Credits\nInspired by Isotope by [Metafizzy](http://metafizzy.co)    \nMade by [Paul Solbach](http://twitter.com/___paul)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsolbach%2Fordnung","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsolbach%2Fordnung","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsolbach%2Fordnung/lists"}