https://github.com/polight/legoland
A set of HTML web-components for daily usage.
https://github.com/polight/legoland
Last synced: 22 days ago
JSON representation
A set of HTML web-components for daily usage.
- Host: GitHub
- URL: https://github.com/polight/legoland
- Owner: Polight
- Created: 2020-04-12T11:43:25.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-13T14:07:19.000Z (about 6 years ago)
- Last Synced: 2025-03-20T16:44:38.115Z (about 1 year ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LegoLand
A set of basic Web-Components usable anywhere with no installation.
The webcomponents available are about layout and widget inspired from https://csslayout.io/patterns.
As of today the following components are available:
- [Safe HTML](./bricks/safe-html.html): integrate dynamic unescaped HTML string
- [Stacked Cards](./bricks/stacked-cards.html): UI cards display
- [Holy Grail](./bricks/holy-grail.html): UI layout with sticky footer and header
## Usage
The only thing to do is to include the components and use them; it's just HTML!
Use the webcomponents in your HTML page:
```html
1
2
3
stacked-cards p {
width: 200px;
height: 300px;
border: 2px solid #888;
}
```
## Advanced Usage
You may include all components calling https://cdn.jsdelivr.net/gh/polight/legoland/dist/index.js.
If you'd rather pick a selection of components you can include the script
directly from _/dist_. Eg: `` to call the _safe-html_ component.
## Building Legoland
1. install the lego dependency: `npm i`
2. create your own component in the bricks folder (view [Lego](https://github.com/polight/lego) doc)
3. build it: `npm run build` (or `npm run dev` if you want an auto-refresh)
## About
These components were originally written in [Lego](https://github.com/polight/lego).