https://github.com/bigcommerce/themes-lib-squid

https://github.com/bigcommerce/themes-lib-squid

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bigcommerce/themes-lib-squid
• Owner: bigcommerce
• License: mit
• Created: 2021-06-03T13:00:46.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T08:59:01.000Z (over 1 year ago)
• Last Synced: 2023-03-12T06:24:57.891Z (over 1 year ago)
• Language: JavaScript
• Size: 290 KB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Squid, the friendly squared-grid layout engine!

Squid arranges elements into a grid, but makes sure that the bottom is flush.

## Example

```

// Initialize grid

const squid = new Squid($('.grid'), {

  columns: 2,

  gutter: 10,

});

// Add items

squid.add(...$('.grid-item'));

// Remove items

squid.remove($('.grid-item').get(0));

// Render grid

squid.layout();

```

## Options

### `columns`

The number of columns in the grid.

### `gutter`

The size of the gutter, in pixels. If the number is between 0 and 1, it will act

as a percentage of the grid's width.

### `getSize` (optional)

A function to calculate the natural size of your elements. Defaults to the

natural size of the first img element. Expects an object with `width` and

`height` properties.

### `getGravity` (optional)

A function to calculate the "gravity" of your elements. This affects the

position items are inserted into a column. Items with a lower gravity are placed

above items with a higher gravity. Expects a number between `-1` and `1`.

### `getResistance` (optional)

A function to calculate the "resistance" of your elements. Elements with a

higher resistance will be compressed less when trying to resize a column.

Expects a number between `0` and `1`.

Currently, the layout engine only takes into account a resistance of `1`, which

will lock that element's height. All other elements will be compressed equally.

### `getVisibility` (optional)

A function to calculate the visibility of your elements. Expects either `true`

or `false`. If this function returns `false` for an item, that item will not be

layed-out.

### `firstRenderClassname` (optional)

The class name to add to the grid after it is rendered for the first time.

### `resizingClassname` (optional)

Class name to add to the grid while it is being resized.

## Methods

### `update(options, layout = true)`

Change the grid's options, and optionally re-render it. Any options the

constructor can take can be set here.

### `add(...items)`

Add items to the grid.

Since jQuery wraps DOM elements, we can't compare them directly:

`$('#item-1') !== $('#item-1')`. It's recommended to add bare DOM elements

instead.

### `remove(...items)`

Remove items from the grid.

### `removeAll()`

Remove all items from the grid.

### `layout()`

Re-render the grid.