{"id":13852071,"url":"https://github.com/metafizzy/outlayer","last_synced_at":"2025-04-12T15:43:53.217Z","repository":{"id":8158714,"uuid":"9579886","full_name":"metafizzy/outlayer","owner":"metafizzy","description":":construction_worker: the brains \u0026 guts of a layout library","archived":false,"fork":false,"pushed_at":"2017-07-12T14:24:39.000Z","size":287,"stargazers_count":162,"open_issues_count":8,"forks_count":64,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-05-15T13:09:16.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metafizzy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-21T13:39:12.000Z","updated_at":"2024-02-26T21:43:49.000Z","dependencies_parsed_at":"2022-08-26T19:01:14.660Z","dependency_job_id":null,"html_url":"https://github.com/metafizzy/outlayer","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Foutlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Foutlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Foutlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Foutlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metafizzy","download_url":"https://codeload.github.com/metafizzy/outlayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590977,"owners_count":21129925,"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":[],"created_at":"2024-08-04T22:00:58.036Z","updated_at":"2025-04-12T15:43:53.190Z","avatar_url":"https://github.com/metafizzy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Outlayer\n\n_Brains and guts of a layout library_\n\nOutlayer is a base layout class for layout libraries like [Isotope](http://isotope.metafizzy.co), [Packery](http://packery.metafizzy.co), and [Masonry](http://masonry.desandro.com)\n\nOutlayer layouts work with a container element and children item elements.\n\n``` html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"item\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e\u003c/div\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Install\n\nInstall with [Bower](http://bower.io): `bower install outlayer`\n\n[Install with npm](http://npmjs.org/package/outlayer): `npm install outlayer`\n\n## Outlayer.create()\n\nCreate a layout class with `Outlayer.create()`\n\n``` js\nvar Layout = Outlayer.create( namespace );\n// for example\nvar Masonry = Outlayer.create('masonry');\n```\n\n+ `namespace` _{String}_ should be camelCased\n+ returns `LayoutClass` _{Function}_\n\nCreate a new layout class. `namespace` is used for jQuery plugin, and for declarative initialization.\n\nThe `Layout` inherits from [`Outlayer.prototype`](docs/outlayer.md).\n\n```\nvar elem = document.querySelector('.selector');\nvar msnry = new Masonry( elem, {\n  // set options...\n  columnWidth: 200\n});\n```\n\n## Item\n\nLayouts work with Items, accessible as `Layout.Item`. See [Item API](docs/item.md).\n\n## Declarative\n\nAn Outlayer layout class can be initialized via HTML, by setting an attribute of `data-namespace` on the element. Options are set in JSON. For example:\n\n``` html\n\u003c!-- var Masonry = Outlayer.create('masonry') --\u003e\n\u003cdiv class=\"grid\" data-masonry='{ \"itemSelector\": \".item\", \"columnWidth\": 200 }'\u003e\n  ...\n\u003c/div\u003e\n```\n\nThe declarative attributes and class will be dashed. i.e. `Outlayer.create('myNiceLayout')` will use `data-my-nice-layout` as the attribute.\n\n## .data()\n\nGet a layout instance from an element.\n\n```\nvar myMasonry = Masonry.data( document.querySelector('.grid') );\n```\n\n## jQuery plugin\n\nThe layout class also works as jQuery plugin.\n\n``` js\n// create Masonry layout class, namespace will be the jQuery method\nvar Masonry = Outlayer.create('masonry');\n// rock some jQuery\n$( function() {\n  // .masonry() to initialize\n  var $grid = $('.grid').masonry({\n    // options...\n  });\n  // methods are available by passing a string as first parameter\n  $grid.masonry( 'reveal', elems );\n});\n```\n\n## RequireJS\n\nTo use Outlayer with [RequireJS](http://requirejs.org/), you'll need to set some config.\n\nSet [baseUrl](http://requirejs.org/docs/api.html#config-baseUrl) to bower_components and set a [path config](http://requirejs.org/docs/api.html#config-paths) for all your application code.\n\n``` js\nrequirejs.config({\n  baseUrl: 'bower_components',\n  paths: {\n    app: '../'\n  }\n});\n\nrequirejs( [ 'outlayer/outlayer', 'app/my-component.js' ], function( Outlayer, myComp ) {\n  new Outlayer( /*...*/ )\n});\n```\n\nOr set a path config for all Outlayer dependencies.\n\n``` js\nrequirejs.config({\n  paths: {\n    'ev-emitter': 'bower_components/ev-emitter',\n    'get-size': 'bower_components/get-size',\n    'desandro-matches-selector': 'bower_components/desandro-matches-selector'\n  }\n});\n```\n\n## MIT license\n\nOutlayer is released under the [MIT license](http://desandro.mit-license.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Foutlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetafizzy%2Foutlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Foutlayer/lists"}