summaryrefslogtreecommitdiffstats
path: root/demo/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'demo/README.md')
-rw-r--r--demo/README.md35
1 files changed, 35 insertions, 0 deletions
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..6a478d8
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,35 @@
+# Local DEMO
+
+### How to compile
+Go to <b>root</b> folder (sdc-ui) and run: `npm run build`
+This will compile all scss files and will copy generated style.css and assets folder to gen folder inside demo project.
+
+### How to run
+Go to <b>demo</b> and run: `npm start`
+This will open the default browser at port 2900.
+
+### How to build component HTML for DEMO
+<ul>
+ <li>Create new HTML file for the component and put it in components folder</li>
+ <li>In the top of the HTML add <div class='component'>Name of component</div></li>
+ <li>Inside the HTML for each type of component add header <h3>sub component name</h3></li>
+ <li>
+ In order to show the HTML of the component to the user, add <b>data-code</b> attribute to the outerHTML of the component.
+ This component outerHTML will be copied and will be shown highlighted below the component.
+ <br>You can also use <b>data-code-ref</b> and <b>data-code-id</b> where data-code-ref is a reference to the
+ component data-code-id, the data-code-ref will be replaced by highlighted outerHTML of the component.
+ </li>
+</ul>
+For more info see example in <a href='components/tiles'>tiles.html</a> file
+
+### How add the new component to router for DEMO
+In index.html file (under id main-navigation) add new <li> with id equal to HTML file you created above
+<br><u>Example:</u>
+<div id='main-navigation'>
+ <div class='title'>Components</div>
+ <ul>
+ <li id='colors'>Colors</li>
+ <li id='button'>Buttons</li>
+ <li id='tiles'>Tiles</li>
+ </ul>
+</div>