build

components/nav.html

@@ -1,11 +1,21 @@
-{{#each pages as page}}
-<li><a href="#{{page.id}}">{{page.title}}</a></li>
-{{/each}}
+
+    <div class="navbar">
+    <div class="navbar-section">
+            {{#each pages as page}}
+                <a class="btn btn-link" href="#{{page.id}}">{{page.title}}</a>
+            {{/each}}
+    </div>
+    <div class="navbar-section">
+    </div>
+    </div>
 
 <script>
+    import 'spectre.css/dist/spectre.min.css';
     export default {
         data() {
-            return {};
+            return {
+                searchResult: ''
+            };
         }
     }
 </script>

package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "can-define": "^1.5.4",
+    "spectre.css": "^0.5.0",
     "steal": "^1.6.2",
     "svelte": "^1.49.1"
   },
@@ -19,7 +20,8 @@
       "html": "steal-svelte-plugin"
     },
     "plugins": [
-      "steal-svelte-plugin"
+      "steal-svelte-plugin",
+      "steal-css"
     ],
     "bundle": [
       "steal-svelte/pages/circle.html",
@@ -29,6 +31,7 @@
     ]
   },
   "devDependencies": {
+    "steal-css": "^1.3.1",
     "steal-tools": "^1.10.0"
   }
 }

pages/home.html

@@ -2,9 +2,12 @@ <h1>Home</h1>
 <p>This page demonstrates a basic example of progressively loaded svelte app.</p>
 <h3>search for some data!</h3>
 
-<input bind:value="viewModel.search" />
+<div class="input-group input-inline">
+        <input bind:value="viewModel.search" class="form-input" type="text" placeholder="search" data-cip-id="cIPJQ342845639">
+        <button class="btn btn-primary input-group-btn">Search</button>
+     </div>
 
-<table>
+<table class="table">
     {{#each viewModel.data as row, index}}
         <tr on:click="select(row, viewModel)"><td>{{row.code}}</td><td>{{row.name}}</td></tr>
     {{/each}}