compo-layout
v0.8.11
Published
MaskJS Layout components (Atma.js)
Downloads
12
Readme
Layout Component
- Create layouts with ease.
- Center content.
- Use flexboxes with fallbacks.
Rows and Columns
We use several techniques for creating rows or columns in a container:
absolute
Absolute positioning
fluid
For columns
inline-block
is used and for rowspaddings
and negativemargins
are used, e.g. for the cases like: header, content, footer.flex
Flexbox model is applied. And the
fluid
fallback is used for the browsers, which do not support this.
Rows
Examples:
l:rows:absolute (50px, flex, auto) {
div { /*50px height*/ }
div { /*flexible height (all available space)*/ }
div { /*height of the content*/}
}
l:rows:fluid (100px, flex, flex) {
div { }
div { }
div { }
}
l:rows:flex (50px, flex, flex, auto) {
div { }
div { }
div { }
div { }
}
Columns
Examples:
l:cols:absolute (50px, flex, auto) {
div { /*50px width*/ }
div { /*flexible width*/ }
div { /*width of the content*/}
}
l:cols:fluid (100px, flex, flex) {
div { }
div { }
div { }
}
l:cols:flex (50px, flex, auto) {
div { }
div { }
div { }
}
Center
Vertical AND Horizontal centering of the content.
l:center {
/*.. content ..*/
}
Examples
# install atma toolkit
npm install atma -g
# run server
atma server
# navigate `http://localhost:5777/examples/EXAMPLE_NAME.html`
Test
npm test
:copyright: MIT - Atma.js Project