foldable-devices / device-configurator

Foldable Device Configurator

Foldable Device Configurator is a little Web Component which you can drop in your application to test the CSS Viewport Segments Polyfill located here

How to use the foldable configurator in your project?

$ npm install --save-dev foldable-device-configurator

You then need to import the ESM module into your project (which depends on how you import ES modules), here is an example :

    <script type='module' src="../node_modules/foldable-device-configurator/src/foldable-device-configurator.js"></script>

When imported, in your HTML file just add the following lines:

    <foldable-device-configurator></foldable-device-configurator>

Adapting your web application to foldable/dual screen devices

This web component will let you emulate various foldable configurations and will set the foldable polyfills accordingly. Currently there are two polyfills you can use to design or adapt web contents for foldable devices :

• A JavaScript API called Viewport Segments located here
• CSS Properties called Viewport Segments located here

Both are proposals from Microsoft. At this time the configurator will only set the viewportsegments media-queries.

⚠️ The two aforementioned APIs are early work in progress and are subject to change anytime.

Demo

• Go here

• You can also try a more advanced demo here

Working on the foldable configurator component

This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Vite. If you install new dependencies using npm like npm install --save my-dependency, then please run npm run build afterwards to generate the new modules in docs folder. Also, the docs folder should be committed. Make sure to update the package.json file accordingly.

To install app dependencies and but any further steps, run

$ npm install

Shoelace web components can be found here

$ npm run build

To test in the browser, run

$ npm run start

To build, run

$ npm run build

The build is then ready to publish to npm (inside the dist/ directory)

This demo is being developed by :