# Tiny Components - Masonry 

Proof of Concept!

Using Styles for UI from [Plain-UI](https://plain-ui.com)

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 class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>2</span></div></div>
    <div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>3</span></div></div>
    <div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>4</span></div></div>
    <div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>5</span></div></div>
    <div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>6</span></div></div>
    ...
</div>
```