A library to create cross-browser, self-adjusting HTML layouts
- Creates perfectly fitting layouts on request
- A simple abstraction over DOM manipulations
One can use lay-em directly from a web-page by attaching the lay-em.js to the DOM.
<!-- Attaching the lay-em script -->
<script type="text/javascript" src="path/to/library/lay-em.js"></script>
<!-- Usage -->
<script type="text/javascript">
layEm.refreshLayout();
</script>
With Webpack, Browserify or RequireJS
Install lay-em from NPM
npm install lay-em --save-dev
Consume as an ES6 module
import * as layEm from 'lay-em';
or
import { layHorizontally, layVertically } from 'lay-em';
Consume as a CommonJS module
var layEm = require('lay-em');
Consume as an AMD
require(['lay-em'], function (layEm) {
// Consume layEm
}
Note: You may have to use Babel for ES6 transpilation.
Aligns the specified set of elements within an element, accounting for widths of a few fixed elements.
layEm.layHorizontally(
document.getElementById('well'),
[
document.getElementById('left-clamp'),
document.getElementById('right-clamp')
],
[
{
element: document.getElementById('column-1'),
parts: 2
},
{
element: document.getElementById('column-2'),
parts: 3
}
]
)
The 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
.
Optionally, you can skip specifying the ratio and just provide the elements itself. The width is then equally divided between the supplied elements.
layEm.layHorizontally(
document.getElementById('well'),
[
document.getElementById('left-clamp'),
document.getElementById('right-clamp')
],
[
document.getElementById('column-1'),
document.getElementById('column-2')
]
)
Aligns the specified set of elements within an element, accounting for heights of a few fixed elements.
layEm.layVertically(
document.getElementById('application-container'),
[
document.getElementById('titlebar'),
document.getElementById('toolbar'),
document.getElementById('statusbar')
],
[
{
element: document.getElementById('navigator'),
parts: 2
},
{
element: document.getElementById('stage'),
parts: 3
}
]
)
The 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
.
Optionally, you can skip specifying the ratio and just provide the elements itself. The height is then equally divided between the supplied elements.
layEm.layVertically(
document.getElementById('application-container'),
[
document.getElementById('titlebar'),
document.getElementById('toolbar'),
document.getElementById('statusbar')
],
[
document.getElementById('navigator'),
document.getElementById('stage')
]
)
Shows the supplied element in the DOM and refreshes the created layout.
layEm.showElement(document.getElementById('toolbar'))
Hides the supplied element in the DOM and refreshes the created layout.
layEm.hideElement(document.getElementById('toolbar'))
To any change in the dimensions made for a particular element, makes the necessary re-alignment in the layout.
layEm.updateLayoutOnDimensionChange(document.getElementById('toolbar'))
Re-aligns the entire layout.
layEm.refreshLayout()
Removes the alignment made since the last destroyLayout
call.
layEm.destroyLayout()
Clears the layout information from memory.
layEm.clearLayoutMap()
You can view a demo here.
- Write unit-tests