@phun-ky/responsive-documentation-examples v1.2.0

Responsive Documentation Examples

Responsive Documentation Examples (rde) enables you to fake and display your responsive components in real life media queries!

rde was created so I could display responsive examples of components in a style guide. It creates iframes with your component (html, css and javascript) that acts as natural viewports, thus making use of your media queries!

$ npm i @phun-ky/responsive-documentation-examples

See demo here for usage as init: https://codepen.io/phun-ky/pen/MWWWvLm See demo here for usage as module: https://codesandbox.io/s/responsive-documentation-example-module-1em76

Use programatically

With this approach, you can use it in your own JS code as a module.

First argument is the target where you want the iframe to be generated. Second is options.

import rde from '@phun-ky/responsive-design-example';

rde(document.getElementById('target'), {
  vw: 667,
  html: '<h1>FOO</h1>'
});

Options:

Usage as init (plug and play)

Place the script tag at the bottom of your page, right before the </body>-tag:

<script src="../path/to/@phun-ky/responsive-documentation-examples/rde-init.js"></script>

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

Use templates as a target

With this approach, the script will locate given template and produce responsive examples based on that template and insert them right after the template. The original template will be hidden:

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

The content of the [data-rde]-container is the html you want to display in the responsive example.

Allowed tags:

Use targets

With this approach, you decide where the responsive examples are added. The script will locate given target and produce responsive examples based on the given template and insert them in that target. The original template will be hidden:

<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>

The content of the #template-container is the html you want to display in the responsive example.

This approach is useful if you want to use a device decorator to mimic appearance of a device.

Allowed tags: