Spacing

This feature allows you to display the spacing properties of an element or the element and all of its children.

• Usage
  • Via <script>-tag
  • Programmatically
• Bound Spacing
  • Via <script>-tag
  • Programmatically

INFO

For more technical documentation, see the relevant documentation under the API-section.

Important

For now, we avoid displaying spacing for these elements:

/**
 * Array of HTML tags to avoid when processing.
 *
 * @type {string[]}
 * @example
 * ```ts
 * // Access the array of tags to avoid
 * const tagsToAvoid = SPECCER_TAGS_TO_AVOID;
 * console.log(tagsToAvoid); // Example output: ['TR', 'TH', 'TD', ...]
 * ```
 */
export const SPECCER_TAGS_TO_AVOID: string[] = [
  'TR',
  'TH',
  'TD',
  'TBODY',
  'THEAD',
  'TFOOT'
];

Usage

Via <script>-tag

Use the following attribute to display element padding and margin:

<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js"></script>
<div data-speccer="spacing [padding|margin] [bound]" class="…"></div>

Programmatically

import { spacing } from '@phun-ky/speccer';

const { create } = spacing;
const element = document.querySelector('.my-element');
const options = {
  slug: 'spacingTest',
  type: 'spacing',
  spacing: {
    both: [false | true],
    padding: [false | true],
    margin: [false | true],
    bound: [false | true]
  }
};
await create(element, options);

This will display the element and all of it's children padding and margin, unless you specify padding and margin.

Feature options

For more control over the feature options, you can view the available settings in the reference section.

Bound Spacing

This option binds the speccer elements to the bounds of the element container. Suitable for more dense layouts.

Via <script>-tag

index.html

<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js"></script>
<div data-speccer="spacing bound" class="…"></div>

Programmatically

main.ts

import { spacing } from '@phun-ky/speccer';

const { create } = spacing;
const element = document.querySelector('.my-element');
const options = {
  slug: 'spacingTest',
  type: 'spacing',
  spacing: {
    bound: true
  }
};
await create(element, options);