SPECCER

Appearance

Getting Started ​

See it in action online ​

You can see it in action at CodePen.

Installation ​

You do not have to install SPECCER to use it, you can use it via UNPKG or put it directly in your own files for more control. See the example under script-module.html or usage with script-tag.

TIP

SPECCER is both an ESM package and a UMD package. It can be used with import, required and directly in a browser.

Prerequisites for package install ​

  • Node.js version 22.9.0 or higher
  • npm version 11.0.0 or higher

To use it as a dependency, install it with:

shell
npm i --save @phun-ky/speccer
shell
yarn add @phun-ky/speccer

Quick Usage ​

WARNING

This approach requires the usage of the data-speccer="*" attributes in your generated HTML. If you want more control, follow the approach here.

Mark the elements in the html that you want to use SPECCER width, like:

TIP

The properties in brackets ( [] ) means that it is optional!

html
<div data-speccer="pin-area">
  <div
    data-speccer="pin [bracket [curly] |enclose] [left|right|top|bottom]"
    class="…"
  ></div>
</div>
html
<div data-speccer="spacing [padding|margin] [bound]" class="…"></div>
html
<div
  data-speccer="measure [height left|right] | [width top|bottom]"
  class="…"
></div>
html
<p data-speccer="typography syntax right" class="…">Some text</p>
html
<div data-speccer="mark" …>…</div>
html
<div data-speccer="grid [rows|columns]" …>…</div>
html
<div
  data-speccer="a11y [shortcuts|tabstops|landmark|headings|autocomplete]"
  class="…"
>
  …
</div>

Script ​

If the elements are in the DOM when the scrip tag loads, you're good to go. If you have used data-manual, we have a global variable available to initiate SPECCER:

index.html
html
<script>
  // exposed by the UMD build when using data-manual
  window.speccer();
</script>

Import ​

If you import it, you are in full control on when to call speccer:

main.ts
typescript
import '@phun-ky/speccer/dist/speccer.min.css';
import speccer from '@phun-ky/speccer';

// do stuff
speccer();

SVG ​

If any SVG options are used, you need to add the following svg into your document:

html
<svg
  class="ph-speccer"
  viewBox="0 0"
  id="ph-speccer-svg"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    class="ph-speccer path original"
    id="ph-speccer-path"
    fill="none"
    stroke-width="1"
    stroke="currentColor"
  />
</svg>