Need private packages and team management tools?Check out npm Teams »

This package has been deprecated

Author message:

speccer is now scoped. please use @phun-ky/speccer instead

speccer

2.2.0 • Public • Published

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

Image of speccer

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

Image of speccer

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

Image of speccer

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

Image of speccer

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.

Install

npm i speccer

DownloadsWeekly Downloads

2

Version

2.2.0

License

MIT

Unpacked Size

217 kB

Total Files

23

Last publish

Collaborators

  • avatar