From 408ea5b6b0c9874b7b74601259239271b253d554 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Fri, 24 Feb 2017 18:02:05 +0800 Subject: ADD: New docs mobile experience --- docs/components.html | 33 +++++++++------- docs/css/docs.less | 103 +++++++++++++++++++++++++++++++++++++++++++------- docs/css/docs.min.css | 2 +- docs/elements.html | 20 +++++----- docs/index.html | 23 +++++++---- docs/layout.html | 17 ++++++--- docs/utilities.html | 13 +++++-- 7 files changed, 154 insertions(+), 57 deletions(-) (limited to 'docs') 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 @@ -
+
@@ -26,7 +29,7 @@
-
+ + +

Autocomplete

@@ -544,7 +549,7 @@

A dropdown is a combination of buttons and menus.

-
+
dropdown button @@ -569,7 +574,7 @@
-
+
dropdown button
    @@ -591,7 +596,7 @@
-
+
dropdown button
    @@ -1137,7 +1142,7 @@
    • - Previous + Prev
    • 1 @@ -1146,19 +1151,19 @@ ...
    • - 6 + 4
    • - 7 + 5
    • - 8 + 6
    • ...
    • - 12 + 9
    • Next @@ -1168,7 +1173,7 @@
      • - Previous + Prev
      • 1 @@ -1183,7 +1188,7 @@ ...
      • - 12 + 9
      • Next 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 @@ -
        +
        @@ -26,7 +29,7 @@
        -
        + + +

        Typography

        @@ -286,7 +291,6 @@ name - duration genre release date @@ -294,25 +298,21 @@ The Shawshank Redemption - 2h 22min Crime, Drama 14 October 1994 The Godfather - 2h 55min Crime, Drama 24 March 1972 Schindler's List - 3h 15min Biography, Drama, History 4 February 1994 Se7en - 2h 7min Crime, Drama, Mystery 22 September 1995 @@ -329,7 +329,6 @@ <thead> <tr> <th>name</th> - <th>duration</th> <th>genre</th> <th>release date</th> </tr> @@ -337,7 +336,6 @@ <tbody> <tr class="active"> <td>The Shawshank Redemption</td> - <td>2h 22min</td> <td>Crime, Drama</td> <td>14 October 1994</td> </tr> 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 @@

        Spectre.css

        The lightweight, responsive and modern CSS framework

        -
        - Documents - GitHub Repo +
        +
        + Documents + GitHub Repo +
        @@ -56,21 +58,24 @@
        -
        +
        -
        +
        -
        + + +

        Introduction

        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 @@ -
        +
        @@ -26,7 +29,7 @@
        -
        + + +

        Flexbox grid

        @@ -210,7 +215,7 @@
        -

        Spectre provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12], .col-lg-[1-12] and .col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

        +

        Spectre provides a neat responsive layout grid system. There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

        • For window width less than 480px, all columns will show as a single row.
        • col-xs-[1-12] apply to window width smaller than or equal to 480px.
          • @@ -233,7 +238,7 @@
          -

          For hiding elements on specific viewport sizes, there are classes .hide-xs, .hide-sm, .hide-md, .hide-lg and .hide-xl available.

          +

          For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.

          • hide-xs hides elements when the window width is smaller than or equal to 480px.
          • hide-sm hides elements when the window width is smaller than or equal to 600px.
            • 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 @@ -
            +
            @@ -26,7 +29,7 @@
            -
            + + +

            Position utilities

            -- cgit v1.3.1-23-gd82d