ProtoFluid

Overview #

ProtoFluid delivers an in-document responsive design testing app that manages flexible <iframe> viewports, pop-up windows and more.

Browser Support #

The ProtoFluid app is targeted at web developers and takes advantage of modern web browser features.

It assumes an up-to-date web browser. The most recent versions of Chrome (Blink), Firefox (Gecko) and Safari (WebKit) are supported.

Hopefully Servo as well, one day :)

Page rendering #

ProtoFluid does not simulate mobile devices.

Each frame/pop-up provides an accurate viewport for the purpose of testing.

Try ProtoFluid in different browsers to maximise your responsive testing coverage.

ProtoFluid does not currently process the viewport meta tag when using an <iframe>.

Refresh #

ProtoFluid offers two refresh methods,

  1. Hard refresh via cache busting.
  2. CSS refresh. Hot-refreshes external CSS.

Scroll to selector #

This can be useful for finding elements across one or multiple viewports.

It can be used to iterate through content. Paragraph by paragraph, for example.

footer p

Scrollbars #

Inset scrollbars that occupy viewport space can affect content layout.

ProtoFluid offers scrollbar overrides to handle this.

Viewport zoom #

Zoom in for increased detail.

It can be hard to test large screen viewports on devices like laptops.

Set the viewport to the large size you wish to test and scale it down with the zoom controls.

The ProtoFluid app #

Installation#

  1. Add the /ProtoFluid folder and contents to your project.
  2. Import the ProtoFluidButton.js script.
  3. Add a <protofluid-button> element.

Like this one 👈

  1. Load up your project.
  2. Click the button to initialise ProtoFluid.

ProtoFluid.js does not support being loaded as a module.

Robustness #

The app is designed to operate in potentially hostile environments.

  • Everything is contained in an IIFE.
  • CSS is specific to the protofluid web components.
  • The design leans heavily on progressive enhancement.

Everything required to run the app is contained within the script.

No remote resources are fetched.

App initialisation #

Inclusion as a script will initialise automatically, but the user interface is not automatically shown as it might be confusing if not expecting it.

Show the app #

The app is initially hidden when included as a <script>.

The ProtoFluid button is the recommended method of loading/showing ProtoFluid.

However, you can included the script directly and run protofluid.show() in the dev console.

document.querySelector('.protofluid-show').addEventListener('click', () => protofluid.show());

Adding frame definitions #

Coming soon!

You will be able to edit the app frame definitions via config.json

Viewport meta testing #

The app will modify the viewport meta tag to achieve your chosen viewport width.

This enables testing multiple viewports on a single device. You could test the entire range of iPhone sizes on one iPhone.

The ProtoFluid button #

ProtoFluid can be loaded on-demand via the <protofluid-button> component.

The component's button loads and then shows the ProtoFluid app when clicked.

The ProtoFluid button inherits your project's <button> styles.

Installation

Include the script and markup:

<protofluid-button>Custom text</protofluid-button>

The ‘hidden’ attribute ensures that the button is not shown until the ProtoFluidButton.js script enables it.

ProtoFluid.js is sourced from the same directory as ProtoFluidButton.js

Custom button text

You can supply the button text:

<protofluid-button>Custom text</protofluid-button>

Button text will default to ‘ProtoFluid’ if none is provided.

Theme

If a custom theme color is not supplied, ProtoFluid will use the button background.

Custom CSS #

Coming soon!

ProtoFluid will support CSS theming.

Keyboard Shortcuts #

Coming soon!

Content security policy #

Frames #

If you use a CSP it can be configured to allow ProtoFluid iframes.

This means editing the frame-src directive.

'self' will allow the app since it operates on the same origin.

frame-src 'self'

frame-ancestors 'none' will prevent the app loading an internal frame.

Style tags #

The app injects <style> tags as part of its operation. A strict CSP can block this.

Exemption hash-sources can be generated to allow specific stylesheets.

The generated hashes can then be used in the style-src or style-src-elem directive.

Note: These hashes target the latest version of Protofluid.

Trusted Types #

ProtoFluid writes new content to the page.

Strict use of Trusted Types will disallow this.

You can add a Content Security Policy exception for ProtoFluid.

<meta
	http-equiv='Content-Security-Policy'
	content="require-trusted-types-for 'script'; trusted-types protofluid;"
>

X-Frame-Options #


This feature is obsolete.

Use Content Security Policy instead.

App frame creation will fail if X-Frame-Options is set to DENY. The app qualifies as SAMEORIGIN.

The app will not be able to load your document if X-Frame-Options is set to DENY or SAMEORIGIN.

Script-based iframe breakout

If you are running code that breaks out of an iframe this will prevent ProtoFluid from creating a framed viewport.

You can still use the window and viewport meta testing methods.