layout-it v0.4.2

layout-it

Custom elements for building layouts

• <grid-it />
• <center-it />

How To Use

• via npm : npm i layout-it then use import from 'layout-it';
• within HTML via script tag :

    <!-- ES5 version -->
    <script nomodule src="min.js"></script>
    <!-- ES6 version -->
    <script type="module" src="index.min.js"></script>

<grid-it />

Layout element for building flex grids

• extends HTMLElement
• based on display:grid style
• with three custom attributes rows, columns and areas precursors of corresponding grid-template-xxx style properties.

Compared to grid-template-xxx style properties, rows, columns and areas must be declared with the following rules

• expressions inrows and columns should not contain spaces, eg columns="repeat(3,1fr)", not columns="repeat(3, 1fr)"
• areas has been simplified compared to grid-template-areas and it is just a sequence of letters or digits separated by (multiple) spaces, eg areas="a b c d", not areas="'a' 'b' 'c' 'd'". The sequence of letters match the grid children order.

Examples

    <!-- 3 rows header/footer layout -->
    <grid-it style="height:100vh"
             rows="auto 1fr auto"
             columns="1fr"
             areas="a b c">
        <div>Header</div>
        <div>Main</div>
        <div>Footer</div>
    </grid-it>

<!-- 3 rows header/footer with 3 main equal columns
     Note : attributes supports multiple spaces
            except for expression (see upper)-->
<grid-it style="height:100vh"
         rows="auto 1fr auto"
         columns="repeat(3,1fr)"
         areas="a a a   b c d   e e e">
    <div>Header</div>
    <div>Left</div>
    <div>Main</div>
    <div>Right Menu</div>
    <div>Main</div>
    <div>Footer</div>
</grid-it>

</details>

## `<center-it />`
Layout element for content centering
- extends `HTMLElement`
- based on `display:flex;justify-content:center;align-items:center` style
- no custom attribute

### Examples
```html
    <center-it>I am centered</center-it>