refactor menu code
authorThomas Park <thomas@thomaspark.me>
Fri, 29 Jun 2012 21:28:12 +0000 (17:28 -0400)
committerThomas Park <thomas@thomaspark.me>
Fri, 29 Jun 2012 21:28:12 +0000 (17:28 -0400)
15 files changed:
amelia/index.html
cerulean/index.html
cyborg/index.html
default/index.html
journal/index.html
js/bootswatch.js
js/snippets/main-menu.html [new file with mode: 0644]
js/snippets/preview-menu.html [new file with mode: 0644]
readable/index.html
simplex/index.html
slate/index.html
spacelab/index.html
spruce/index.html
superhero/index.html
united/index.html

index 893dcba..7abf6df 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 2956236..e0defbb 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 6481e7b..bad1ba5 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-        
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 8f2b4a3..066ca18 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -86,7 +86,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 6ae4a4d..a1ebc7f 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-        
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 70fb9fd..82faa2b 100644 (file)
@@ -1,56 +1,10 @@
-var menu = '<ul class="nav"> \
-              <li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li> \
-              <li><a id="swatch-link" href="/#gallery">Gallery</a></li> \
-                         <li class="dropdown"> \
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a> \
-                <ul class="dropdown-menu"> \
-                  <li><a href="/default">Default</a></li> \
-                  <li class="divider"></li> \
-                  <li><a href="/amelia">Amelia</a></li> \
-                  <li><a href="/cerulean">Cerulean</a></li> \
-                  <li><a href="/cyborg">Cyborg</a></li> \
-                  <li><a href="/journal">Journal</a></li> \
-                  <li><a href="/readable">Readable</a></li> \
-                  <li><a href="/simplex">Simplex</a></li> \
-                  <li><a href="/slate">Slate</a></li> \
-                  <li><a href="/spacelab">Spacelab</a></li> \
-                  <li><a href="/spruce">Spruce</a></li> \
-                  <li><a href="/superhero">Superhero</a></li> \
-                  <li><a href="/united">United</a></li> \
-                </ul> \
-              </li>';
-
-if(document.title !== 'Bootswatch: Free themes for Twitter Bootstrap') {
-       menu = menu + '<li class="divider-vertical"></li> \
-                                          <li class="dropdown"> \
-                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a> \
-                                        <ul class="dropdown-menu"> \
-                                          <li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li> \
-                                          <li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li> \
-                                          <li class="divider"></li> \
-                                          <li><a target="_blank" href="variables.less">variables.less</a></li> \
-                                          <li><a target="_blank" href="bootswatch.less">bootswatch.less</a></li> \
-                                        </ul> \
-                                      </li>';
-}
-
-menu = menu + '                        </ul> \
-                                               <ul class="nav pull-right"> \
-                                                       <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="Showcase of Bootstrap sites & apps" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'builtwithbootstrap\']);">Built With Bootstrap <i class="icon-share-alt icon-white"></i></a></li> \
-                                                       <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'wrapbootstrap\']);">WrapBootstrap <i class="icon-share-alt icon-white"></i></a></li> \
-                                               </ul>';
-
-                       $('.navbar .nav-collapse').first().append(menu);
-
-                       $('a[rel=tooltip]').tooltip({
-                               'placement': 'bottom'
-                       });
-
-var taglines = [];
-taglines.push('Free themes for <a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>');
-taglines.push('Add color to your <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> site without touching a color picker');
-taglines.push('Saving the web from default <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a>');
-
-var line = Math.floor((taglines.length) * Math.random());
-$('#tagline').html(taglines[line]);
-
+$('#main-menu').load('/js/snippets/main-menu.html', function(){
+       if($('body').hasClass('preview')){
+               $('#main-menu-left').append('<li class="dropdown" id="preview-menu"></li>');
+               $('#preview-menu').load('/js/snippets/preview-menu.html');
+       }
+
+       $('a[rel=tooltip]').tooltip({
+               'placement': 'bottom'
+       });
+});
\ No newline at end of file
diff --git a/js/snippets/main-menu.html b/js/snippets/main-menu.html
new file mode 100644 (file)
index 0000000..c1683ee
--- /dev/null
@@ -0,0 +1,26 @@
+<ul class="nav" id="main-menu-left">
+       <li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li>
+       <li><a id="swatch-link" href="/#gallery">Gallery</a></li>
+       <li class="dropdown">
+               <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
+               <ul class="dropdown-menu" id="swatch-menu">
+                       <li><a href="/default">Default</a></li>
+                       <li class="divider"></li>
+                       <li><a href="/amelia">Amelia</a></li>
+                       <li><a href="/cerulean">Cerulean</a></li>
+                       <li><a href="/cyborg">Cyborg</a></li>
+                       <li><a href="/journal">Journal</a></li>
+                       <li><a href="/readable">Readable</a></li>
+                       <li><a href="/simplex">Simplex</a></li>
+                       <li><a href="/slate">Slate</a></li>
+                       <li><a href="/spacelab">Spacelab</a></li>
+                       <li><a href="/spruce">Spruce</a></li>
+                       <li><a href="/superhero">Superhero</a></li>
+                       <li><a href="/united">United</a></li>
+               </ul>
+       </li>
+</ul>
+<ul class="nav pull-right" id="main-menu-right">
+       <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="Showcase of Bootstrap sites &amp; apps" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'builtwithbootstrap\']);">Built With Bootstrap <i class="icon-share-alt icon-white"></i></a></li>
+       <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'wrapbootstrap\']);">WrapBootstrap <i class="icon-share-alt icon-white"></i></a></li>
+</ul>
\ No newline at end of file
diff --git a/js/snippets/preview-menu.html b/js/snippets/preview-menu.html
new file mode 100644 (file)
index 0000000..c53c7ea
--- /dev/null
@@ -0,0 +1,8 @@
+<a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
+<ul class="dropdown-menu">
+       <li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li>
+       <li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li>
+       <li class="divider"></li>
+       <li><a target="_blank" href="variables.less">variables.less</a></li>
+       <li><a target="_blank" href="bootswatch.less">bootswatch.less</a></li>
+</ul>
\ No newline at end of file
index 2673337..51e07b8 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 342bcd4..2bf7d74 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -85,7 +85,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 445e265..4a7178f 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -87,7 +87,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 77d44d1..c511755 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -85,7 +85,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 115f893..6f9108f 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -85,7 +85,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index 21a8e4d..0a438d5 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -85,7 +85,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">
index afdba28..c7d9c21 100755 (executable)
@@ -35,7 +35,7 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="50">
 
 
   <!-- Navbar
@@ -49,8 +49,8 @@
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="../">Bootswatch</a>
-       <div class="nav-collapse">
-         
+       <div class="nav-collapse" id="main-menu">
+
        </div>
      </div>
    </div>
@@ -85,7 +85,7 @@
 
   <!-- Headings & Paragraph Copy -->
   <div class="row">
-         
+
     <div class="span4">
       <div class="well">
         <h1>h1. Heading 1</h1>
         <h6>h6. Heading 6</h6>
       </div>
     </div>
-         
+
     <div class="span4">
       <h3>Example body text</h3>
       <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
     </div>
-       
+
     <div class="span4">
       <h3>Example addresses</h3>
       <address>
   <div class="page-header">
     <h1>Forms</h1>
   </div>
-  
+
   <div class="row">
     <div class="span7 offset1">
-               
+
            <form class="well form-search">
              <input type="text" class="input-medium search-query">
              <button type="submit" class="btn">Search</button>
            </form>
-               
+
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
           <input type="password" class="input-small" placeholder="Password">
           <button type="submit" class="btn">Go</button>
         </form>
-               
-               
+
+
       <form class="form-horizontal well">
         <fieldset>
           <legend>Controls Bootstrap supports</legend>
     <div class="span12">
 
       <h3 id="labels">Labels</h3>
-         
+
 
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-important">Important</span>
          <span class="label label-info">Info</span>
-  
+
        </div>
   </div>
        <br />
 
 
   <h3 id="progressbars">Progress bars</h3>
-         
+
   <div class="row">
     <div class="span4">
       <div class="progress">