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

©️ MIT - Atma.js Project