https://github.com/thipages/layout-it
Custom elements for building layouts
https://github.com/thipages/layout-it
center css custom-element custom-elements grid html layout ui
Last synced: about 2 months ago
JSON representation
Custom elements for building layouts
- Host: GitHub
- URL: https://github.com/thipages/layout-it
- Owner: thipages
- License: mit
- Created: 2020-10-05T21:00:16.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-11T19:03:19.000Z (over 2 years ago)
- Last Synced: 2025-03-08T11:05:23.955Z (2 months ago)
- Topics: center, css, custom-element, custom-elements, grid, html, layout, ui
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# layout-it
Custom elements for building layouts
- ``
- ``
## How To Use
- via npm : `npm i layout-it` then use `import from 'layout-it'`;
- within HTML via script tag :
```html
```
## ``
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
Header
Main
Footer
```
MORE EXAMPLES
```html
Header
Left
Main
Footer
Header
Left
Main
Right
Footer
```
## ``
Layout element for content centering
- extends `HTMLElement`
- based on `display:flex;justify-content:center;align-items:center` style
- no custom attribute
### Examples
```html
I am centered
```
Styles, Dependencies and Polyfill
### 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)