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:
And then follow the steps below to display the specifications you want :)
Element spacing
In your component examples, use the following attribute:
This will display the element and all of it's children padding and margin.
Element dimensions
In your component examples, use the following attribute:
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.
This will place a pin to the outline of the element. Default is top
.