Tools for your design system - Part one

Alexander Vassbotn Røyne-Helgesen

Manager, Front-end Developer @ Bekk

https://github.com/phun-ky/speccer

https://github.com/phun-ky/responsive-documentation-examples

https://codepen.io/phun-ky/full/xaOrYX

Speccer

<!-- Template as a target -->

<div data-rde data-rde-viewports="375x667,360x740,768x1024" data-rde-style="h1{color: #FF9900;}">
  <button type="button">Primary</button>
</div>

<!-- Just a target -->

<div data-rde-target data-rde-template="#template" data-rde-vw="667" data-rde-style="h1{color: blue;}"></div>

<div id="template"><button type="button">Primary</button></div>