Demo page UI and basic example

demo/base.scss

@@ -13,7 +13,9 @@ $heading-font-weight: 700;
 
 * {
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
 }
 
 *, *:before, *:after {
@@ -32,8 +34,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   line-height: 1.4;
-  color: #000000;
-  background-color: #FFFFFF;
+  color: white;
+  background-color: #2E2E30;
   overflow-x: hidden;
 }
 
@@ -47,6 +49,7 @@ label {
 
 p {
   margin-top: 0;
+  margin-bottom: 20px;
 }
 
 hr {
@@ -54,7 +57,9 @@ hr {
   margin: $global-guttering*1.25 0;
   border: 0;
   border-bottom: 1px solid #eaeaea;
-  height: 1px;
+  background: url(https://i.imgur.com/MoU1Mn4.png) repeat-y;
+  height: 5px;
+  background-size: cover;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -107,6 +112,18 @@ h6, .h6 {
   font-size: $global-font-size-h6;
 }
 
+ul li, ol li {
+  list-style-type: none;
+  line-height: 1.5;
+}
+
+blockquote {
+  background: #f5f3f1;
+  padding: 10px;
+  margin-bottom: 35px;
+  border-radius: 10px;
+}
+
 .container {
   display: block;
   margin: auto;

demo/demo.js

@@ -14,22 +14,6 @@ sholo.defineSteps([
       position: 'bottom',
     },
   },
-  {
-    element: '.btn__example',
-    popover: {
-      title: 'Adding Introductions',
-      description: 'You can use it to add popovers on top of the website',
-      position: 'left',
-    },
-  },
-  {
-    element: '.btn__light',
-    popover: {
-      title: 'Adding Introductions',
-      description: 'You can use it to add popovers on top of the website',
-      position: 'rig',
-    },
-  },
   {
     element: '.section__how',
     popover: {

demo/demo.scss

@@ -9,10 +9,20 @@ $dark-button-text: #ffffff !default;
 $light-button-bg: #f5f5f5 !default;
 $light-button-text: #2d2d2d !default;
 
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em;
+}
+
 .page-wrap {
-  padding-top: 1px;
-  width: $container-width;
-  margin: auto;
+  width: 500px;
+  margin: 50px auto;
+  background: white;
+  padding: 10px 30px;
+  border-radius: 5px;
+  color: #333333;
 }
 
 .btn {
@@ -21,27 +31,40 @@ $light-button-text: #2d2d2d !default;
   border-radius: 3px;
 
   &.btn__dark {
-    background: $dark-button-bg;
-    color: $dark-button-text;
-  }
-
-  &.btn__light {
-    background: $light-button-bg;
-    color: $light-button-text;
+    color: #FFFFFF;
+    background-color: #F44336;
+    padding: 0 18px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+    font-weight: 500;
+    width: 240px;
+    font-size: 17px;
+    margin: auto;
+    display: block;
   }
 }
 
 section {
-  margin-bottom: 35px;
+  margin-bottom: $global-guttering*1.25;
 }
 
 .section__header {
-  margin: 80px 0 50px;
+  margin: 10px 0 30px;
   text-align: center;
   display: block;
-  padding: 10px 10px 20px;
+  padding: 10px;
 
   h1 {
     font-size: $logo-font-size;
+
+    .emoji {
+      font-size: 45px;
+      top: -4px;
+      margin-right: 3px;
+      position: relative;
+    }
   }
 }

demo/emoji.js

@@ -0,0 +1,28 @@
+// Just for the sake of styling page
+/* eslint-disable */
+
+/**
+ * Determine if this browser supports emoji.
+ *
+ * Modified from https://gist.github.com/mwunsch/4710561
+ * and probobly originally github's javascript source
+ */
+function doesSupportEmoji() {
+  let context;
+  if (!document.createElement('canvas').getContext) return;
+  context = document.createElement('canvas').getContext('2d');
+  if ((typeof context.fillText) !== 'function') {
+    return;
+  }
+
+  let smile = String.fromCharCode(55357) + String.fromCharCode(56835);
+
+  context.textBaseline = "top";
+  context.font = "32px Arial";
+  context.fillText(smile, 0, 0);
+  return context.getImageData(16, 16, 1, 1).data[0] !== 0;
+}
+
+if (!doesSupportEmoji()) {
+  twemoji.parse(document.body);
+}

index.html

@@ -11,21 +11,32 @@
 <body>
 <div class="page-wrap">
   <section class="section__header" data-sholo="Hey welcome to presenter!">
-    <h1>Sholo</h1>
-    <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in
-      spotlight</p>
-    <a href="javascript:void(0)" class="btn btn__example btn__dark">Show an Example</a>
-    <a href="javascript:void(0)" class="btn btn__light">Learn More</a>
+    <h1><span class="emoji">👨‍🔧️</span> Driver</h1>
+    <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page</p>
+    <a href="javascript:void(0)" class="btn btn__example btn__dark">Quick Example</a>
   </section>
+
+  <blockquote>
+    <p>A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page.</p>
+    <p class="zero-bottom">Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc.</p>
+  </blockquote>
+
   <section class="section__purpose">
-    <h1>Whats does it do?</h1>
-    <p>Let's you bring any component on the page into the spotlight.</p>
-    <p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can
-      use it to make powerful introduction for different features of your application or for example if you want to
-      highlight some component that needs user attention.</p>
+    <h3>Features</h3>
+    <ul>
+      <li>Highlight any item on page</li>
+      <li>Block user interactions</li>
+      <li>Create feature introductions</li>
+      <li>User Friendly – Controllable by keys</li>
+      <li>Free for personal and commercial use</li>
+      <li>Lightweight – Only ~4kb when gzipped</li>
+      <li>Supports all major browsers</li>
+      <li></li>
+    </ul>
   </section>
+  <hr>
   <section class="section__how">
-    <h1>How does it do that?</h1>
+    <h3>How does it do that?</h3>
     <p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some
       element</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
@@ -33,21 +44,21 @@
       reprehenderit tempora!</p>
   </section>
   <section class="section__examples">
-    <h1>Can you show some Examples?</h1>
+    <h3>Can you show some Examples?</h3>
     <p>Here are some of the examples</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
       ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
       reprehenderit tempora!</p>
   </section>
   <section class="section__learn">
-    <h1>I want to learn more</h1>
+    <h3>I want to learn more</h3>
     <p>Here are some of the examples</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
       ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
       reprehenderit tempora!</p>
   </section>
   <section class="section__contributing">
-    <h1>Contributing</h1>
+    <h3>Contributing</h3>
     <p>Here are some of the examples</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
       ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
@@ -55,7 +66,10 @@
   </section>
 </div>
 
+<script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
+
 <script src="./dist/sholo.js"></script>
 <script src="./dist/demo.js"></script>
+<script src="./dist/emoji.js"></script>
 </body>
 </html>

src/sholo.scss

@@ -2,6 +2,7 @@ div#sholo-popover-item {
   display: none;
   position: absolute;
   background: white;
+  color: #2d2d2d;
   margin: 0;
   padding: 15px;
   border-radius: 5px;
@@ -87,18 +88,21 @@ div#sholo-popover-item {
   }
 
   .sholo-popover-title {
-    font-size: 19px;
+    font: 19px/normal sans-serif;
     margin: 0 0 5px;
     font-weight: bold;
     display: block;
     position: relative;
+    line-height: 1.5;
+    zoom: 1;
   }
 
   .sholo-popover-description {
     margin-bottom: 0;
-    font-size: 14px;
+    font: 14px/normal sans-serif;
     line-height: 1.5;
     color: #2d2d2d;
     font-weight: normal;
+    zoom: 1;
   }
 }

webpack.config.dev.js

@@ -50,6 +50,7 @@ module.exports = {
     }),
     new CopyWebpackPlugin([
       './demo/demo.js',
+      './demo/emoji.js',
     ]),
   ],
   stats: {