{"id":20622588,"url":"https://github.com/myterminal/lay-em","last_synced_at":"2025-07-13T07:04:44.128Z","repository":{"id":52680197,"uuid":"160433258","full_name":"myTerminal/lay-em","owner":"myTerminal","description":"A library to create cross-browser, self-adjusting HTML layouts","archived":false,"fork":false,"pushed_at":"2022-08-19T04:52:49.000Z","size":349,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-18T22:04:51.617Z","etag":null,"topics":["html","layouts"],"latest_commit_sha":null,"homepage":"","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/myTerminal.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":"2018-12-04T23:45:42.000Z","updated_at":"2022-08-03T23:46:48.000Z","dependencies_parsed_at":"2022-08-21T15:20:27.527Z","dependency_job_id":null,"html_url":"https://github.com/myTerminal/lay-em","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/myTerminal%2Flay-em","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Flay-em/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Flay-em/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Flay-em/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myTerminal","download_url":"https://codeload.github.com/myTerminal/lay-em/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242300863,"owners_count":20105310,"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":["html","layouts"],"created_at":"2024-11-16T12:23:36.310Z","updated_at":"2025-03-06T23:24:12.621Z","avatar_url":"https://github.com/myTerminal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lay-em\n\n[![npm version](https://badge.fury.io/js/lay-em.svg)](https://badge.fury.io/js/lay-em)\n[![npm downloads](https://img.shields.io/npm/dt/lay-em.svg)](https://www.npmjs.com/package/lay-em)\n[![License](https://img.shields.io/github/license/myTerminal/lay-em.svg)](https://opensource.org/licenses/MIT)  \n[![Build Status](https://travis-ci.org/myTerminal/lay-em.svg?branch=master)](https://travis-ci.org/myTerminal/lay-em)\n[![Code Climate](https://codeclimate.com/github/myTerminal/lay-em.png)](https://codeclimate.com/github/myTerminal/lay-em)\n[![js-myterminal-style](https://img.shields.io/badge/code%20style-myterminal-blue.svg)](https://www.npmjs.com/package/eslint-config/myterminal)\n[![Coverage Status](https://img.shields.io/coveralls/myTerminal/lay-em.svg)](https://coveralls.io/r/myTerminal/lay-em?branch=master)  \n[![NPM](https://nodei.co/npm/lay-em.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/lay-em/)\n\nA library to create cross-browser, self-adjusting HTML layouts\n\n## Features\n\n* Creates perfectly fitting layouts on request\n* A simple abstraction over DOM manipulations\n\n## How to Use\n\n### Directly from a web page\n\nOne can use *lay-em* directly from a web-page by attaching the *lay-em.js* to the DOM.\n\n    \u003c!-- Attaching the lay-em script --\u003e\n    \u003cscript type=\"text/javascript\" src=\"path/to/library/lay-em.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Usage --\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        layEm.refreshLayout();\n    \u003c/script\u003e\n\n### With [Webpack](https://webpack.js.org), [Browserify](http://browserify.org) or [RequireJS](http://requirejs.org)\n\nInstall *lay-em* from NPM\n\n    npm install lay-em --save-dev\n\nConsume as an ES6 module\n\n    import * as layEm from 'lay-em';\n\nor\n\n    import { layHorizontally, layVertically } from 'lay-em';\n\nConsume as a CommonJS module\n\n    var layEm = require('lay-em');\n\nConsume as an AMD\n\n    require(['lay-em'], function (layEm) {\n        // Consume layEm\n    }\n\nNote: You may have to use [Babel](https://babeljs.io) for ES6 transpilation.\n\n### Layout Functions\n\n#### `layHorizontally`\n\nAligns the specified set of elements within an element, accounting for widths of a few fixed elements.\n\n    layEm.layHorizontally(\n        document.getElementById('well'),\n        [\n            document.getElementById('left-clamp'),\n            document.getElementById('right-clamp')\n        ],\n        [\n            {\n                element: document.getElementById('column-1'),\n                parts: 2\n            },\n            {\n                element: document.getElementById('column-2'),\n                parts: 3\n            }\n        ]\n    )\n\nThe above example accounts for the horizontal space required by `#left-clamp` and `#right-clamp` and divides the remaining width between the two specified elements in a 40:60 ratio to fit exactly within `#well`.\n\nOptionally, you can skip specifying the ratio and just provide the elements itself. The width is then equally divided between the supplied elements.\n\n    layEm.layHorizontally(\n        document.getElementById('well'),\n        [\n            document.getElementById('left-clamp'),\n            document.getElementById('right-clamp')\n        ],\n        [\n            document.getElementById('column-1'),\n            document.getElementById('column-2')\n        ]\n    )\n\n#### `layVertically`\n\nAligns the specified set of elements within an element, accounting for heights of a few fixed elements.\n\n    layEm.layVertically(\n        document.getElementById('application-container'),\n        [\n            document.getElementById('titlebar'),\n            document.getElementById('toolbar'),\n            document.getElementById('statusbar')\n        ],\n        [\n            {\n                element: document.getElementById('navigator'),\n                parts: 2\n            },\n            {\n                element: document.getElementById('stage'),\n                parts: 3\n            }\n        ]\n    )\n\nThe above example accounts for the vertical space required by `#titlebar`, `#toolbar` and `#statusbar` and divides the remaining height between the two specified elements in a 40:60 ratio to fit exactly within `#application-container`.\n\nOptionally, you can skip specifying the ratio and just provide the elements itself. The height is then equally divided between the supplied elements.\n\n    layEm.layVertically(\n        document.getElementById('application-container'),\n        [\n            document.getElementById('titlebar'),\n            document.getElementById('toolbar'),\n            document.getElementById('statusbar')\n        ],\n        [\n            document.getElementById('navigator'),\n            document.getElementById('stage')\n        ]\n    )\n\n#### `showElement`\n\nShows the supplied element in the DOM and refreshes the created layout.\n\n    layEm.showElement(document.getElementById('toolbar'))\n\n#### `hideElement`\n\nHides the supplied element in the DOM and refreshes the created layout.\n\n    layEm.hideElement(document.getElementById('toolbar'))\n\n#### `updateLayoutOnDimensionChange`\n\nTo any change in the dimensions made for a particular element, makes the necessary re-alignment in the layout.\n\n    layEm.updateLayoutOnDimensionChange(document.getElementById('toolbar'))\n\n#### `refreshLayout`\n\nRe-aligns the entire layout.\n\n    layEm.refreshLayout()\n\n#### `destroyLayout`\n\nRemoves the alignment made since the last `destroyLayout` call.\n\n    layEm.destroyLayout()\n\n#### `clearLayout`\n\nClears the layout information from memory.\n\n    layEm.clearLayoutMap()\n\n## Demo\n\nYou can view a demo [here](https://myterminal.github.io/lay-em/examples).\n\n## To-do\n\n* Write unit-tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Flay-em","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyterminal%2Flay-em","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Flay-em/lists"}