compo-layout

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