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

    20

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    217 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar