You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
masonry/README.md

52 lines
1.1 KiB

# Tiny Components - Masonry
Proof of Concept!
Using Styles for UI from [Plain-UI](https://plain-ui.com)
And a few Ideas from this [Article](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/)
Source: [https://gitea.node001.net/tiny-components/masonry](https://gitea.node001.net/tiny-components/masonry)
Mirror: [https://github.com/node001-net/tiny-components-masonry](https://github.com/node001-net/tiny-components-masonry)
![demo](example/demo.gif)
## Installation
Setup this registry in your project .npmrc file:
```
@tiny-components:registry=https://gitea.node001.net/api/packages/tiny-components/npm/
```
Install with npm or yarn
```
npm i --save @tiny-components/masonry
yarn add @tiny-components/masonry
```
## Using
```
import Masonry from './masonry.js'
document.addEventListener("DOMContentLoaded", (event) => {
const masonry = new Masonry()
})
```
Markup,
```
<div class="tiny-masonry">
<div class="tiny-masonry__item">
<div class="tiny-masonry__item-inner">
<img src="/demo.jpg" loading="lazy" /><span>1</span>
</div>
</div>
...
</div>
```