Add examples.

Author: antonmedv

_layouts/docs.liquid

@@ -9,6 +9,7 @@ title: page.title
     <a href="/docs/event-handling" {% if page.url contains "/docs/event-handling" %}class="-active"{% endif %}>Event handling</a>
     <a href="/docs/components" {% if page.url contains "/docs/components" %}class="-active"{% endif %}>Components</a>
     <a href="/docs/directives" {% if page.url contains "/docs/directives" %}class="-active"{% endif %}>Directives</a>
+    <a href="/docs/examples" {% if page.url contains "/docs/examples" %}class="-active"{% endif %}>Examples</a>
     <a href="/docs/api" {% if page.url contains "/docs/api" %}class="-active"{% endif %}>API Reference</a>
 </div>
 <div class="content docs">

dist/bundle.css

@@ -78,5 +78,5 @@ That's it!
 
 `:show`, `:fadeIn`, `:onclick` and other directives can be found in [monkberry-directives](https://github.com/monkberry/directives).
 
-[Next →](/docs/api)
+[Next →](/docs/examples)
 {% endraw %} 

docs/directives.md

@@ -0,0 +1,31 @@
+---
+layout: docs
+permalink: /docs/examples
+title: Examples
+---
+{% raw %} 
+# Examples
+
+You can play this whose examples on jsfiddle. 
+
+## Hello world
+
+<div class="example">
+    <iframe width="100%" height="300" src="//jsfiddle.net/medv/z8pzsdyv/embedded/result,js,html/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+</div>
+<a class="example-link" href="//jsfiddle.net/medv/z8pzsdyv/">Play on JSFiddle</a>
+
+## Todos
+
+<div class="example">
+    <iframe width="100%" height="300" src="//jsfiddle.net/medv/kq950d9L/embedded/result,js,html/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+</div>
+<a class="example-link" href="//jsfiddle.net/medv/kq950d9L/">Play on JSFiddle</a>
+
+## TodoMVC
+
+Here is example of todo app with Monkberry and Redux: [monkberry/todomvc](https://github.com/monkberry/todomvc).  
+It supports hot module replacement and shows use of source maps.
+
+[Next →](/docs/api)
+{% endraw %} 

docs/examples.md

@@ -41,6 +41,7 @@ h1 {
 
 h2 {
   font-size: 28px;
+  margin-top: 50px;
   margin-bottom: 30px;
 }
 
@@ -104,6 +105,19 @@ code {
   clear: both;
 }
 
+.example {
+  @include mobile {
+    display: none;
+  }
+}
+
+.example-link {
+  display: none;
+  @include mobile {
+    display: block;
+  }
+}
+
 footer {
   @extend .content;
   display: flex;