@phun-ky/speccer / grid

Variable: grid

const grid: {
  create: (
    targetElement: HTMLElement,
    options?: SpeccerOptionsInterface
  ) => Promise<void>;
  element: (
    targetElement: HTMLElement,
    options?: SpeccerOptionsInterface
  ) => Promise<void>;
};

Defined in: main.ts:72

This feature will highlight the grid spacing in a display: grid; element.

Type Declaration

create()

create: (targetElement: HTMLElement, options?: SpeccerOptionsInterface) =>
  (Promise<void> = gridCreate);

Creates a visual grid overlay for a given target element.

Parameters

targetElement

HTMLElement

The target element to create the grid overlay for.

options?

SpeccerOptionsInterface

Options to determine what to draw

Returns

Promise<void>

Example

const targetElement = document.getElementById('target');
if (targetElement) {
  await create(targetElement);
}

element()

element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface) =>
  (Promise<void> = gridElement);

Create a visual overlay to present the column gaps for a grid container

Adds a visual grid overlay to the target element if it has the appropriate data attribute and is a grid.

Parameters

targetElement

HTMLElement

The target element to add the grid overlay to.

options?

SpeccerOptionsInterface

Options.

Returns

Promise<void>

A promise that resolves once the overlay has been added.

Example

const targetElement = document.getElementById('target');

grid(targetElement);

Only rows

const targetElement = document.getElementById('target');
const options = {
  type: 'grid',
  grid: {
    toggle: 'rows'
  }
};

grid(targetElement, options);

Example

Use the following code, either for html or js:

<div data-speccer="grid [columns|rows]" class="…">…</div>

const targetElement = document.getElementById('target');
const options = {
  type: 'grid',
  grid: {
    toggle: 'both'
  }
};

grid(targetElement, options);