diff options
CHG: Lots of good fixes
7 files changed, 247 insertions, 43 deletions
| -rw-r--r-- | docs/components.html | 172 | ||||
| -rw-r--r-- | docs/css/docs.less | 32 | ||||
| -rw-r--r-- | docs/css/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 21 | ||||
| -rw-r--r-- | docs/index.html | 34 | ||||
| -rw-r--r-- | docs/layout.html | 18 | ||||
| -rw-r--r-- | docs/utilities.html | 11 |
diff --git a/docs/components.html b/docs/components.html index 8accdec..c21c079 100644 --- a/docs/components.html +++ b/docs/components.html @@ -116,7 +116,7 @@ Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip is-selected"> + <div class="chip active"> Natasha Romanoff <button class="btn btn-clear"></button> </div> @@ -148,7 +148,7 @@ <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> </div> <div class="tile-content"> - Steve Rogers + <mark>S</mark>teve Roger<mark>s</mark> </div> </div> </a> @@ -158,7 +158,7 @@ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure> </div> <div class="tile-content"> - Tony Stark + Tony <mark>S</mark>tark </div> </div> </a> @@ -179,7 +179,7 @@ <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip is-selected"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> Thor Odinson <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> @@ -439,16 +439,13 @@ </div> <div class="column col-6 col-xs-12"> <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" /> + </div> <div class="card-header"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Google I/O</div> - <div class="tile-meta">Software and hardware</div> - </div> - <div class="tile-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> + <button class="btn btn-primary float-right"><i class="icon icon-playlist_add"></i></button> + <div class="card-title">Google I/O</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. @@ -485,7 +482,7 @@ <p><strong>Chips</strong> are complex entities in small blocks. </p> </section> <div class="columns"> - <div class="column col-9 col-xs-12"> + <div class="column col-12"> <div class="chip"> Crime <button class="btn btn-clear"></button> @@ -503,20 +500,20 @@ <button class="btn btn-clear"></button> </div> </div> - <div class="column col-9 col-xs-12"> + <div class="column col-12"> <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> Tony Stark - <button class="btn btn-clear"></button> + <span class="chip-meta">Iron Man</span> </div> <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson - <button class="btn btn-clear"></button> </div> <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers + <span class="chip-meta">American Captain</span> </div> </div> </div> @@ -667,7 +664,7 @@ <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> </section> <div class="columns"> - <div class="column col-xs-6"> + <div class="column col-xs-12"> <ul class="menu"> <li class="menu-item"> <div class="tile tile-centered"> @@ -698,7 +695,7 @@ </ul> </div> - <div class="column col-xs-6"> + <div class="column col-xs-12"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -906,7 +903,7 @@ </section> <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header> <div class="columns"> - <div class="column col-9 col-sm-12"> + <div class="column col-6 col-sm-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#breadcrumbs"> @@ -919,8 +916,21 @@ </a> </li> <li class="breadcrumb-item"> + Change avatar + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> <a href="#breadcrumbs"> - Change avatar + Home + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs"> + Spectre </a> </li> </ul> @@ -944,16 +954,14 @@ <<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Change avatar - <<span class="tag">/a</span>> + Change avatar <<span class="tag">/li</span>> <<span class="tag">/ul</span>></code> </pre> <header id="tabs" class="text-center"><h4>Tabs</h4></header> <div class="columns"> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <ul class="tab"> <li class="tab-item active"> <a href="#tabs"> @@ -970,9 +978,14 @@ Radio </a> </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> </ul> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <ul class="tab tab-block"> <li class="tab-item active"> <a href="#tabs"> @@ -1067,6 +1080,58 @@ <<span class="tag">/ul</span>></code> </pre> + <div class="columns"> + <div class="column col-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search" /> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>You could add a search box or buttons inside a tab. Add the class <code>tab-action</code> to the <code>tab-item</code>. </p> + </section> +<!-- tabs with badges example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>></code> +</pre> + <header id="pagination" class="text-center"><h4>Pagination</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -1155,6 +1220,43 @@ <<span class="tag">/li</span>> <<span class="tag">/ul</span>></code> </pre> + <div class="columns"> + <div class="column col-12"> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="#pagination"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Getting started</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="#pagination"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + </ul> + </div> + </div> + <div class="notes"> + <p>You could use previous and next pagination to navigate. </p> + </div> +<!-- pagination example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Previous<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Getting started<<span class="tag">/h3</span>> + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-next"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Next<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Layout<<span class="tag">/h3</span>> + <<span class="tag">/a</span>> + <<span class="tag">/li</span>></code> +</pre> <header id="navs" class="text-center"><h4>Navs</h4></header> <div class="columns"> @@ -1475,6 +1577,24 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>></code> </pre> </section> + + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="layout.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="utilities.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Utilities</h3> + </a> + </li> + </ul> + </section> </div> </section> </section> diff --git a/docs/css/docs.less b/docs/css/docs.less index 64a9a90..e49207a 100644 --- a/docs/css/docs.less +++ b/docs/css/docs.less @@ -18,6 +18,7 @@ color: #666; font-size: 1.8rem; font-weight: 400; + line-height: 3rem; margin-bottom: 5rem; u { @@ -119,15 +120,26 @@ } -header { - padding-top: 3rem; -} +.docs-content { + pre { + margin-bottom: 2rem; + margin-top: 2rem; + } -.docs-content header > h3, -.docs-content header > h4, -.docs-content header > h5 { - margin-top: 4rem; - margin-bottom: 2rem; + .container { + padding: 2rem 1rem; + } + + header { + padding-top: 2rem; + } + + h3, + h4, + h5 { + margin-top: 2rem; + margin-bottom: 2rem; + } } .example-tile-icon { @@ -144,7 +156,7 @@ header { @media screen and (min-width: 480px) { .docs-sidebar { - padding: 7rem 0; + padding: 6rem 0; .docs-nav { position: relative; @@ -153,7 +165,7 @@ header { @supports (position: sticky) { .docs-nav { position: sticky; - top: 5rem; + top: 6rem; // A position: sticky; bug casues box-shadow generates width to the elements .nav-item a:focus { diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index c01bd0f..e9e0f66 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;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}header{padding-top:3rem}.docs-content header>h3,.docs-content header>h4,.docs-content header>h5{margin-bottom:2rem;margin-top:4rem}.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:7rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:5rem}.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;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 diff --git a/docs/elements.html b/docs/elements.html index 9b3de15..60d3cd0 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -320,7 +320,7 @@ </table> <section class="notes"> <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> - <p>Use the class <code>is-selected</code> to make <tr> element highlighted. </p> + <p>Use the class <code>active</code> to make <tr> element highlighted. </p> </section> <!-- tables example --> @@ -335,7 +335,7 @@ <<span class="tag">/tr</span>> <<span class="tag">/thead</span>> <<span class="tag">tbody</span>> - <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"is-selected"</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>> @@ -1082,7 +1082,24 @@ <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"https://www.youtube.com/embed/BzMLA8YIgG0"</span> <span class="atn">width</span>=<span class="atv">"560"</span> <span class="atn">height</span>=<span class="atv">"315"</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> <<span class="tag">/div</span>></code> </pre> + </section> + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="index.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Getting started</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="layout.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + </ul> </section> </div> </section> diff --git a/docs/index.html b/docs/index.html index 12bfabb..63db054 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,6 +56,18 @@ </section> </section> + <section class="section 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> + </section> + </nav> + </section> + </section> + <section class="grid-docs container grid-960"> <section class="columns"> <div class="docs-sidebar column col-3 col-sm-12"> @@ -107,25 +119,27 @@ <header class="text-center"><h3>Installation</h3></header> <section class="notes"> <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> - <h4>Install manually</h4> + </section> + <section class="notes"> + <h5>Install manually</h5> <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p> <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> - <h4>Install with NPM</h4> + <h5>Install with NPM</h5> <!-- install with npm example --> <pre> <code class="code"><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save</code> </pre> - <h4>Install with Bower</h4> + <h5>Install with Bower</h5> <!-- install with bower example --> <pre> <code class="code"><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save</code> </pre> <p>And include it in your website or Web app <code><head></code></p> + <!-- install manually example --> <pre> <code class="code"><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre.min.css"</span> /></code> </pre> - </section> </section> @@ -178,6 +192,18 @@ </ul> </section> </section> + + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-next"> + <a href="elements.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Elements</div> + </a> + </li> + </ul> + </section> </div> </section> </section> diff --git a/docs/layout.html b/docs/layout.html index 5889285..09e584d 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -336,6 +336,24 @@ <<span class="tag">/div</span>></code> </pre> </section> + + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="elements.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Elements</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="components.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Components</h3> + </a> + </li> + </ul> + </section> </div> </section> </section> diff --git a/docs/utilities.html b/docs/utilities.html index 183151e..2581dcd 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -206,6 +206,17 @@ </pre> </section> + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="components.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Components</h3> + </a> + </li> + </ul> + </section> </div> </section> </section> |