Summary Files Commits Branches @commit @diff @stats
path: root / docs
diff options
context:
space:
mode:
Commit408ea5b6b0c9874b7b74601259239271b253d554 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-02-24 18:02:05 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-02-24 18:02:05 +0800
Filesf438aeb51e678535de131827f3f56c073be4a670 /docs
Spectre-Dark-Gruvbox-408ea5b6b0c9874b7b74601259239271b253d554.tar
Spectre-Dark-Gruvbox-408ea5b6b0c9874b7b74601259239271b253d554.tar.gz
Spectre-Dark-Gruvbox-408ea5b6b0c9874b7b74601259239271b253d554.zip
Parentcdaa2cd708311a771f1f2d966eee4c4f5013e33f (diff)
ADD: New docs mobile experience
7 files changed, 154 insertions, 57 deletions
-rw-r--r--docs/components.html33
-rw-r--r--docs/css/docs.less103
-rw-r--r--docs/css/docs.min.css2
-rw-r--r--docs/elements.html20
-rw-r--r--docs/index.html23
-rw-r--r--docs/layout.html17
-rw-r--r--docs/utilities.html13
diff --git a/docs/components.html b/docs/components.html
index c21c079..50f4f5e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -12,13 +12,16 @@
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
- <section class="section bg-grey">
+ <section class="section section-header bg-grey">
<section class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<a href="index.html" class="navbar-brand">Spectre.css</a>
- <a href="index.html#introduction" class="btn btn-link">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a>
+ <a href="index.html" class="btn btn-link">Docs</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a>
+ </section>
+ <section class="navbar-section show-xs">
+ <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a>
</section>
</nav>
</section>
@@ -26,7 +29,7 @@
<section class="container grid-960">
<section class="columns">
- <div class="docs-sidebar column col-3 col-sm-12">
+ <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
<ul class="docs-nav nav">
<li class="nav-item">
<a href="index.html">Getting started</a>
@@ -86,6 +89,8 @@
</li>
</ul>
</div>
+ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+
<div class="docs-content column col-9 col-sm-12">
<section id="autocomplete" class="container">
<header class="text-center"><h3>Autocomplete</h3></header>
@@ -544,7 +549,7 @@
<p>A <strong>dropdown</strong> is a combination of buttons and menus.</p>
</section>
<div class="columns">
- <div class="column col-xs-6">
+ <div class="column col-xs-12">
<div class="dropdown">
<div class="btn-group">
<a class="btn btn-primary">dropdown button</a>
@@ -569,7 +574,7 @@
</div>
</div>
</div>
- <div class="column col-xs-6">
+ <div class="column col-xs-12">
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a>
<ul class="menu">
@@ -591,7 +596,7 @@
</ul>
</div>
</div>
- <div class="column col-xs-6">
+ <div class="column col-xs-12">
<div class="dropdown">
<a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a>
<ul class="menu">
@@ -1137,7 +1142,7 @@
<div class="column col-xs-12">
<ul class="pagination">
<li class="page-item">
- <a href="#pagination">Previous</a>
+ <a href="#pagination">Prev</a>
</li>
<li class="page-item">
<a href="#pagination">1</a>
@@ -1146,19 +1151,19 @@
<span>...</span>
</li>
<li class="page-item">
- <a href="#pagination">6</a>
+ <a href="#pagination">4</a>
</li>
<li class="page-item active">
- <a href="#pagination">7</a>
+ <a href="#pagination">5</a>
</li>
<li class="page-item">
- <a href="#pagination">8</a>
+ <a href="#pagination">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
- <a href="#pagination">12</a>
+ <a href="#pagination">9</a>
</li>
<li class="page-item">
<a href="#pagination">Next</a>
@@ -1168,7 +1173,7 @@
<div class="column col-xs-12">
<ul class="pagination">
<li class="page-item">
- <a href="#pagination" disabled tabindex="-1">Previous</a>
+ <a href="#pagination" disabled tabindex="-1">Prev</a>
</li>
<li class="page-item active">
<a href="#pagination">1</a>
@@ -1183,7 +1188,7 @@
<span>...</span>
</li>
<li class="page-item">
- <a href="#pagination">12</a>
+ <a href="#pagination">9</a>
</li>
<li class="page-item">
<a href="#pagination">Next</a>
diff --git a/docs/css/docs.less b/docs/css/docs.less
index e49207a..2101f12 100644
--- a/docs/css/docs.less
+++ b/docs/css/docs.less
@@ -64,7 +64,6 @@
.icon {
font-size: 1.3333em;
line-height: .8em;
- margin-right: .2rem;
vertical-align: -20%;
}
}
@@ -94,14 +93,10 @@
}
}
-.notes {
- margin: 4rem 0;
- color: #666;
-}
-
.empty .icon {
font-size: 4rem;
}
+
.code {
color: #666;
@@ -117,15 +112,9 @@
.atv {
color: #e06870;
}
-
}
.docs-content {
- pre {
- margin-bottom: 2rem;
- margin-top: 2rem;
- }
-
.container {
padding: 2rem 1rem;
}
@@ -134,6 +123,16 @@
padding-top: 2rem;
}
+ pre {
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+ }
+
+ .notes {
+ margin: 4rem 0;
+ color: #666;
+ }
+
h3,
h4,
h5 {
@@ -154,7 +153,7 @@
width: 4rem;
}
-@media screen and (min-width: 480px) {
+@media screen and (min-width: 481px) {
.docs-sidebar {
padding: 6rem 0;
@@ -175,3 +174,81 @@
}
}
}
+
+.docs-nav-clear {
+ display: none;
+}
+.show-xs {
+ display: none !important;
+}
+
+
+// Spectre.css Docs Mobile experience
+
+@media screen and (max-width: 480px) {
+ .show-xs {
+ display: block !important;
+ }
+
+ .grid-hero {
+ h2 {
+ font-size: 1.8rem;
+ }
+ .card {
+ padding: 0;
+ }
+ }
+
+ .section-header {
+ padding: 0 .5rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 299;
+
+ .btn-link {
+ padding-left: .6rem;
+ padding-right: .6rem;
+ }
+ }
+
+ .docs-sidebar {
+ background: #fff;
+ height: 100%;
+ overflow-y: auto;
+ padding-left: 3rem;
+ position: fixed;
+ right: 0;
+ top: 0;
+ transform: translateX(100%);
+ transition: transform .216s ease;
+ width: 24rem;
+ z-index: 999;
+
+ &:target {
+ transform: translateX(0);
+
+ & + .docs-nav-clear {
+ display: block;
+ }
+ }
+ }
+
+ .docs-content {
+ header {
+ padding-top: 6rem;
+ }
+ }
+
+ .docs-nav-clear {
+ background: rgba(0,0,0,.15);
+ display: none;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 499;
+ }
+}
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index e9e0f66..c7370e7 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content h3,.docs-content h4,.docs-content h5{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:480px){.docs-sidebar{padding:6rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}} \ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content h3,.docs-content h4,.docs-content h5{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding:6rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}.show-xs{display:none!important}@media screen and (max-width:480px){.show-xs{display:block!important}.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .216s ease,-webkit-transform .216s ease;transition:transform .216s ease;transition:-webkit-transform .216s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 60d3cd0..f476084 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -12,13 +12,16 @@
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
- <section class="section bg-grey">
+ <section class="section section-header bg-grey">
<section class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<a href="index.html" class="navbar-brand">Spectre.css</a>
- <a href="#" class="btn btn-link">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a>
+ <a href="index.html" class="btn btn-link">Docs</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a>
+ </section>
+ <section class="navbar-section show-xs">
+ <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a>
</section>
</nav>
</section>
@@ -26,7 +29,7 @@
<section class="container grid-960">
<section class="columns">
- <div class="docs-sidebar column col-3 col-sm-12">
+ <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
<ul class="docs-nav nav nav-vertical">
<li class="nav-item">
<a href="index.html">Getting started</a>
@@ -68,6 +71,8 @@
</li>
</ul>
</div>
+ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+
<div class="docs-content column col-9 col-sm-12">
<section id="typography" class="container">
<header class="text-center"><h3>Typography</h3></header>
@@ -286,7 +291,6 @@
<thead>
<tr>
<th>name</th>
- <th>duration</th>
<th>genre</th>
<th>release date</th>
</tr>
@@ -294,25 +298,21 @@
<tbody>
<tr>
<td>The Shawshank Redemption</td>
- <td>2h 22min</td>
<td>Crime, Drama</td>
<td>14 October 1994</td>
</tr>
<tr>
<td>The Godfather</td>
- <td>2h 55min</td>
<td>Crime, Drama</td>
<td>24 March 1972</td>
</tr>
<tr>
<td>Schindler's List</td>
- <td>3h 15min</td>
<td>Biography, Drama, History</td>
<td>4 February 1994</td>
</tr>
<tr>
<td>Se7en</td>
- <td>2h 7min</td>
<td>Crime, Drama, Mystery</td>
<td>22 September 1995</td>
</tr>
@@ -329,7 +329,6 @@
&lt;<span class="tag">thead</span>&gt;
&lt;<span class="tag">tr</span>&gt;
&lt;<span class="tag">th</span>&gt;name&lt;<span class="tag">/th</span>&gt;
- &lt;<span class="tag">th</span>&gt;duration&lt;<span class="tag">/th</span>&gt;
&lt;<span class="tag">th</span>&gt;genre&lt;<span class="tag">/th</span>&gt;
&lt;<span class="tag">th</span>&gt;release date&lt;<span class="tag">/th</span>&gt;
&lt;<span class="tag">/tr</span>&gt;
@@ -337,7 +336,6 @@
&lt;<span class="tag">tbody</span>&gt;
&lt;<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">&quot;active&quot;</span>&gt;
&lt;<span class="tag">td</span>&gt;The Shawshank Redemption&lt;<span class="tag">/td</span>&gt;
- &lt;<span class="tag">td</span>&gt;2h 22min&lt;<span class="tag">/td</span>&gt;
&lt;<span class="tag">td</span>&gt;Crime, Drama&lt;<span class="tag">/td</span>&gt;
&lt;<span class="tag">td</span>&gt;14 October 1994&lt;<span class="tag">/td</span>&gt;
&lt;<span class="tag">/tr</span>&gt;
diff --git a/docs/index.html b/docs/index.html
index 63db054..562bd90 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,9 +16,11 @@
<section id="overview" class="grid-hero container grid-960 text-center">
<h1>Spectre.css</h1>
<h2>The <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
- <div class="notes">
- <a href="index.html#introduction" class="btn btn-primary">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub Repo</a>
+ <div class="columns">
+ <div class="column">
+ <a href="index.html#introduction" class="btn btn-primary">Documents</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub Repo</a>
+ </div>
</div>
<div class="columns">
@@ -56,21 +58,24 @@
</section>
</section>
- <section class="section bg-grey">
+ <section class="section section-header bg-grey show-xs">
<section class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<a href="index.html" class="navbar-brand">Spectre.css</a>
- <a href="#" class="btn btn-link">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a>
+ <a href="index.html" class="btn btn-link">Docs</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a>
+ </section>
+ <section class="navbar-section">
+ <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a>
</section>
</nav>
</section>
</section>
- <section class="grid-docs container grid-960">
+ <section class="container grid-960">
<section class="columns">
- <div class="docs-sidebar column col-3 col-sm-12">
+ <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
<ul class="docs-nav nav">
<li class="nav-item active">
<a href="index.html">Getting started</a>
@@ -106,6 +111,8 @@
</li>
</ul>
</div>
+ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+
<div class="docs-content column col-9 col-sm-12">
<section id="introduction" class="container">
<header class="text-center"><h3>Introduction</h3></header>
diff --git a/docs/layout.html b/docs/layout.html
index 09e584d..722a1f4 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -12,13 +12,16 @@
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
- <section class="section bg-grey">
+ <section class="section section-header bg-grey">
<section class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<a href="index.html" class="navbar-brand">Spectre.css</a>
- <a href="index.html#introduction" class="btn btn-link">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a>
+ <a href="index.html" class="btn btn-link">Docs</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a>
+ </section>
+ <section class="navbar-section show-xs">
+ <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a>
</section>
</nav>
</section>
@@ -26,7 +29,7 @@
<section class="container grid-960">
<section class="columns">
- <div class="docs-sidebar column col-3 col-sm-12">
+ <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
<ul class="docs-nav nav">
<li class="nav-item">
<a href="index.html">Getting started</a>
@@ -59,6 +62,8 @@
</li>
</ul>
</div>
+ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+
<div class="docs-content column col-9 col-sm-12">
<section id="grid" class="container">
<header class="text-center"><h3>Flexbox grid</h3></header>
@@ -210,7 +215,7 @@
</div>
<section class="notes">
- <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code>, <code>.col-md-[1-12]</code>, <code>.col-lg-[1-12]</code> and <code>.col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
+ <p>Spectre provides a neat responsive layout grid system. There are <code>col-xs-[1-12]</code>, <code>col-sm-[1-12]</code>, <code>col-md-[1-12]</code>, <code>col-lg-[1-12]</code> and <code>col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
<ul>
<li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li>
<li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li>
@@ -233,7 +238,7 @@
</pre>
<section class="notes">
- <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p>
+ <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p>
<ul>
<li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li>
<li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li>
diff --git a/docs/utilities.html b/docs/utilities.html
index 2581dcd..da476ee 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -12,13 +12,16 @@
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
- <section class="section bg-grey">
+ <section class="section section-header bg-grey">
<section class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<a href="index.html" class="navbar-brand">Spectre.css</a>
- <a href="index.html#introduction" class="btn btn-link">Documents</a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a>
+ <a href="index.html" class="btn btn-link">Docs</a>
+ <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a>
+ </section>
+ <section class="navbar-section show-xs">
+ <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a>
</section>
</nav>
</section>
@@ -26,7 +29,7 @@
<section class="container grid-960">
<section class="columns">
- <div class="docs-sidebar column col-3 col-sm-12">
+ <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
<ul class="docs-nav nav">
<li class="nav-item">
<a href="index.html">Getting started</a>
@@ -62,6 +65,8 @@
</li>
</ul>
</div>
+ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+
<div class="docs-content column col-9 col-sm-12">
<section id="position" class="container">
<header class="text-center"><h3>Position utilities</h3></header>