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.
52 lines
1.1 KiB
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)
|
|
|
|
|
|
|
|
|
|
## 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>
|
|
```
|