* added debug.js.

examples/alerts.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
   <!--[if lt IE 9]>
   <script src="../assets/js/html5shiv.js"></script>
   <script src="../assets/js/respond.js"></script>

examples/article.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/breadcrumb.html

@@ -10,6 +10,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/button-groups.html

@@ -5,6 +5,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <link href="../dist/css/zui.css" rel="stylesheet">

examples/buttons.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/cards.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/carousel.html

@@ -6,6 +6,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
 

examples/chosen.html

@@ -9,6 +9,7 @@
 
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
   <!--[if lt IE 9]>
   <script src="../assets/js/html5shiv.js"></script>

examples/code.html

@@ -14,6 +14,7 @@
   <script src="../assets/js/google-code-prettify/prettify.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>
@@ -50,4 +51,4 @@
   </article>
 
 </body>
-</html>
\ No newline at end of file
+</html>

examples/collapse.html

@@ -9,6 +9,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
 

examples/comment.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <script>

examples/dropdowns.html

@@ -8,6 +8,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <link href="../dist/css/zui.css" rel="stylesheet">

examples/forms.html

@@ -12,6 +12,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/grid.html

@@ -13,6 +13,7 @@
   <!-- Latest compiled and minified JavaScript -->
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/headers.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/input-groups.html

@@ -12,6 +12,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/kindeditor.html

@@ -7,6 +7,7 @@
     <script src="../plugins/kindeditor/kindeditor-all-min.js"></script>
     <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
     <script>

examples/labels.html

@@ -12,6 +12,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/lightbox.html

@@ -9,6 +9,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
   <script src="../src/js/modal.js"></script>
   <script src="../src/js/lightbox.js"></script>
   <script>

examples/list-group.html

@@ -12,6 +12,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/list.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/modals.html

@@ -9,6 +9,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
   <script src="../src/js/modal.js"></script>
 
   <link href="../assets/css/doc.css" rel="stylesheet">

examples/navbars.html

@@ -14,6 +14,7 @@
   <!-- Latest compiled and minified JavaScript -->
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/navs.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <script>

examples/pager.html

@@ -11,6 +11,7 @@
 
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <script src="../src/js/pager.js"></script>

examples/panels.html

@@ -14,6 +14,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/popovers.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <script src="../assets/js/google-code-prettify/prettify.js"></script>

examples/progress.html

@@ -9,6 +9,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/tables.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/tabs.html

@@ -9,6 +9,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
 

examples/textbox.html

@@ -12,6 +12,7 @@
   <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
 
 
   <!--[if lt IE 9]>

examples/tooltip.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
   <script src="../assets/js/google-code-prettify/prettify.js"></script>
   <script>
   $(function ()

examples/type.html

@@ -13,6 +13,7 @@
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
   <!--[if lt IE 9]>
   <script src="../assets/js/html5shiv.js"></script>
   <script src="../assets/js/respond.js"></script>

src/js/debug.js

+$(function()
+{
+    $('body').append('<style>#zuiDebug{display:none; position: fixed;left: 2%;top: 30%;}#zuiDebug .icon{width: 160px;height: 160px;padding: 20px;border-radius: 100px;background-color: #333;color: #fff;transition:all 0.4s;}#zuiDebug .icon.visible-xs{background-color: #39B3D7;}#zuiDebug .icon.visible-sm{background-color: #47A447;}#zuiDebug .icon.visible-md{background-color: #ED9C28;}#zuiDebug .icon.visible-lg{background-color: #D2322D;}#zuiDebug .icon:hover{opacity: 0.5;}#zuiDebug .icon > i{display: block;font-size: 60px;}#zuiDebug .icon small{display: inline-block;height: 24px;opacity: 0.7;font-size: 12px;background-color: rgba(0,0,0,0.5);border-radius:12px; line-height: 24px;margin-top: 10px;padding: 0 10px;}</style><div id="zuiDebug"><div class="icon text-center visible-xs"><i class="icon-mobile-phone"></i><strong>Phone</strong><div class="text-center"><small>XS <span class="screen-size"></span></small></div></div><div class="icon text-center visible-sm"><i class="icon-tablet"></i><strong>Tablet</strong><div class="text-center"><small>SM <span class="screen-size"></span></small></div></div><div class="icon text-center visible-md"><i class="icon-desktop"></i><strong>Desktop</strong><div class="text-center"><small>MD <span class="screen-size"></span></small></div></div><div class="icon text-center visible-lg"><i class="icon-desktop"></i><strong>Widescreen</strong><div class="text-center"><small>LG <span class="screen-size"></span></small></div></div></div>')
+    displayScreenSize();
+    $('#zuiDebug').fadeIn();
+    $(window).resize(displayScreenSize);
+    function displayScreenSize()
+    {
+        $('#zuiDebug .screen-size').text($(document).width() + ' x ' + $(document).height());
+    }
+});