More examples and docs

demo/styles/demo.scss

 @import "./base";
 @import "../../src/sholo";
 
-$container-width: 500px !default;
-$logo-font-size: 55px !default;
-$button-font-size: 13px !default;
-$dark-button-bg: #2d2d2d !default;
-$dark-button-text: #ffffff !default;
-$light-button-bg: #f5f5f5 !default;
-$light-button-text: #2d2d2d !default;
-
 img.emoji {
   height: 1em;
   width: 1em;
@@ -66,7 +58,7 @@ section {
   padding: 10px;
 
   h1 {
-    font-size: $logo-font-size;
+    font-size: 55px;
 
     .emoji {
       font-size: 45px;

index.html

@@ -277,11 +277,37 @@ const lastActiveElement = driver.getLastHighlightedElement();
 activeElement.getScreenCoordinates(); // Gets screen co-ordinates of the active element
 activeElement.hidePopover();  // Hide the popover
 activeElement.showPopover();  // Show the popover
+
+activeElement.getNode();  // Gets the DOM Element behind this element
 </code></pre>
     </div>
+    <p class="top-20">You can use a variety of options to achieve whatever you may want. I have some plans on improving it further, make sure to keep an eye on the <a href="https://github.com/kamranahmedse/driver.js" target="_blank">github page</a></p>
   </section>
+  <hr class="hr__fancy">
+  <div class="section__example">
+    <h4>Contributing</h4>
+    <p>You can find the contribution instructions on the <a href="https://github.com/kamranahmedse/driver.js" target="_blank">github page</a>. Feel free to submit an issue, create a pull request or spread the word</p>
+  </div>
+  <hr class="hr__fancy">
+  <div class="section__example">
+    <p>A product by <a href="http://twitter.com/kamranahmedse" target="_blank">Kamran</a> produced out of boredom and frustration in cold Berlin after he gave up on trying to find a perfect solution to integrate journey introduction and overlays.</p>
+    <a href="https://twitter.com/kamranahmedse?ref_src=twsrc%5Etfw"
+       class="twitter-follow-button mr-3"
+       data-show-screen-name="false"
+       data-size="large"
+       target="_blank"
+       data-show-count="true">Follow @kamranahmedse</a>
+
+    <a class="github-button" href="https://github.com/kamranahmedse"
+       data-size="large"
+       target="_blank"
+       data-show-count="true"
+       aria-label="Follow @kamranahmedse on GitHub">Follow</a>
+  </div>
 </div>
 
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+<script async defer src="//buttons.github.io/buttons.js"></script>
 <script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 

src/core/element.js

@@ -173,6 +173,14 @@ export default class Element {
     }
   }
 
+  /**
+   * Gets the DOM Element behind this element
+   * @returns {Node|HTMLElement|*}
+   */
+  getNode() {
+    return this.node;
+  }
+
   hidePopover() {
     if (!this.popover) {
       return;