Skip to content

Commit

Permalink
Merge pull request #37 from mikehoffms/user/mikehoffms/1div-readme
Browse files Browse the repository at this point in the history
Clarify Readme for 1DIV
  • Loading branch information
captainbrosset authored May 22, 2024
2 parents 1b2519a + b6f5184 commit 1a5c5b3
Showing 1 changed file with 15 additions and 10 deletions.
25 changes: 15 additions & 10 deletions 1DIV/README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,28 @@
# 1DIV - A Window Controls Overlay demo
# 1DIV - Window Controls Overlay demo

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/1DIV/dist/)** ⬅️

**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.
**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).


## Requirements

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:
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.

* Use a 93+ Chromium-based browser.
* Enable the Window Controls Overlay feature in about:flags (`Desktop PWA Window Controls Overlay`).
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:
* Browsers that are based on the Chromium engine, such as Microsoft Edge.
* Firefox, by enabling the `layout.css.constructable-stylesheets.enabled` flag.

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.

## Building locally

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.
To run this demo app as-is, you don't need to build it.

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).

To build the app locally:
To build this demo app locally, at a command prompt such as Windows Terminal, run the following commands in the present directory:

* `npm install`,
* and then `npm run build`.
```
npm install
npm run build
```

0 comments on commit 1a5c5b3

Please sign in to comment.