# layout-it

> custom elements for building layouts

Latest version **0.4.2** (published 2020-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install layout-it
pnpm add layout-it
yarn add layout-it
bun add layout-it
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2020-10-12 |
| First published | 2020-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Thierry PAGES |
| Maintainers | thipages |
| Keywords | html, css, layout, grid, center, custom-element, custom-elements, ui |

## Links

- npm: https://www.npmjs.com/package/layout-it
- Repository: https://github.com/thipages/layout-it
- Homepage: https://github.com/thipages/layout-it#readme
- Issues: https://github.com/thipages/layout-it/issues
- npm.io page: https://npm.io/package/layout-it

## Dependencies (1)

- [ustyler](https://npm.io/package/ustyler.md) ^1.0.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.2 (latest) — 2020-10-12
- 0.4.0 — 2020-10-12
- 0.3.1 — 2020-10-09
- 0.3.0 — 2020-10-09
- 0.2.3 — 2020-10-08
- 0.2.2 — 2020-10-08
- 0.2.1 — 2020-10-08
- 0.2.0 — 2020-10-08
- 0.1.0 — 2020-10-07

## README

# 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 :
```html
    <!-- 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 in`rows` 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
```html
    <!-- 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>
```
<details>
 <summary>MORE EXAMPLES</summary>
 
```html
    <!-- 3 rows header/footer layout with left column
         Note : expressions should not contain space characters
                eg minmax(min-content, 33%) will not work -->
    <grid-it style="height:100vh"
             rows="auto 1fr auto"
             columns="minmax(min-content,33%) 1fr"
             areas="a a b c d d">
        <div>Header</div>
        <div>Left</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>
```
<details>
  <summary>Styles, Dependencies and Polyfill</summary>
  
  ### Default styles
  **_layout-it_** uses a default style
  ```css
      html, body {
              padding:0;
              margin:0;
          }
      *, *::before, *::after {
          box-sizing: border-box;
      }
  ```
  
  ### Dependency
  - [ustyler](https://github.com/WebReflection/ustyler) for inserting the default style in the head tag.
  
  ### custom-elements polyfills
  See [WebReflection/custom-elements](https://github.com/WebReflection/custom-elements#how-to-polyfill)  
</details>

---
_Source: https://npm.io/package/layout-it · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._