Adds title example to popup fixes typos, removes transition warning about looping

server/documents/modules/popup.html.eco

@@ -29,6 +29,7 @@ type        : 'UI Module'
       <h3 class="ui header">Popup</h3>
       <p>A standard popup</p>
       <i class="heart circular icon link" data-content="Hello, I am a pop-up."></i>
+      <i class="heart circular icon link" title="Hello, I am a pop-up."></i>
     </div>
 
     <div class="example">

server/documents/modules/transition.html.eco

@@ -304,7 +304,6 @@ type        : 'UI Module'
         .transition('bounce', '2000ms')
       ;
       </div>
-      <div class="ui warning message">There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically</div>
       <div class="code" data-demo="true" data-title="Ending looping">
       $('.kitten.image')
         .transition('remove looping')

server/files/javascript/popup.js

@@ -1,11 +1,11 @@
-semantic.accordion = {};
+semantic.popup = {};
 
 // ready event
-semantic.accordion.ready = function() {
+semantic.popup.ready = function() {
 
   // selector cache
   var
-    $popup = $('.main .ui[data-content], .main .ui[data-html], .main i[data-content], .main i[data-html]'),
+    $popup = $('.main .ui[data-content], .main .ui[data-html], .main i[title], .main i[data-content], .main i[data-html]'),
     // alias
     handler
   ;
@@ -22,5 +22,5 @@ semantic.accordion.ready = function() {
 
 // attach ready event
 $(document)
-  .ready(semantic.accordion.ready)
+  .ready(semantic.popup.ready)
 ;

server/partials/customize.html.eco

@@ -0,0 +1,21 @@
+<div class="ui right sidebar active">
+
+  <div class="ui header">Variables</div>
+  <div class="ui form">
+    <div class="field">
+      <label>Sidebar Width</label>
+      <input type="text" placeholder="Sidebar Width">
+    </div>
+  </div>
+
+  <div class="ui divider"></div>
+
+  <div class="ui fluid red dropdown right labeled icon button">
+    Download
+    <i class="dropdown icon"></i>
+      <div class="menu">
+      <a class="item">Compressed </a>
+      <a class="item">Uncompressed</a>
+    </div>
+  </div>
+</div>