-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from mikehoffms/user/mikehoffms/1div-readme
Clarify Readme for 1DIV
- Loading branch information
Showing
1 changed file
with
15 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |