[DEMO] Start reworking the demo page design (#896)

* [FEAT] rework demo page - tailwind.css - purged, minified css - render when fit margin changes - add zoom settings - prevent page zooming while zooming out of bpmn-container - fixed height for diagram container - document tailwind Co-authored-by: Thomas Bouffard <[email protected]>
process-analytics · Nov 30, 2020 · e5197ea · e5197ea
1 parent f5e3112
commit e5197ea
Show file tree

Hide file tree

Showing 13 changed files with 7,784 additions and 5,119 deletions.
diff --git a/docs/contributors/README.md b/docs/contributors/README.md
@@ -14,6 +14,7 @@ Here are some tips to help during development.
 - [testing](testing.md)
 - [how to support new BPMN elements](bpmn-support-how-to.md)
 - [how to submit your work](pull-request.md)
+- [demo page css](demo-page-css.md)
 - [mxgraph integration](mxgraph-integration.md)
 - [mxgraph version bump](mxgraph-version-bump.md)
 

diff --git a/docs/contributors/demo-page-css.md b/docs/contributors/demo-page-css.md
@@ -0,0 +1,12 @@
+## CSS for Demo
+The project demo page uses [tailwindcss](https://tailwindcss.com/docs).
+
+To process the CSS rules and get an output tailwind.css file, which is used in demo page:
+run: `npm run demo`
+
+sub job demo:css does the trick, it uses postcss
+feel free to preview config files:
+- [postcss.config.js](postcss.config.js)
+- [tailwind.config.js](tailwind.config.js)
+
+TODO: livereload