Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/entroform/stack-up
🏗 A simple, yet powerful, layout library to help you neatly stack fixed width and variable height elements.
https://github.com/entroform/stack-up
Last synced: about 2 months ago
JSON representation
🏗 A simple, yet powerful, layout library to help you neatly stack fixed width and variable height elements.
- Host: GitHub
- URL: https://github.com/entroform/stack-up
- Owner: entroform
- License: mit
- Created: 2019-07-30T14:20:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:56:11.000Z (about 2 years ago)
- Last Synced: 2024-11-11T06:52:01.640Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 512 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🏗 stack-up
A simple, yet powerful, layout library to help you neatly stack fixed width and variable height elements.
## Install
Add **stack-up** to your project.
```
npm i @nekobird/stack-up
```## Usage
Import it into your project.
```typescript
import { StackUp } from '@nekobird/stack-up';
```## Example HTML and CSS setup
Basic HTML setup.
```html
...
...
...
```Some basic CSS setup.
```css
.grid__container {
position: relative
}.grid__item {
position: absolute;
}.grid__item img {
width: 100%;
}
```## Config
```typescript
const boundaryElement = document.getElementById('boundary');// StackUp takes in a config object.
const stackup = new StackUp({// Boundary defines the area in which StackUp will flow the elements into.
// If isFluid is set to true, StackUp will calculate the number of columns
// based on the width of this element.
// By default it is set to window.
boundary: boundaryElement;// StackUp will use this function to update container and item elements.
getContainerElement: () => document.getElementById('container'),
getItemElements: () => document.querySelectorAll('#container > .item'),// Fixed width StackUp will use to define the column and all items.
columnWidth: 320,// If isFluid is set to false, StackUp will use this to determine the number of columns.
numberOfColumns: 3;// Spacing between items and inside of container.
gutter: 20;// There are, currently, two options for layout: 'ordinal' and 'optimized'.
// ordinal: StackUp will stack the items in order of how it is in the DOM.
// optimized: StackUp will try to stack the items in such a way that the columns height will
// even out. This is the default option.
layout: 'optimized',// If this is set to true, StackUp will use the boundary width to determine the number of columns.
// StackUp will automatically restack items when the window is resized.
// You can adjust the resize debounce time below.
isFluid: false,
// This debounce wait time is in ms.
debounceResizeWait: 250,// This works
moveInSequence: false,// This function takes in a StackUp object.
// This returns a Promise object.
beforeInitialize: stackup => Promise.resolve(),// beforeTransition
// scaleContainerInitial
// beforeMove
// moveItem
// afterMove
// scaleContainerFinal
// afterTransition// containerInstruction
// StackUpContainerScaleData
// currentWidth
// currentHeight
// maxWidth
// maxHeight
// width
// height
// requireScale// StackUpItem
// This is an array of
// item: HTMLElement;
// left: number;
// top: number;
// height: number;
// currentLeft: number;
// currentTop: number;
// requireMove: boolean;beforeTransition: (containerInstruction: StackUpContainerScaleData, items: StackUpItem[], stackup: StackUp) => Promise;
afterTransition: () => void;
scaleContainerInitial: (container: HTMLElement, data: StackUpContainerScaleData, stackup: StackUp) => Promise;
scaleContainerFinal: (container: HTMLElement, data: StackUpContainerScaleData, stackup: StackUp) => Promise;beforeMove: (items: StackUpItem[], stackup: StackUp) => Promise;
moveItem: (item: StackUpItem, stackup: StackUp) => Promise;
afterMove: (items: StackUpItem[], stackup: StackUp) => Promise;
});
```## Append
## Reset
## Restack