Frameport enables you to fake and display your responsive components in real life media queries!

• @phun-ky/frameport
  • About
  • API
  • Demo
  • Options
  • Usage
    • Typescript
    • ESM
    • Script
  • Advanced usage
    • Lazy
  • Features
  • Via DOM
    • Use templates as a target
    • Use targets with different template
      • Allowed tags
  • Contributing
  • Sponsor me

Frameport was created so I could display frameports 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! It is a zero dependency package!

npm i -S @phun-ky/frameport

Go here to read the full API documentation.

Click here for a demo on codepen.io

Types can be found in @phun-ky/frameport/dist/frameport.d.ts.

Either import and run the required functions:

import frameport from '@phun-ky/frameport';

// do stuff
frameport(document.getElementById('target'), {
  width: 667,
  html: '<h1>FOO</h1>'
});

Or place these script in your web page:

<script src="../path/to/frameport.js"></script>

And then follow the steps below that suites your needs :)

If you want to control frameport a bit more, you have some options. Apply one of these attributes to the script element for different types of initialization:

<script src="../frameport.js" data-<manual|instant|dom|lazy></script>

If no attribute is applied, it will default to data-dom, as in, it will initialize when DOMContentLoaded is fired.

If you're importing frameport instead of with a script tag, you can use the following approach to apply lazy loading:

import frameport from '@phun-ky/frameport';

export const lazy = (): void => {
  const frameportObserverTarget = new IntersectionObserver((els, observer) => {
    els.forEach((el: IntersectionObserverEntry) => {
      if (el.intersectionRatio > 0) {
        const {
          dataset: {
            frameportTemplate: templateSelector,
            frameportVh: height,
            frameportVw: width,
            frameportCss: css,
            frameportStyle: style,
            frameportCode: code,
            frameportJs: javascript,
            frameportClass: className,
            frameportHeaders: headers,
            frameportViewports: viewports,
          },
        } = el.target as HTMLElement;

        let html = el.target.innerHTML;
        let templateElementToUse = el.target as HTMLElement;

        if (templateSelector) {
          const templateElement = document.querySelector(templateSelector);

          if (templateElement) {
            html = templateElement.innerHTML;
            templateElementToUse = templateElement as HTMLElement;
          }
        }

        const options = {
          templateSelector,
          templateElement: templateElementToUse,
          height,
          width,
          html,
          css,
          style,
          code,
          javascript,
          className,
          headers: getHeaders(headers),
          viewports,
        };
        dom(el.target as HTMLElement, options);
        observer.unobserve(el.target);
      }
    });
  });

  document.querySelectorAll('[data-frameport]').forEach((el) => {
    frameportObserverTarget.observe(el);
  });
};

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

<script src="../path/to/@phun-ky/frameport/dist/frameport.js"></script>

Or with a CDN:

<script src="https://unpkg.com/@phun-ky/frameport/dist/frameport.js"></script>

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

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

<div
  data-frameport
  data-frameport-css="/css/ph.css"
  data-frameport-style="body{background-color: #84a295 !important;}"
  data-frameport-target
  data-frameport-template="#template"
  data-frameport-vw="667"
  data-frameport-vh="375"
></div>
<div id="template">
  <main class="ph" style="height: 100vh">
    <button class="ph button" type="button">Primary</button>
  </main>
</div>

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

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

<div
  data-frameport
  data-frameport-css="/css/ph.css"
  data-frameport-style="body{background-color: #84a295 !important;}"
  data-frameport-viewports="375x667,360x740,768x1024"
>
  <main class="ph" style="height: 100vh">
    <div class="ph app">
      <p class="ph lead">Look mah, I'm in an iframe</p>
      <button class="ph button" type="button">Primary</button>
    </div>
  </main>
</div>

The above example code will generate 3 iframes with given viewports.

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

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

If you want to contribute, please read the CONTRIBUTING.md and CODE_OF_CONDUCT.md

I'm an Open Source evangelist, creating stuff that does not exist yet to help get rid of secondary activities and to enhance systems already in place, be it documentation or web sites.

The sponsorship is an unique opportunity to alleviate more hours for me to maintain my projects, create new ones and contribute to the large community we're all part of :)

Support me with GitHub Sponsors.