diff options
Merge pull request #536 from picturepan2/0.5.7 v0.5.7
0.5.7
12 files changed, 394 insertions, 37 deletions
| -rw-r--r-- | docs/experimentals/autocomplete.html | 10 | ||||
| -rw-r--r-- | docs/experimentals/calendars.html | 10 | ||||
| -rw-r--r-- | docs/experimentals/carousels.html | 12 | ||||
| -rw-r--r-- | docs/experimentals/comparison.html | 11 | ||||
| -rw-r--r-- | docs/experimentals/filters.html | 59 | ||||
| -rw-r--r-- | docs/experimentals/meters.html | 10 | ||||
| -rw-r--r-- | docs/experimentals/off-canvas.html | 11 | ||||
| -rw-r--r-- | docs/experimentals/parallax.html | 11 | ||||
| -rw-r--r-- | docs/experimentals/progress.html | 10 | ||||
| -rw-r--r-- | docs/experimentals/sliders.html | 12 | ||||
| -rw-r--r-- | docs/experimentals/timelines.html | 12 | ||||
| -rw-r--r-- | docs/experimentals/viewer-360.html | 263 |
diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html index 676af7f..c4acee8 100644 --- a/docs/experimentals/autocomplete.html +++ b/docs/experimentals/autocomplete.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/autocomplete.html"> + <meta property="og:title" content="Autocomplete - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html index 81ac824..5d12ca0 100644 --- a/docs/experimentals/calendars.html +++ b/docs/experimentals/calendars.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/calendars.html"> + <meta property="og:title" content="Calendars - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html index 1272ebf..f584d52 100644 --- a/docs/experimentals/carousels.html +++ b/docs/experimentals/carousels.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/carousels.html"> + <meta property="og:title" content="Carousels - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -192,6 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="carousels"> <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -238,6 +247,7 @@ </div> </div> </div> + <p>The default image number of Carousels is <code>8</code>. You can add more images by changing the variable <code>$carousel-number</code> in <code>_carousels.scss</code> and re-compiling the CSS.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel"</span>></span> <span class="hljs-comment"><!-- carousel locator --></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span> diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html index 2dd8b8b..e351e04 100644 --- a/docs/experimentals/comparison.html +++ b/docs/experimentals/comparison.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/comparison.html"> + <meta property="og:title" content="Comparison sliders - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -192,6 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="comparison"> <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html index 2ca6ccd..d87a0bf 100644 --- a/docs/experimentals/filters.html +++ b/docs/experimentals/filters.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/filters.html"> + <meta property="og:title" content="Filters - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -192,6 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="filters"> <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -223,96 +232,96 @@ <div class="column col-4 filter-item" data-tag="tag-2"> <div class="card"> <div class="card-header"> - <div class="card-title">Fallout 4</div> - <div class="card-subtitle">Roleplaying</div> + <div class="card-title text-bold">Fallout 4</div> + <div class="card-subtitle text-gray">Roleplaying</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-3"> <div class="card"> <div class="card-header"> - <div class="card-title">Halo 5</div> - <div class="card-subtitle">Shooter</div> + <div class="card-title text-bold">Halo 5</div> + <div class="card-subtitle text-gray">Shooter</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-1"> <div class="card"> <div class="card-header"> - <div class="card-title">Quantum Break</div> - <div class="card-subtitle">Action</div> + <div class="card-title text-bold">Quantum Break</div> + <div class="card-subtitle text-gray">Action</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-4"> <div class="card"> <div class="card-header"> - <div class="card-title">Forza Horizon 3</div> - <div class="card-subtitle">Sports</div> + <div class="card-title text-bold">Forza Horizon 3</div> + <div class="card-subtitle text-gray">Sports</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-2"> <div class="card"> <div class="card-header"> - <div class="card-title">Final Fantasy XV</div> - <div class="card-subtitle">Roleplaying</div> + <div class="card-title text-bold">Final Fantasy XV</div> + <div class="card-subtitle text-gray">Roleplaying</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-4"> <div class="card"> <div class="card-header"> - <div class="card-title">NBA 2K17</div> - <div class="card-subtitle">Sports</div> + <div class="card-title text-bold">NBA 2K17</div> + <div class="card-subtitle text-gray">Sports</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-3"> <div class="card"> <div class="card-header"> - <div class="card-title">Battlefield 1</div> - <div class="card-subtitle">Shooter</div> + <div class="card-title text-bold">Battlefield 1</div> + <div class="card-subtitle text-gray">Shooter</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-1"> <div class="card"> <div class="card-header"> - <div class="card-title">GTA V</div> - <div class="card-subtitle">Action</div> + <div class="card-title text-bold">GTA V</div> + <div class="card-subtitle text-gray">Action</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-4"> <div class="card"> <div class="card-header"> - <div class="card-title">FIFA 17</div> - <div class="card-subtitle">Sports</div> + <div class="card-title text-bold">FIFA 17</div> + <div class="card-subtitle text-gray">Sports</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-3"> <div class="card"> <div class="card-header"> - <div class="card-title">Overwatch</div> - <div class="card-subtitle">Shooter</div> + <div class="card-title text-bold">Overwatch</div> + <div class="card-subtitle text-gray">Shooter</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-3"> <div class="card"> <div class="card-header"> - <div class="card-title">Titanfall 2</div> - <div class="card-subtitle">Shooter</div> + <div class="card-title text-bold">Titanfall 2</div> + <div class="card-subtitle text-gray">Shooter</div> </div> </div> </div> <div class="column col-4 filter-item" data-tag="tag-3"> <div class="card"> <div class="card-header"> - <div class="card-title">Gears of Wars 4</div> - <div class="card-subtitle">Shooter</div> + <div class="card-title text-bold">Gears of Wars 4</div> + <div class="card-subtitle text-gray">Shooter</div> </div> </div> </div> diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html index b7f2c60..b449c33 100644 --- a/docs/experimentals/meters.html +++ b/docs/experimentals/meters.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/meters.html"> + <meta property="og:title" content="Meters - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html index bc896cf..b5b7636 100644 --- a/docs/experimentals/off-canvas.html +++ b/docs/experimentals/off-canvas.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/off-canvas.html"> + <meta property="og:title" content="Off-canvas - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -192,6 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="off-canvas"> <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html index b72dd7c..bb590c2 100644 --- a/docs/experimentals/parallax.html +++ b/docs/experimentals/parallax.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/parallax.html"> + <meta property="og:title" content="Parallax - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -192,6 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="parallax"> <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html index 4f148b4..ad96664 100644 --- a/docs/experimentals/progress.html +++ b/docs/experimentals/progress.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/progress.html"> + <meta property="og:title" content="Progress - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html index 411f57a..30a2768 100644 --- a/docs/experimentals/sliders.html +++ b/docs/experimentals/sliders.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/sliders.html"> + <meta property="og:title" content="Sliders - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -203,7 +211,7 @@ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> - <p>Sliders are for selecting values from ranges.</p> + <p>The Sliders are for selecting values from ranges.</p> <p>You can add the class <code>tooltip</code> to have tooltip labels. If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead. </p> diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html index 36b67b4..a1c0599 100644 --- a/docs/experimentals/timelines.html +++ b/docs/experimentals/timelines.html @@ -6,8 +6,14 @@ <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/timelines.html"> + <meta property="og:title" content="Timelines - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -203,7 +211,7 @@ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> - <p>Timelines are ordered sequences of activities.</p> + <p>The Timelines are ordered sequences of activities.</p> <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <div class="timeline"> diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html new file mode 100644 index 0000000..394db70 --- /dev/null +++ b/docs/experimentals/viewer-360.html @@ -0,0 +1,263 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>360-Degree Viewer - Experimentals - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/viewer-360.html"> + <meta property="og:title" content="360-Degree Viewer - Experimentals - Spectre.css CSS Framework"> + <meta property="og:description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> + <link rel="shortcut icon" href="../img/favicons/favicon.ico"> + <link rel="icon" href="../img/favicons/favicon.png"> + <link rel="stylesheet" href="../dist/spectre.min.css"> + <link rel="stylesheet" href="../dist/spectre-icons.min.css"> + <link rel="stylesheet" href="../dist/spectre-exp.min.css"> + <link rel="stylesheet" href="../dist/docs.min.css"> + <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/viewer-360.html"> + </head> + <body> + <div class="docs-container off-canvas off-canvas-sidebar-show"> + <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a> + <div class="btns d-flex"> + <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> + </div> + </div> + <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> + <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>SPECTRE</h2></a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-elements">Elements</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="../elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="../elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="../elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="../elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="../elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="../elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="../elements/media.html">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-layout">Layout</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> + <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="../components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="../components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="../components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="../components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="../components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="../components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="../components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="../components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="../components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="../components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="../components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="../components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="../components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="../components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="../components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="../components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="../utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="../utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="../utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="../utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="../utilities/text.html">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> + <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="../experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="../experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container" id="viewer-360"> + <h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3> + <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> + <p>360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. </p> + <div class="docs-demo columns"> + <div class="column col-12"> + <div class="viewer-360"> + <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);"> + <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');"></figure> + </div> + </div> + </div> + <p> + Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p> + <p>You will need to use your own product image sprite (all angle of photos in one image) and change the attribute <code>max</code> to use this component.</p> + <p>The default image number in CSS is <code>36</code>. You can change the image number by changing the variable <code>$image-number</code> in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> + </div> + <div class="docs-footer container grid-lg" id="copyright"> + <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </div> + </div> + </div> + </div> + <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + <script> + docsearch({ + apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', + indexName: 'picturepan2_spectre', + inputSelector: '.docs-search', + debug: true + }); + </script> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> + </body> +</html>
\ No newline at end of file |