xiuqijix / foldable-device-configurator

Foldable Device Configurator

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

This demo is being developed by :

Demo

Go to https://darktears.github.io/foldable-device-configurator/demo/index.html (source)

See in action :

Foldable Device Configurator :

Web Based Emulator :

On an actual device (Asus ZenBook Pro Duo) :

Browser support

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 Window Segments located here
• CSS Properties called Spanning located here

Both are proposals from Microsoft.

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

Development

This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Snowpack. If you install new dependencies using npm like npm install --save @material/mwc-button, then please run npx snowpack afterwards to generate the new modules in web_modules folder. Also, the web_modules folder should be committed.

To install app dependencies and but any further steps, run

$ npm install

ESM compatible modules can be found using pika.dev. Material design web components can be found by searching for @material/mwc-. You can try out the demo page here: Material Web Components demo

Then run

$ npx snowpack --optimize

To test in the browser, run

$ npm run start

To build, run

$ npm run build