https://github.com/mcanouil/quarto-masonry

Masonry.js Extension for Quarto
https://github.com/mcanouil/quarto-masonry

grid-system masonryjs quarto quarto-extension quarto-pub quartopub

Last synced: 2 months ago
JSON representation

Masonry.js Extension for Quarto

• Host: GitHub
• URL: https://github.com/mcanouil/quarto-masonry
• Owner: mcanouil
• License: mit
• Created: 2022-10-28T10:08:05.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-08T19:32:41.000Z (6 months ago)
• Last Synced: 2024-08-08T22:11:28.784Z (6 months ago)
• Topics: grid-system, masonryjs, quarto, quarto-extension, quarto-pub, quartopub
• Language: Lua
• Homepage: https://m.canouil.dev/quarto-masonry/
• Size: 36.1 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# `Masonry.js` Extension for Quarto

This extension provides support for [`Masonry.js`](https://masonry.desandro.com/).

> [!CAUTION]

> _**This is a work in progress repository, thus the content is highly experimental.**_

## Installing

```sh

quarto add mcanouil/quarto-masonry

```

This will install the extension under the `_extensions` subdirectory.  

If you're using version control, you will want to check in this directory.

## Using

Activate `Masonry.js` in HTML/Markdown using `data-masonry='{ "itemSelector": ".grid-item"}'` in fenced divs with proper item selector to only rearrange a subset of elements.  

See [`Masonry.js` options](https://masonry.desandro.com/options.html) page for details.

```markdown

:::: {.grid data-masonry='{ "itemSelector": ".grid-item" }'}

::: {.grid-item}

:::

::: {.grid-item .grid-item--width2 .grid-item--height2}

:::

::: {.grid-item .grid-item--height3}

:::

::: {.grid-item .grid-item--height2}

:::

::: {.grid-item .grid-item--width3}

:::

::: {.grid-item}

:::

::: {.grid-item}

:::

::::

```

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd).

This is the output of `example.qmd` for [HTML](https://m.canouil.dev/quarto-masonry/).