summaryrefslogtreecommitdiff
path: root/slate
diff options
context:
space:
mode:
authorThomas Park <thomas@thomaspark.me>2012-11-24 13:18:17 -0500
committerThomas Park <thomas@thomaspark.me>2012-11-24 13:18:17 -0500
commitde9b3c57183590db295af6bef856b9d1ce26bdf0 (patch)
tree58c9c00e013499d54751f8378254fb2eeac5d4e6 /slate
parent87752da58ce677d94438fb5769f24274418b010c (diff)
index: new preview pages with tables, nav, labels, badges, blockquotes
Diffstat (limited to 'slate')
-rwxr-xr-xslate/index.html415
1 files changed, 270 insertions, 145 deletions
diff --git a/slate/index.html b/slate/index.html
index 540577c4..e3d3511c 100755
--- a/slate/index.html
+++ b/slate/index.html
@@ -7,31 +7,29 @@
<meta name="description" content="">
<meta name="author" content="">
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- <!-- Le styles -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="../default/bootstrap-responsive.min.css" rel="stylesheet">
<link href="../css/docs.css" rel="stylesheet">
- <script type="text/javascript">
+ <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-23019901-1']);
- _gaq.push(['_setDomainName', "bootswatch.com"]);
- _gaq.push(['_setAllowLinker', true]);
- _gaq.push(['_trackPageview']);
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-23019901-1']);
+ _gaq.push(['_setDomainName', "bootswatch.com"]);
+ _gaq.push(['_setAllowLinker', true]);
+ _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
- </script>
+ </script>
</head>
@@ -117,6 +115,7 @@
<li><a href="#navbar">Navbar</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#forms">Forms</a></li>
+ <li><a href="#tables">Tables</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
</div>
@@ -167,6 +166,21 @@
</div>
</div>
+
+ <div class="row">
+ <div class="span6">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
+ </div>
+ <div class="span6">
+ <blockquote class="pull-right">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
+ </div>
+ </div>
</section>
@@ -290,8 +304,8 @@
<th>Large Button</th>
<th>Small Button</th>
<th>Disabled Button</th>
- <th>Button with Icon</th>
- <th>Split Button</th>
+ <th>Button with Icon</th>
+ <th>Split Button</th>
</tr>
</thead>
<tbody>
@@ -301,19 +315,19 @@
<td><a class="btn btn-small" href="#">Default</a></td>
<td><a class="btn disabled" href="#">Default</a></td>
<td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
- <td>
- <div class="btn-group">
- <a class="btn" href="#">Default</a>
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn" href="#">Default</a>
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-primary" href="#">Primary</a></td>
@@ -321,19 +335,19 @@
<td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
<td><a class="btn btn-primary disabled" href="#">Primary</a></td>
<td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-primary" href="#">Primary</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-primary" href="#">Primary</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-info" href="#">Info</a></td>
@@ -341,19 +355,19 @@
<td><a class="btn btn-info btn-small" href="#">Info</a></td>
<td><a class="btn btn-info disabled" href="#">Info</a></td>
<td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-info" href="#">Info</a>
- <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-info" href="#">Info</a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-success" href="#">Success</a></td>
@@ -361,19 +375,19 @@
<td><a class="btn btn-success btn-small" href="#">Success</a></td>
<td><a class="btn btn-success disabled" href="#">Success</a></td>
<td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-success" href="#">Success</a>
- <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-success" href="#">Success</a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-warning" href="#">Warning</a></td>
@@ -381,19 +395,19 @@
<td><a class="btn btn-warning btn-small" href="#">Warning</a></td>
<td><a class="btn btn-warning disabled" href="#">Warning</a></td>
<td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-warning" href="#">Warning</a>
- <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-warning" href="#">Warning</a>
+ <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-danger" href="#">Danger</a></td>
@@ -401,19 +415,19 @@
<td><a class="btn btn-danger btn-small" href="#">Danger</a></td>
<td><a class="btn btn-danger disabled" href="#">Danger</a></td>
<td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-danger" href="#">Danger</a>
- <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-danger" href="#">Danger</a>
+ <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
<tr>
<td><a class="btn btn-inverse" href="#">Inverse</a></td>
@@ -421,19 +435,19 @@
<td><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
<td><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
<td><a class="btn btn-inverse" href="#"><i class="icon-random icon-white"></i> Inverse</a></td>
- <td>
- <div class="btn-group">
- <a class="btn btn-inverse" href="#">Inverse</a>
- <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </td>
+ <td>
+ <div class="btn-group">
+ <a class="btn btn-inverse" href="#">Inverse</a>
+ <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </td>
</tr>
</tbody>
</table>
@@ -451,10 +465,10 @@
<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-medium search-query">
+ <button type="submit" class="btn">Search</button>
+ </form>
<form class="well form-search">
<input type="text" class="input-small" placeholder="Email">
@@ -590,6 +604,45 @@
</section>
+<!-- Tables
+================================================== -->
+<section id="tables">
+ <div class="page-header">
+ <h1>Tables</h1>
+ </div>
+
+ <table class="table table-bordered table-striped table-hover">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+</section>
+
<!-- Miscellaneous
================================================== -->
@@ -599,7 +652,7 @@
</div>
<div class="row">
- <div class="span5">
+ <div class="span4">
<h3 id="breadcrumbs">Breadcrumbs</h3>
<ul class="breadcrumb">
@@ -607,28 +660,14 @@
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
- <li class="active">Library</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
- <div class="span6 offset1">
+ <div class="span4">
<h3 id="pagination">Pagination</h3>
<div class="pagination">
<ul>
- <li class="disabled"><a href="#">&laquo;</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">&raquo;</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
<li><a href="#">&larr;</a></li>
<li class="active"><a href="#">10</a></li>
<li class="disabled"><a href="#">...</a></li>
@@ -646,28 +685,114 @@
</ul>
</div>
</div>
+
+ <div class="span4">
+ <h3 id="pager">Pagers</h3>
+
+ <ul class="pager">
+ <li><a href="#">Previous</a></li>
+ <li><a href="#">Next</a></li>
+ </ul>
+
+ <ul class="pager">
+ <li class="previous disabled"><a href="#">&larr; Older</a></li>
+ <li class="next"><a href="#">Newer &rarr;</a></li>
+ </ul>
+ </div>
</div>
+ <!-- Navs
+ ================================================== -->
+
+ <div class="row">
+ <div class="span4">
+
+ <h3 id="tabs">Tabs</h3>
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
+ <li><a href="#B" data-toggle="tab">Section 2</a></li>
+ <li><a href="#C" data-toggle="tab">Section 3</a></li>
+ </ul>
+ <div class="tabbable">
+ <div class="tab-content">
+ <div class="tab-pane active" id="A">
+ <p>I'm in Section A.</p>
+ </div>
+ <div class="tab-pane" id="B">
+ <p>Howdy, I'm in Section B.</p>
+ </div>
+ <div class="tab-pane" id="C">
+ <p>What up girl, this is Section C.</p>
+ </div>
+ </div>
+ </div> <!-- /tabbable -->
+
+ </div>
+ <div class="span4">
+ <h3 id="pills">Pills</h3>
+ <ul class="nav nav-pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="disabled"><a href="#">Disabled link</a></li>
+ </ul>
+ </div>
+
+ <div class="span4">
+
+ <h3 id="list">Lists</h3>
+
+ <div class="well" style="padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">List header</li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Library</a></li>
+ <li><a href="#">Applications</a></li>
+ <li class="nav-header">Another list header</li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Settings</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Help</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
<!-- Labels
================================================== -->
<div class="row">
- <div class="span12">
-
+ <div class="span6">
<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>
+ <span class="label label-warning">Warning</span>
+ <span class="label label-important">Important</span>
+ <span class="label label-info">Info</span>
+ <span class="label label-inverse">Inverse</span>
+ </div>
+ <div class="span6">
+ <h3 id="badges">Badges</h3>
+ <span class="badge">Default</span>
+ <span class="badge badge-success">Success</span>
+ <span class="badge badge-warning">Warning</span>
+ <span class="badge badge-important">Important</span>
+ <span class="badge badge-info">Info</span>
+ <span class="badge badge-inverse">Inverse</span>
+ </div>
</div>
- <br />
+ <br />
<!-- Progress bars
================================================== -->
@@ -692,7 +817,7 @@
</div>
</div>
</div>
- <br />
+ <br />
<!-- Alerts & Messages
@@ -702,13 +827,13 @@
<h3 id="alerts">Alerts</h3>
<div class="row">
- <div class="span12">
- <div class="alert alert-block">
- <a class="close">&times;</a>
- <h4 class="alert-heading">Alert block</h4>
- <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- </div>
- </div>
+ <div class="span12">
+ <div class="alert alert-block">
+ <a class="close">&times;</a>
+ <h4 class="alert-heading">Alert block</h4>
+ <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ </div>
+ </div>
</div>
<div class="row">
<div class="span4">