# stonework

> Arranges images intelligently based on available width and aspect ratios.

Latest version **1.0.4** (published 2022-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install stonework
pnpm add stonework
yarn add stonework
bun add stonework
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-08-03 |
| First published | 2022-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jonathan Simmonds |
| Maintainers | js1300 |

## Links

- npm: https://www.npmjs.com/package/stonework
- Repository: https://github.com/js1300/stonework
- Homepage: https://github.com/js1300/stonework#readme
- Issues: https://github.com/js1300/stonework/issues
- npm.io page: https://npm.io/package/stonework

## Recent versions

- 1.0.4 (latest) — 2022-08-03
- 1.0.3 — 2022-08-03
- 1.0.2 — 2022-07-29
- 1.0.1 — 2022-05-24
- 1.0.0 — 2022-05-18

## README

# Stonework

![cover.jpg](examples/images/cover.jpg)

## Introduction

Stonework is a lightweight vanilla JavaScript library for arranging images in a masonry row type layout.

## Installation

Install `stonework` via [NPM](https://www.npmjs.com):

`npm install stonework`

## Usage

Import the stonework library:

`import Stonework from 'stonework'`

Create a new instance of Stonework:

`new Stonework(gallery_element_id, minimum_frame_width, frame_border_width, transition_time);`

### Arguments

`gallery_element_id` (string) - the id of a div element with a gallery structure

`minimum_frame_width` (integer) - the minimum width, in pixels, that a frame should be displayed

`frame_border_width` [optional] (integer) - the width of the border between frames

`transition_time` [optional] (float) - the length, in seconds, of the CSS transistion animation from solid colour to loaded image

### Gallery structure

Just like in real life, photos are placed in frames that are hung in galleries:

```
<div id="gallery">
  <div class="frame" data-width="640" data-height="427" data-hex_colour="#808080">
    <img class="photo" src="/examples/images/1.jpg">
  </div>
  <div class="frame" data-width="640" data-height="853" data-hex_colour="#C2B280">
    <img class="photo" src="/examples/images/2.jpg">
  </div>
  ...
  <div class="frame" data-width="640" data-height="960" data-hex_colour="#FFC1CC">
    <img class="photo" src="/examples/images/10.jpg">
  </div>
</div>
```

### Dataset properties

`data-width` (integer) - the width of the photo, if supplied (along with `data-height`) this value will be used to arrange the layout rather than waiting for the image to load

`data-height` (integer) - the height of the photo, if supplied (along with `data-width`) this value will be used to arrange the layout rather than waiting for the image to load

`data-hex_colour` (string) - when the layout is arranged before waiting for the image to load, this will be the background colour of the frame

---
_Source: https://npm.io/package/stonework · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._