compo-layout v0.8.11

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 rows `paddings` and negative `margins` 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

• /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