|
1 |
| -# 1DIV - A Window Controls Overlay demo |
| 1 | +# 1DIV - Window Controls Overlay demo |
2 | 2 |
|
3 | 3 | ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/1DIV/dist/)** ⬅️
|
4 | 4 |
|
5 |
| -**1DIV** is a demo web app where you can create CSS designs using just one HTML `div` element. Your designs are saved only locally in the browser's memory. You can create as many as you want. This demo app can be installed locally as a PWA. |
| 5 | +**1DIV** is a demo web app that enables you to create multiple CSS designs by using a single HTML `div` element. Your CSS designs are only saved locally, in the browser's memory. This demo app can be installed locally as a Progressive Web App (PWA). |
| 6 | + |
6 | 7 |
|
7 | 8 | ## Requirements
|
8 | 9 |
|
9 |
| -The main goal of this demo is to showcase the [Window Controls Overlay PWA feature](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay), so to make the most use of it, you will need the following things: |
| 10 | +The main goal of this demo is to showcase the Window Controls Overlay (WCO) PWA feature, which is described in [Display content in the title bar](https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay). To make the most use of this demo, view it in a browser that's based on the Chromium engine, such as Microsoft Edge. |
10 | 11 |
|
11 |
| -* Use a 93+ Chromium-based browser. |
12 |
| -* Enable the Window Controls Overlay feature in about:flags (`Desktop PWA Window Controls Overlay`). |
| 12 | +The demo app also demonstrates using [constructable stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets). Constructable stylesheets are supported in the following web browsers: |
| 13 | +* Browsers that are based on the Chromium engine, such as Microsoft Edge. |
| 14 | +* Firefox, by enabling the `layout.css.constructable-stylesheets.enabled` flag. |
13 | 15 |
|
14 |
| -The demo app also uses [constructable stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) which are only supported in Chromium-based browsers, and on Firefox if you enable the `layout.css.constructable-stylesheets.enabled` flag first. |
15 | 16 |
|
16 | 17 | ## Building locally
|
17 | 18 |
|
18 |
| -The app is not build automatically in CI. If you make a change to a file in `src` or update a dependency, you will need to build locally and commit the generated files. |
| 19 | +To run this demo app as-is, you don't need to build it. |
| 20 | + |
| 21 | +If you make a change to a file in the `src` directory of this demo app, or update a dependency, you must build the app locally, and then commit the generated files. This demo app is not built automatically using Continuous Integration (CI). |
19 | 22 |
|
20 |
| -To build the app locally: |
| 23 | +To build this demo app locally, at a command prompt such as Windows Terminal, run the following commands in the present directory: |
21 | 24 |
|
22 |
| -* `npm install`, |
23 |
| -* and then `npm run build`. |
| 25 | +``` |
| 26 | +npm install |
| 27 | +npm run build |
| 28 | +``` |
0 commit comments