speccer v2.2.0

speccer

A script to show specifications on html elements in your styleguide

Speccer was created to make it easier to document components in a style guide.

$ npm i speccer

See demo here: https://codepen.io/phun-ky/pen/xaOrYX

Usage

Place these script and link tags in your web page:

<link rel="stylesheet" href="../path/to/speccer.css" />
<script src="../path/to/speccer.js"></script>

And then follow the steps below to display the specifications you want :)

Element spacing

In your component examples, use the following attribute:

<div data-speccer class="..."></div>

This will display the element and all of it's children padding and margin.

Element dimensions

In your component examples, use the following attribute:

<div data-speccer-measure="[height right|left] | [width top|bottom]" class="..."></div>

Where height and width comes with placement flags. Default for height is left, default for width is top.

Highlight the anatomy of an element

In your component examples, use the following attribute. Remember to use the data-anatomy-section as an attribute on a parent element to scope the marking.

<div data-anatomy-section>
  <div data-anatomy="outline [full] [left|right|top|bottom]" class="..."></div>
</div>

This will place a pin to the outline of the element. Default is top.