diff options
ADD: New docs mobile experience
7 files changed, 154 insertions, 57 deletions
| -rw-r--r-- | docs/components.html | 33 | ||||
| -rw-r--r-- | docs/css/docs.less | 103 | ||||
| -rw-r--r-- | docs/css/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 20 | ||||
| -rw-r--r-- | docs/index.html | 23 | ||||
| -rw-r--r-- | docs/layout.html | 17 | ||||
| -rw-r--r-- | docs/utilities.html | 13 |
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 @@ <<span class="tag">thead</span>> <<span class="tag">tr</span>> <<span class="tag">th</span>>name<<span class="tag">/th</span>> - <<span class="tag">th</span>>duration<<span class="tag">/th</span>> <<span class="tag">th</span>>genre<<span class="tag">/th</span>> <<span class="tag">th</span>>release date<<span class="tag">/th</span>> <<span class="tag">/tr</span>> @@ -337,7 +336,6 @@ <<span class="tag">tbody</span>> <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"active"</span>> <<span class="tag">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> - <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> <<span class="tag">/tr</span>> 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> |