1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 21:03:23 +02:00

kss - content organization

This commit is contained in:
Luis Sacristán
2017-09-30 15:37:28 +02:00
parent 4df45aaa60
commit b0d1caeb7e
89 changed files with 152 additions and 18993 deletions

View File

@@ -0,0 +1,106 @@
# WebSlides = Create stories with Karma
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
* * *
### Download
Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
* * *
### What's in the download?
The download includes demos and images (devices and logos).
All content is for demo purposes only. Images are property of their respective owners.
```
webslides/
├── index.html
├── css/
│ ├── base.css
│ └── colors.css
│ └── svg-icons.css (optional)
├── js/
│ ├── webslides.js
│ └── svg-icons.js (optional)
└── demos/
└── images/
```
## Features
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Autoslide.
- Click to nav.
- Simple CSS alignments. Put content wherever you want (vertical centering...)
- 40+ components: background images/videos, quotes, cards, covers...
- Flexible blocks with auto-fill and equal height.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
## Markup
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent `<section>` in the `#webslides` element is an individual slide.
```html
<article id="webslides">
<section>
<h1>Slide 1</h1>
</section>
<section class="bg-black aligncenter">
<!-- .wrap = container 1200px -->
<div class="wrap">
<h1>Slide 2</h1>
</div>
</section>
</article>
```
### Vertical Sliding
```html
<article id="webslides" class="vertical">
```
### CSS Syntax (classes)
- Typography: `.text-landing`, `.text-data`, `.text-intro`...
- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
- Background Images: `.background`,`.background-center-bottom`...
- Cards: `.card-50`, `.card-40`...
- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
### Extensions
You can add:
- [Unsplash](https://unsplash.com) photos
- [animate.css](https://daneden.github.io/animate.css)
- [particles.js](https://github.com/VincentGarreau/particles.js)
- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
- [pt](http://williamngan.github.io/pt/)
### Dive In!
- Do not miss [our demos](https://webslides.tv/).
- Want to get techie? Read [our wiki](wiki):
- [FAQ](https://github.com/webslides/WebSlides/wiki)
- [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
- [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
- [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
### Credits
- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

View File

@@ -1,96 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" >
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,182 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-alignment">
Align content
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 " />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.alignright
</div>
<div class="kss-modifier__description kss-style">
Align right.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 alignright" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.alignleft
</div>
<div class="kss-modifier__description kss-style">
Align left.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 alignleft" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.aligncenter
</div>
<div class="kss-modifier__description kss-style">
Align center.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;size-50 [modifier class]&quot; /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 143
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,285 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-background" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-background">
Backgrounds
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background
</div>
<div class="kss-modifier__description kss-style">
Center.
</div>
<div class="kss-modifier__example">
<section>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-top
</div>
<div class="kss-modifier__description kss-style">
Top.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-bottom
</div>
<div class="kss-modifier__description kss-style">
Bottom.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-center
</div>
<div class="kss-modifier__description kss-style">
Center.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-center-top
</div>
<div class="kss-modifier__description kss-style">
Center top.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-left-top
</div>
<div class="kss-modifier__description kss-style">
Left top.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-right-top
</div>
<div class="kss-modifier__description kss-style">
Right top.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-center-bottom
</div>
<div class="kss-modifier__description kss-style">
Center bottom.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-left-bottom
</div>
<div class="kss-modifier__description kss-style">
Left bottom.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-right-bottom
</div>
<div class="kss-modifier__description kss-style">
Right bottom.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-left
</div>
<div class="kss-modifier__description kss-style">
Left.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.background-right
</div>
<div class="kss-modifier__description kss-style">
Right.
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 15
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,142 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-backgrounds-gradient" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-architecture-backgrounds-gradient">
Backgrounds - Gradient
</a>
</h3>
<div class="kss-description">
<p>Colors we use for backgrounds.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-gradient-h">Horizontal</div>
<div class="bg-gradient-v">Vertical</div>
<div class="bg-gradient-r">Radial</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 193
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,146 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-backgrounds-transparent" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-architecture-backgrounds-transparent">
Backgrounds - Transparent
</a>
</h3>
<div class="kss-description">
<p>Colors we use for backgrounds.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-red">
<div class="bg-trans-dark">Dark</div>
<div class="bg-trans-light">Light</div>
<div class="bg-trans-gradient">Gradient</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-red&quot;&gt;
&lt;div class&#x3D;&quot;bg-trans-dark&quot;&gt;Dark&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-trans-light&quot;&gt;Light&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-trans-gradient&quot;&gt;Gradient&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 168
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,162 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
Backgrounds
</a>
</h2>
<div class="kss-description">
<p>Colors we use for backgrounds.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<span class="bg-primary size-20">Primary #44d</span>
<span class="bg-secondary size-20">Secondary #67d</span>
<span class="bg-light size-20">Light #f7f9fb</span>
<span class="bg-black size-20">Black #000</span>
<span class="bg-black-blue size-20">Black blue #123</span>
<span class="bg-blue size-20">Blue #346</span>
<span class="bg-brown size-20">Brown #f9f8f2</span>
<span class="bg-gray size-20">Gray #d5d9e2</span>
<span class="bg-green size-20">Green #077</span>
<span class="bg-purple size-20">Purple #62b</span>
<span class="bg-red size-20">Red #c23</span>
<span class="bg-white size-20">White #fff</span>
<span class="bg-facebook size-20">Facebook #3b5998</span>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 107
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,147 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-buttons">
Buttons
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<a href="#" class="button ">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.radius
</div>
<div class="kss-modifier__description kss-style">
Rounded corners
</div>
<div class="kss-modifier__example">
<a href="#" class="button radius">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_button.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-columns" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-columns">
Columns
</a>
</h2>
<div class="kss-description">
<p>Magazine Two Columns</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 346
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-context" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-context">
Context
</a>
</h2>
<div class="kss-description">
<p>Heading with border</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-context">Why WebSlides?</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 376
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-data" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-data">
Data
</a>
</h2>
<div class="kss-description">
<p>Numbers (results, sales... )-</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-data">23,478,289</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 314
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-emoji">
Emoji
</a>
</h2>
<div class="kss-description">
<p>You&#39;ll love this</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-emoji">😀😁😂😅😉😋😎😍</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 296
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,140 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-architecture-forms-user">
Login form
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="user">
<input type="text" placeholder="Username" />
<button>Log in</button>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
&lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 139
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,112 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-forms" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-forms">
Architecture.Forms
</a>
</h2>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,182 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-grid" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-grid">
Grid
</a>
</h2>
<div class="kss-description">
<p>Basic Grid (Flexible blocks)
Auto-fill &amp; Equal height</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div class="grid ">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.vertical-align
</div>
<div class="kss-modifier__description kss-style">
Vertical align
</div>
<div class="kss-modifier__example">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_grid.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-info" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-info">
Info Messages
</a>
</h2>
<div class="kss-description">
<p>Error, warning, success...</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 546
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,172 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-interviews">
Interviews
</a>
</h2>
<div class="kss-description">
<p>Questions &amp; Answers</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<dl class="text-interview">
<dt>Driftwood</dt>
<dd>
<p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
</dd>
<dt>Fiorello</dt>
<dd>
<p>No. It's no good.</p>
</dd>
<dt>Driftwood</dt>
<dd>
<p>What's the matter with it?</p>
</dd>
<dt>Fiorello</dt>
<dd>
<p>I don't know, let's hear it again.</p>
</dd>
</dl>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
&lt;dt&gt;Driftwood&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Fiorello&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Driftwood&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Fiorello&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 504
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-intro" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-intro">
Intro
</a>
</h2>
<div class="kss-description">
<p>Typography Classes = .text-</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-intro">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 206
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-label" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-label">
Label
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 333
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-landings" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-landings">
Landings
</a>
</h2>
<div class="kss-description">
<p>h1,h2... Promo/Landings</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<h1 class="text-landing">Landings</h1>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 233
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-lowercase">
Lowercase
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-lowercase">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 286
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,201 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-navigation">
Slides navigation
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div id="navigation">
<a id="next" href="#" title="Arrow Keys"></a>
<a id="previous" href="#" title="Arrow Keys"></a>
<span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
&lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;&lt;/a&gt;
&lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;&lt;/a&gt;
&lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-navigation.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
/a>
<a id="previous" href="#" title="Arrow Keys"></a>
<span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
&lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;&lt;/a&gt;
&lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;&lt;/a&gt;
&lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_navigation.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,144 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-pull_quote">
Pull Quote
</a>
</h2>
<div class="kss-description">
<p>Pull Quote Right/Left</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 449
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,142 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-radius" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-radius">
Radius
</a>
</h2>
<div class="kss-description">
<p>Adds a rounded radis</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-black radius">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-black radius&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 129
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-separator" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-separator">
Separator
</a>
</h2>
<div class="kss-description">
<p>Stars <em> </em> *</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-separator">Separator</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 418
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-serif" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-serif">
Serif
</a>
</h2>
<div class="kss-description">
<p>Maitree font</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-serif">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 220
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,142 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-shadow" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-shadow">
Shadows
</a>
</h2>
<div class="kss-description">
<p>Drops a shadow under the layer. The layer containing the shadow has to have a solid background</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-white shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-white shadow&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 73
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,207 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-sizes">
Resizing
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-80
</div>
<div class="kss-modifier__description kss-style">
resize to 80%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-80" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-70
</div>
<div class="kss-modifier__description kss-style">
resize to 70%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-70" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-60
</div>
<div class="kss-modifier__description kss-style">
resize to 60%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-60" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-50
</div>
<div class="kss-modifier__description kss-style">
resize to 50%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-50" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-40
</div>
<div class="kss-modifier__description kss-style">
resize to 40%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-40" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-30
</div>
<div class="kss-modifier__description kss-style">
resize to 30%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-30" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-20
</div>
<div class="kss-modifier__description kss-style">
resize to 20%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-20" />
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 199
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,153 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-slides-bottom" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-architecture-slides-bottom">
Align bottom
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
bottom
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-bottom&quot;&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 74
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,153 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-slides-top" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-architecture-slides-top">
Align top
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-top">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
top
</div>
<div class="kss-modifier__example">
<section class="slide-top">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-top&quot;&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 60
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,144 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-slides">
Slides
</a>
</h2>
<div class="kss-description">
<p>Fullscreen. Vertically and horizontally centered.
Fade transition to all slides.
All HTML elements will have those styles</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section>
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-subtitle" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-subtitle">
Subtitule
</a>
</h2>
<div class="kss-description">
<p>Subtitle (Before h1, h2)</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 250
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-symbols" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-symbols">
Symbols
</a>
</h2>
<div class="kss-description">
<p>Stars <em> </em> *</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-symbols">* * *</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 404
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,192 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-tables" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-tables">
Tables
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<table>
<thead>
<tr>
<th>Plans</th>
<th>Good</th>
<th>Better</th>
<th>Awesome</th>
</tr>
</thead>
<tbody>
<tr>
<td>Price</td>
<td>Free</td>
<td>$6</td>
<td>$10</td>
</tr>
<tr>
<td>Access to exclusive content</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Screens you can watch on at the same time</td>
<td>1</td>
<td>2</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Plans&lt;/th&gt;
&lt;th&gt;Good&lt;/th&gt;
&lt;th&gt;Better&lt;/th&gt;
&lt;th&gt;Awesome&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Price&lt;/td&gt;
&lt;td&gt;Free&lt;/td&gt;
&lt;td&gt;$6&lt;/td&gt;
&lt;td&gt;$10&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Access to exclusive content&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Screens you can watch on at the same time&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;Unlimited&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_tables.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-try" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-try">
Try
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<a href="#" class="try">Try element</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 96
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture-uppercase" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-architecture-uppercase">
Uppercase
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-uppercase">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 276
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,299 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-alignment">
<span class="kss-nav__name">Align content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-background">
<span class="kss-nav__name">Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
<span class="kss-nav__name">Architecture.backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
<span class="kss-nav__name">Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-gradient">
<span class="kss-nav__name">Backgrounds - Gradient</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-transparent">
<span class="kss-nav__name">Backgrounds - Transparent</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-buttons">
<span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-columns">
<span class="kss-nav__name">Columns</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-context">
<span class="kss-nav__name">Context</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-data">
<span class="kss-nav__name">Data</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-emoji">
<span class="kss-nav__name">Emoji</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-forms">
<span class="kss-nav__name">Architecture.Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-forms-user">
<span class="kss-nav__name">Login form</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-grid">
<span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-info">
<span class="kss-nav__name">Info Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-interviews">
<span class="kss-nav__name">Interviews</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-intro">
<span class="kss-nav__name">Intro</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-label">
<span class="kss-nav__name">Label</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-landings">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-lowercase">
<span class="kss-nav__name">Lowercase</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
<span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
<span class="kss-nav__name">Slides navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-pull_quote">
<span class="kss-nav__name">Pull Quote</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-radius">
<span class="kss-nav__name">Radius</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-separator">
<span class="kss-nav__name">Separator</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-serif">
<span class="kss-nav__name">Serif</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-shadow">
<span class="kss-nav__name">Shadows</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-sizes">
<span class="kss-nav__name">Resizing</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
<span class="kss-nav__name">fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
<span class="kss-nav__name">Slides</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-bottom">
<span class="kss-nav__name">Align bottom</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-top">
<span class="kss-nav__name">Align top</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-subtitle">
<span class="kss-nav__name">Subtitule</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-symbols">
<span class="kss-nav__name">Symbols</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-tables">
<span class="kss-nav__name">Tables</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-try">
<span class="kss-nav__name">Try</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-uppercase">
<span class="kss-nav__name">Uppercase</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-architecture" class="kss-section kss-section--depth-1 is-fullscreen">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-architecture">
Architecture
</a>
</h1>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,222 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-activity" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-activity">
CVs, News ad Activity
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock activity">
<li>
<a href="#" title="UX Designer at ACME">
<div>
<p class="year">
2016
</p>
<p class="title">
UX Designer at ACME
</p>
<p class="summary">
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
</p>
</div>
</a>
</li>
<li>
<a href="#" title="14 world famous buildings to inspire you">
<p class="year">
2 mins ago
</p>
<p class="title">
14 world famous buildings to inspire you
</p>
<p class="summary">
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
</p>
</a>
</li>
<li>
<a href="#" title="Co-Founder of GAMMA">
<p class="year">
2013
</p>
<p class="title">
Co-Founder of GAMMA
</p>
<p class="summary">
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
</p>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
&lt;div&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2016
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
UX Designer at ACME
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2 mins ago
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
14 world famous buildings to inspire you
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2013
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
Co-Founder of GAMMA
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-activity.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,220 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-clients" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-clients">
Clients
</a>
</h2>
<div class="kss-description">
<p>Highlight clients information</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<ul class="flexblock clients ">
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.border
</div>
<div class="kss-modifier__description kss-style">
with border
</div>
<div class="kss-modifier__example">
<ul class="flexblock clients border">
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock clients [modifier class]&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
&lt;figure&gt;
&lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/google.svg&quot; alt&#x3D;&quot;Google&quot;&gt;
&lt;figcaption&gt;
&lt;h3&gt;Interfaces&lt;/h3&gt;
&lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
&lt;figure&gt;
&lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/microsoft.svg&quot; alt&#x3D;&quot;Microsoft&quot;&gt;
&lt;figcaption&gt;
&lt;h3&gt;Interfaces&lt;/h3&gt;
&lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-clients.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,217 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-features" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-features">
Features
</a>
</h2>
<div class="kss-description">
<p>Special features</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<ul class="flexblock features">
<li>
<div>
<h2> <span>100<sup>%</sup></span> customizable</h2>
Well documented.
</div>
</li>
<li>
<div>
<span><sup>$</sup>48</span>
<h2>Extra virgin olive oil</h2>
The Spanish caviar.
</div>
</li>
<li>
<div>
<h2>
Ultra-fast Wifi
</h2>
Simple file sharing.
</div>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.border
</div>
<div class="kss-modifier__description kss-style">
with border
</div>
<div class="kss-modifier__example">
<ul class="flexblock features">
<li>
<div>
<h2> <span>100<sup>%</sup></span> customizable</h2>
Well documented.
</div>
</li>
<li>
<div>
<span><sup>$</sup>48</span>
<h2>Extra virgin olive oil</h2>
The Spanish caviar.
</div>
</li>
<li>
<div>
<h2>
Ultra-fast Wifi
</h2>
Simple file sharing.
</div>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock features&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt; &lt;span&gt;100&lt;sup&gt;%&lt;/sup&gt;&lt;/span&gt; customizable&lt;/h2&gt;
Well documented.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;48&lt;/span&gt;
&lt;h2&gt;Extra virgin olive oil&lt;/h2&gt;
The Spanish caviar.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;
Ultra-fast Wifi
&lt;/h2&gt;
Simple file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-features.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,245 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-flexblocks" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-flexblocks">
Flexblocks
</a>
</h2>
<div class="kss-description">
<p>Auto-fill &amp; Equal height columns</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<ul class="flexblock ">
<li>
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li>
<a href="#">
Item 3
</a>
</li>
<li>
<a href="#">
Item 4
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.blink
</div>
<div class="kss-modifier__description kss-style">
Linkable block
</div>
<div class="kss-modifier__example">
<ul class="flexblock blink">
<li>
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li>
<a href="#">
Item 3
</a>
</li>
<li>
<a href="#">
Item 4
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.border
</div>
<div class="kss-modifier__description kss-style">
With border
</div>
<div class="kss-modifier__example">
<ul class="flexblock border">
<li>
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li>
<a href="#">
Item 3
</a>
</li>
<li>
<a href="#">
Item 4
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock [modifier class]&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
Item 1
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
Item 2
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
Item 3
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
Item 4
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,194 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
Gallery + Overflow
</a>
</h3>
<div class="kss-description">
<p>Beautiful gallery with overlay content</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock gallery">
<li>
<a href="#">
<div class="overlay">
<h2>New York</h2>
<p>1,234 rooms</p>
</div>
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
</a>
</li>
<li>
<a href="#">
<div class="overlay">
<h2>uWatch</h2>
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
</div>
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
</a>
</li>
<li>
<a href="#">
<div class="overlay">
<h2>Ellen Daniels</h2>
<p>CEO</p>
</div>
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;div class&#x3D;&quot;overlay&quot;&gt;
&lt;h2&gt;New York&lt;/h2&gt;
&lt;p&gt;1,234 rooms&lt;/p&gt;
&lt;/div&gt;
&lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;div class&#x3D;&quot;overlay&quot;&gt;
&lt;h2&gt;uWatch&lt;/h2&gt;
&lt;time datetime&#x3D;&quot;2017-12-17T21:23:34-05:00&quot;&gt;December 2017&lt;/time&gt;
&lt;/div&gt;
&lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;div class&#x3D;&quot;overlay&quot;&gt;
&lt;h2&gt;Ellen Daniels&lt;/h2&gt;
&lt;p&gt;CEO&lt;/p&gt;
&lt;/div&gt;
&lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-gallery.scss</code>, line 44
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,206 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-gallery">
Galleries (portfolios, teams...)
</a>
</h2>
<div class="kss-description">
<p>Beautiful gallery</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock gallery">
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
<figcaption>
<h2>uWatch</h2>
<p>By Jane Doe</p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
<figcaption>
<h2>Ellen Daniels</h2>
<p>CEO</p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
<figcaption>
<h2>New York</h2>
<p>3,456 rooms</p>
</figcaption>
</figure>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;figure&gt;
&lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
&lt;figcaption&gt;
&lt;h2&gt;uWatch&lt;/h2&gt;
&lt;p&gt;By Jane Doe&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;figure&gt;
&lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
&lt;figcaption&gt;
&lt;h2&gt;Ellen Daniels&lt;/h2&gt;
&lt;p&gt;CEO&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot;&gt;
&lt;figure&gt;
&lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
&lt;figcaption&gt;
&lt;h2&gt;New York&lt;/h2&gt;
&lt;p&gt;3,456 rooms&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-gallery.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,199 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-metrics">
Metrics
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<ul class="flexblock metrics ">
<li> Founded
<span>2016</span>
</li>
<li>
<span>24M</span>
Subscribers
</li>
<li>
Revenue:
<span>$16M</span>
</li>
<li>
Monthly Growth
<span>64%</span>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.border
</div>
<div class="kss-modifier__description kss-style">
with border
</div>
<div class="kss-modifier__example">
<ul class="flexblock metrics border">
<li> Founded
<span>2016</span>
</li>
<li>
<span>24M</span>
Subscribers
</li>
<li>
Revenue:
<span>$16M</span>
</li>
<li>
Monthly Growth
<span>64%</span>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock metrics [modifier class]&quot;&gt;
&lt;li&gt; Founded
&lt;span&gt;2016&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;span&gt;24M&lt;/span&gt;
Subscribers
&lt;/li&gt;
&lt;li&gt;
Revenue:
&lt;span&gt;$16M&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
Monthly Growth
&lt;span&gt;64%&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-metrics.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,244 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-plans" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-plans">
Plans / Pricing
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<ul class="flexblock plans ">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.blink
</div>
<div class="kss-modifier__description kss-style">
block linkable
</div>
<div class="kss-modifier__example">
<ul class="flexblock plans blink">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
&lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Medium&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-plans.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,156 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-reasons">
Reasons
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock reasons">
<li>
<h2>Why WebSlides? Work better, faster.</h2>
<p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
</li>
<li>
<h2> Good karma. Just the essentials and using lovely CSS.</h2>
<p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
&lt;li&gt;
&lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
&lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
&lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-reasons.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,180 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-resume" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-resume">
Work / Resumé / CV
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="work">
<li class="work-label">
<p class="work-title">Work</p>
<p class="work-client">Client</p>
<p class="work-services">Services</p>
<p class="work-date">Year</p>
</li>
<li>
<a href="#" rel="external">
<p class="work-title"><span>Redesign of Netflix</span></p>
<p class="work-client"><span>Netflix</span></p>
<p class="work-services"><span>Frontend</span></p>
<p class="work-date"><span>2015-2016</span></p>
</a>
</li>
<li>
<a href="#" rel="external">
<p class="work-title"><span>Airbnb TV Commercials</span></p>
<p class="work-client"><span>Airbnb</span></p>
<p class="work-services"><span>Video, Storytelling</span></p>
<p class="work-date"><span>2015</span></p>
</a>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;work&quot;&gt;
&lt;li class&#x3D;&quot;work-label&quot;&gt;
&lt;p class&#x3D;&quot;work-title&quot;&gt;Work&lt;/p&gt;
&lt;p class&#x3D;&quot;work-client&quot;&gt;Client&lt;/p&gt;
&lt;p class&#x3D;&quot;work-services&quot;&gt;Services&lt;/p&gt;
&lt;p class&#x3D;&quot;work-date&quot;&gt;Year&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
&lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Redesign of Netflix&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Netflix&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Frontend&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015-2016&lt;/span&gt;&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; rel&#x3D;&quot;external&quot;&gt;
&lt;p class&#x3D;&quot;work-title&quot;&gt;&lt;span&gt;Airbnb TV Commercials&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-client&quot;&gt;&lt;span&gt;Airbnb&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-services&quot;&gt;&lt;span&gt;Video, Storytelling&lt;/span&gt;&lt;/p&gt;
&lt;p class&#x3D;&quot;work-date&quot;&gt;&lt;span&gt;2015&lt;/span&gt;&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_work.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,176 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-specs" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-specs">
Specs
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock specs">
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</div>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-specs.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,188 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents-steps" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-contents-steps">
Steps
</a>
</h2>
<div class="kss-description">
<p>Bla bla bla</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock steps">
<li>
<h2>01. Passion</h2>
<p>When you're really passionate about your job, you can change the world.</p>
</li>
<li>
<div class="process step-2"></div>
<h2>02. Purpose</h2>
<p>Why does this business exist? How are you different? Why matters?</p>
</li>
<li>
<div class="process step-3"></div>
<h2>03. Principles</h2>
<p>Leadership through usefulness, openness, empathy, and good taste.</p>
</li>
<li>
<div class="process step-4"></div>
<h2>04. Process</h2>
<ul>
<li>Useful</li>
<li>Easy</li>
<li>Fast</li>
<li>Beautiful</li>
</ul>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
&lt;li&gt;
&lt;h2&gt;01. Passion&lt;/h2&gt;
&lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
&lt;h2&gt;02. Purpose&lt;/h2&gt;
&lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
&lt;h2&gt;03. Principles&lt;/h2&gt;
&lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
&lt;h2&gt;04. Process&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Useful&lt;/li&gt;
&lt;li&gt;Easy&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Beautiful&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-steps.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,174 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-activity">
<span class="kss-nav__name"> CVs, News ad Activity</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-clients">
<span class="kss-nav__name">Clients</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-features">
<span class="kss-nav__name">Features</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-flexblocks">
<span class="kss-nav__name">Flexblocks</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-gallery">
<span class="kss-nav__name">Galleries (portfolios, teams...)</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-contents.html#kssref-contents-gallery-overlay">
<span class="kss-nav__name">Gallery + Overflow</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-metrics">
<span class="kss-nav__name">Metrics</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-plans">
<span class="kss-nav__name">Plans / Pricing</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-reasons">
<span class="kss-nav__name">Reasons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-resume">
<span class="kss-nav__name">Work / Resumé / CV</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-specs">
<span class="kss-nav__name">Specs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-steps">
<span class="kss-nav__name"> Steps</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-contents" class="kss-section kss-section--depth-1 is-fullscreen">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-contents">
Contents
</a>
</h1>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,152 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-cards" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cards">
Cards
</a>
</h2>
<div class="kss-description">
<p>Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="card-50">
<figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
<div class="flex-content">
<h2>iPhone 7</h2>
<p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
<p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;card-50&quot;&gt;
&lt;figure&gt;&lt;img class&#x3D;&quot;aligncenter&quot; src&#x3D;&quot;/static/images/iphone.png&quot; alt&#x3D;&quot;iPhone&quot;&gt;&lt;/figure&gt;
&lt;div class&#x3D;&quot;flex-content&quot;&gt;
&lt;h2&gt;iPhone 7&lt;/h2&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;3D Touch, 12MP photos, and 4K video.&lt;/p&gt;
&lt;p&gt;Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_cards.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-cites" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cites">
Cites
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_quotes.scss</code>, line 28
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,150 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cta-cover">
Headings
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1>
<p class="alignright">
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
WebSlides
</a>
<span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta-cover&quot;&gt;
&lt;h1&gt;&lt;strong&gt;HTML Presentations&lt;/strong&gt; Made Easy&lt;/h1&gt;
&lt;p class&#x3D;&quot;alignright&quot;&gt;
&lt;a class&#x3D;&quot;button&quot; href&#x3D;&quot;https://webslides.tv/webslides-latest.zip&quot; title&#x3D;&quot;Download WebSlides&quot;&gt;
WebSlides
&lt;/a&gt;
&lt;span class&#x3D;&quot;try&quot;&gt;&lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;Demos&lt;/a&gt; · &lt;a href&#x3D;&quot;https://github.com/webslides/webslides&quot; title&#x3D;&quot;Github&quot;&gt;Github&lt;/a&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 75
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,150 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-cta" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cta">
Call to action
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="cta">
<div class="number">
<p><span><sup>$</sup>40</span></p>
</div>
<div class="benefit">
<h2>Watch TV shows anytime, anywhere</h2>
<p>Lorem ipsum</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta&quot;&gt;
&lt;div class&#x3D;&quot;number&quot;&gt;
&lt;p&gt;&lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;40&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;benefit&quot;&gt;
&lt;h2&gt;Watch TV shows anytime, anywhere&lt;/h2&gt;
&lt;p&gt;Lorem ipsum&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-longform" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-longform">
Longform
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section class="wrap longform">
<p>Lorem ipsum</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
&lt;p&gt;Lorem ipsum&lt;/p&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_longform.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-quotes">
Quotes
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<blockquote>
<p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
</blockquote>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
&lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
&lt;/blockquote&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_quotes.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,182 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings-toc" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-toc">
Table of contents
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="toc">
<ol>
<li>
<a href="#" title="Go to Learning to see">
<span class="chapter">Prologue: Learning to See</span>
<span class="toc-page">01</span>
</a>
</li>
<li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
<span class="toc-page">04</span></a>
</li>
<li>
<a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
<span class="toc-page">08</span></a>
<ol>
<li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
<span class="toc-page">12</span></a>
</li>
<li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
<span class="toc-page">14</span></a>
</li>
</ol>
</li>
</ol>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;toc&quot;&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Learning to see&quot;&gt;
&lt;span class&#x3D;&quot;chapter&quot;&gt;Prologue: Learning to See&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;01&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Design?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Design?&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;04&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Beauty?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Beauty?&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;08&lt;/span&gt;&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Harmony&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Harmony&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;12&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Simplicity vs. Clarity&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Simplicity vs. Clarity&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;14&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_toc.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,149 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cards">
<span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cites">
<span class="kss-nav__name">Cites</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta">
<span class="kss-nav__name">Call to action</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta-cover">
<span class="kss-nav__name">Headings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-longform">
<span class="kss-nav__name">Longform</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-quotes">
<span class="kss-nav__name">Quotes</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-toc">
<span class="kss-nav__name">Table of contents</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings" class="kss-section kss-section--depth-1 is-fullscreen">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-landings">
Landings
</a>
</h1>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,148 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-avatars" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-avatars">
Avatars
</a>
</h2>
<div class="kss-description">
<p>You&#39;ll love this</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_avatars.scss</code>, line 5
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,138 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-background-anim">
Animated
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 140
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,150 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-background-video">
Video
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section>
<video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
<source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
</video>
<div class="wrap">
<p><code>.background-video</code></p>
<h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
</div>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;div class&#x3D;&quot;wrap&quot;&gt;
&lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
&lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 92
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,112 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-background" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-background">
Media.Background
</a>
</h2>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,140 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-badgets" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-badgets">
Badges
</a>
</h2>
<div class="kss-description">
<p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="badge-android">Google Play</p>
<p class="badge-ios">App Store</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_badges.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,146 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-embed" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-embed">
Embed
</a>
</h2>
<div class="kss-description">
<p>Responsive Media (videos, iframe...)</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;embed&quot;&gt;
&lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,151 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 is-fullscreen">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-fullscreen-embed">
Fullscreen
</a>
</h3>
<div class="kss-description">
<p>Responsive background video
<a href="https://fvsch.com/code/video-background/">https://fvsch.com/code/video-background/</a></p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="fullscreen">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;fullscreen&quot;&gt;
&lt;div class&#x3D;&quot;embed&quot;&gt;
&lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 35
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,112 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-fullscreen" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-fullscreen">
Media.Fullscreen
</a>
</h2>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,144 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media-screenshots" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-screenshots">
Screenshots
</a>
</h2>
<div class="kss-description">
<p>HTML browser</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<figure class="browser">
<img src="http://lorempixel.com/500/500/food/" />
<figcaption>Foddie</figcaption>
</figure>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
&lt;figcaption&gt;Foddie&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_browser.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,159 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" class="kss-fullscreen-mode">
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-avatars">
<span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-background">
<span class="kss-nav__name">Media.Background</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-anim">
<span class="kss-nav__name">Animated</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-video">
<span class="kss-nav__name">Video</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-badgets">
<span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
<span class="kss-nav__name">Embed</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-fullscreen">
<span class="kss-nav__name">Media.Fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-fullscreen-embed">
<span class="kss-nav__name">Fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-screenshots">
<span class="kss-nav__name">Screenshots</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media" class="kss-section kss-section--depth-1 is-fullscreen">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-media">
Media
</a>
</h1>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,2 +0,0 @@
WARNING: This folder is deleted and re-recreated each time the style guide is
built. Do NOT put your own files in this folder.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

View File

@@ -1,59 +0,0 @@
(function (window, document) {
'use strict';
// Set the configuration values on object creation.
// - idPrefix: The string that uniquely prefixes the ID of all elements that
// can receive the fullscreen focus.
// - bodyClass: The class that is set on the body element when the fullscreen
// mode is toggled on.
// - elementClass: the class that is set on the element that is receiving the
// fullscreen focus.
var KssFullScreen = function (config) {
this.idPrefix = config.idPrefix || 'kss-fullscreen-';
this.bodyClass = config.bodyClass || 'kss-fullscreen-mode';
this.elementClass = config.elementClass || 'is-fullscreen';
this.init();
};
// Initialize the page to see if the fullscreen mode should be immediately
// turned on.
KssFullScreen.prototype.init = function () {
// Check the location hash to see if it matches the idPrefix.
if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) {
this.setFocus(window.location.hash.slice(1 + this.idPrefix.length));
}
var self = this;
// Initialize all fullscreen toggle buttons.
document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) {
// Get the section reference from the data attribute.
button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen);
});
};
// Activation function that takes the ID of the element that will receive
// fullscreen focus.
KssFullScreen.prototype.setFocus = function (id) {
var el;
// Find the element with the given ID and start fullscreen mode.
if (el = document.getElementById(id)) {
el.classList.toggle('is-fullscreen');
document.body.classList.toggle('kss-fullscreen-mode');
// When enabling the focus mode, change the location hash.
if (el.classList.contains('is-fullscreen')) {
window.location.hash = '#' + this.idPrefix + id;
// Don't follow the link location.
return false;
}
}
return true;
};
// Export to DOM global space.
window.KssFullScreen = KssFullScreen;
})(window, document);

View File

@@ -1,26 +0,0 @@
(function (window, document) {
'use strict';
var KssGuides = function (config) {
this.bodyClass = config.bodyClass || 'kss-guides-mode';
this.init();
};
KssGuides.prototype.init = function () {
var self = this;
// Initialize all guides toggle buttons.
document.querySelectorAll('a[data-kss-guides]').forEach(function (el) {
el.onclick = self.showGuides.bind(self);
});
};
// Toggle the guides mode.
KssGuides.prototype.showGuides = function () {
document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass);
};
// Export to DOM global space.
window.KssGuides = KssGuides;
})(window, document);

View File

@@ -1,40 +0,0 @@
(function (window, document) {
'use strict';
var KssMarkup = function (config) {
this.bodyClass = config.bodyClass || 'kss-markup-mode';
this.detailsClass = config.detailsClass || 'kss-markup';
this.init();
};
KssMarkup.prototype.init = function () {
var self = this;
// Initialize all markup toggle buttons.
document.querySelectorAll('a[data-kss-markup]').forEach(function (el) {
el.onclick = self.showGuides.bind(self);
});
};
// Activation function that takes the ID of the element that will receive
// fullscreen focus.
KssMarkup.prototype.showGuides = function () {
var body = document.getElementsByTagName('body')[0],
enabled = body.classList.contains(this.bodyClass);
document.querySelectorAll('.' + this.detailsClass).forEach(function (el) {
if (enabled) {
el.removeAttribute('open');
} else {
el.setAttribute('open', '');
}
});
// Toggle the markup mode.
body.classList.toggle(this.bodyClass);
};
// Export to DOM global space.
window.KssMarkup = KssMarkup;
})(window, document);

View File

@@ -1,605 +0,0 @@
[class*='kss-'] {
font-family: 'San Francisco'; }
.kss-style {
color: #60676f;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 24px; }
.kss-style a {
color: #d1783e;
text-decoration: none;
transition-duration: .5s;
transition-property: color; }
.kss-style a:visited {
color: #d1783e; }
.kss-style a:focus {
color: #e5b290; }
.kss-style a:active, .kss-style a:hover {
color: #d1783e; }
.kss-style a:hover, .kss-style a:active {
outline: 0; }
.kss-style a.kss-nav__menu-link {
color: #2e3337;
font-size: 1.3rem;
font-weight: 900; }
.kss-style a.kss-nav__menu-link-active {
color: #93cdcf; }
.kss-style p {
margin: 12px 0 24px; }
.kss-style h1,
.kss-style h2,
.kss-style h3,
.kss-style h4,
.kss-style h5,
.kss-style h6 {
color: #111;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-weight: 900;
line-height: 1.15em;
margin: 24px 0 0; }
.kss-style h4,
.kss-style h5,
.kss-style h6 {
font-weight: bold; }
.kss-style h1::before,
.kss-style h2::before {
color: #e2e3e5;
font-size: 17.6px;
position: absolute; }
.kss-style h1::after,
.kss-style h2::after {
border-bottom: 1px solid #f4f3f8;
content: '';
display: block;
height: 2.4rem;
margin-left: -90px;
width: 74vw; }
.kss-style h1 {
font-size: 40px; }
.kss-style h1::before {
content: ' #';
margin-left: -20px; }
.kss-style h2 {
font-size: 32px; }
.kss-style h2::before {
content: '##';
margin-left: -30px; }
.kss-style h3 {
font-size: 34px; }
.kss-style h4 {
font-size: 32px; }
.kss-style h5 {
font-size: 30px; }
.kss-style h6 {
font-size: 28px; }
.kss-style blockquote {
border-left: 0.5em #e6e6e6 solid;
color: #999;
margin: 0;
padding-left: 24px; }
.kss-style hr {
border: 0;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid white;
display: block;
height: 2px;
margin: 24px 0;
padding: 0; }
.kss-style pre,
.kss-style code,
.kss-style kbd,
.kss-style samp {
color: #393c40;
font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
font-size: 1em; }
.kss-style pre {
overflow: scroll;
white-space: pre; }
.kss-style ins {
background: #ff9;
color: #111;
text-decoration: none; }
.kss-style mark {
background: #ff0;
color: #111;
font-weight: bold; }
.kss-style sub,
.kss-style sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
.kss-style sup {
top: -.5em; }
.kss-style sub {
bottom: -.25em; }
.kss-style ul,
.kss-style ol {
margin: 24px 0;
padding: 0 0 0 24px; }
.kss-style li p:last-child {
margin: 0; }
.kss-style dd {
margin: 0 0 0 24px; }
.kss-style img {
border: 0;
max-width: 100%;
vertical-align: middle; }
.kss-style table {
border-collapse: collapse;
border-spacing: 0; }
.kss-style td {
vertical-align: top; }
@media print {
.kss-style a,
.kss-style a:visited {
text-decoration: underline; }
.kss-style hr {
border: 0;
border-bottom: 1px solid #000;
height: 1px; }
.kss-style a[href]:after {
content: " (" attr(href) ")"; }
.kss-style a[href^='javascript:']:after,
.kss-style a[href^='#']:after {
content: ''; }
.kss-style abbr[title]:after {
content: " (" attr(title) ")"; }
.kss-style pre,
.kss-style blockquote {
border: 1px solid #999;
padding-right: 1em;
page-break-inside: avoid; }
.kss-style tr,
.kss-style img {
page-break-inside: avoid; }
.kss-style img {
max-width: 100%; }
.kss-style p,
.kss-style h2,
.kss-style h3 {
orphans: 3;
widows: 3; }
.kss-style h2,
.kss-style h3 {
page-break-after: avoid; } }
#kss-node {
background: #fff;
margin: 0;
padding: 20px;
/* SPAN elements with the classes below are added by prettyprint. */
/* Specify class=linenums on a pre to get line numbering */ }
#kss-node.kss-fullscreen-mode .kss-sidebar,
#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
#kss-node.kss-fullscreen-mode .kss-github {
display: none; }
@media screen and (min-width: 769px) {
#kss-node {
padding: 0; }
#kss-node .kss-main,
#kss-node .kss-sidebar {
border: 0;
border-right: 1px solid #e2e3e5;
box-sizing: border-box; } }
@media screen and (min-width: 769px) {
#kss-node .kss-main {
padding: 140px 90px; } }
#kss-node .kss-sidebar {
border-right: 1px solid #e2e3e5; }
@media screen and (min-width: 769px) {
#kss-node .kss-sidebar {
border-bottom: 0;
padding: 150px 10px 0 20px; } }
#kss-node .kss-doc-title {
margin: 0; }
#kss-node .kss-doc-title img {
max-width: 40px;
vertical-align: middle; }
@media screen and (min-width: 769px) {
#kss-node .kss-doc-title {
font-size: 1.5em; } }
#kss-node .kss-nav {
position: relative; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav {
margin-top: 2em; } }
#kss-node .kss-nav ul,
#kss-node .kss-nav ol,
#kss-node .kss-nav li {
display: block;
float: none; }
#kss-node .kss-nav li {
margin-left: 3.2rem; }
#kss-node .kss-nav .kss-nav-has-children > a::before {
content: url("./images/down_arrow.svg"); }
#kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before {
content: url("./images/up_arrow.svg"); }
#kss-node .kss-nav__menu {
list-style-type: none;
margin-bottom: 12px;
margin-top: 12px;
padding: 0; }
#kss-node .kss-nav__menu-item {
display: inline-block;
padding-right: 24px; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-item {
display: list-item;
padding-right: 0; } }
#kss-node .kss-nav__menu-link {
display: inline-block;
position: relative; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-link:before {
background-color: transparent;
content: ' ';
height: 100%;
left: -20px;
position: absolute;
width: 0; } }
#kss-node .kss-nav__menu-child {
display: none; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-child {
display: block;
list-style-type: none;
margin: 0;
padding: 0; }
#kss-node .kss-nav__menu-child li {
padding: 15px 0 0; }
#kss-node .kss-nav__menu-child li:last-child {
padding: 15px 0; } }
#kss-node .kss-nav__ref {
color: #6a737a; }
#kss-node .kss-nav__ref:after {
content: ' '; }
#kss-node .kss-nav__ref-child {
font-weight: normal; }
#kss-node .kss-section {
padding-bottom: 2.4rem;
padding-top: 2.4rem; }
#kss-node .kss-section.is-fullscreen {
bottom: 0;
box-sizing: border-box;
height: 100%;
left: 0;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
object-fit: contain;
overflow: auto;
padding: 20px;
position: fixed;
right: 0;
top: 0;
transform: none;
width: 100%; }
#kss-node .kss-title {
margin-bottom: 0; }
#kss-node .is-fullscreen .kss-title {
margin-top: 0; }
#kss-node .kss-title__ref {
color: #333;
display: block;
font-size: 16px;
line-height: 16px; }
#kss-node .kss-title__ref:before {
content: 'Section '; }
#kss-node .kss-title__permalink {
color: #000;
display: block;
text-decoration: none; }
#kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
color: #d1783e; }
@media screen and (min-width: 607px) {
#kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
display: inline; } }
#kss-node .kss-title__permalink-hash {
color: #999;
display: none; }
#kss-node .kss-toolbar {
display: inline-block;
line-height: 1;
margin: 6px 0 24px;
padding: 3px; }
#kss-node .kss-toolbar a {
box-sizing: content-box;
display: inline-block;
height: 16px;
overflow: visible;
padding: 3px;
position: relative;
vertical-align: top;
width: 16px; }
#kss-node .kss-toolbar a + a {
margin-left: 6px; }
#kss-node .kss-toolbar a .kss-toolbar__icon-fill {
fill: #999; }
#kss-node .kss-toolbar a svg.on {
display: none; }
#kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
border-color: #000; }
#kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
fill: #000; }
#kss-node .kss-toolbar__tooltip {
background: #fff;
border: solid 1px #999;
bottom: 100%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
clip: rect(1px, 1px, 1px, 1px);
color: #000;
cursor: help;
display: inline-block;
height: 1px;
left: -10px;
margin-bottom: 5px;
opacity: 0;
overflow: hidden;
padding: 8px 10px 6px;
position: absolute;
transition: opacity .25s;
white-space: nowrap;
width: 1px;
word-wrap: normal;
z-index: 1; }
#kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
border-color: #999 transparent;
border-style: solid;
border-width: 7px 5px 0;
bottom: -8px;
content: '';
height: 0;
left: 15px;
position: absolute;
width: 0; }
#kss-node .kss-toolbar__tooltip:after {
border-top-color: #fff;
bottom: -6px; }
#kss-node a:focus > .kss-toolbar__tooltip,
#kss-node a:hover > .kss-toolbar__tooltip {
clip: auto;
height: auto;
opacity: 1;
overflow: visible;
width: auto; }
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
background-color: #999;
border-color: #999; }
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
fill: #fff; }
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
display: block; }
#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
display: none; }
#kss-node .kss-parameters {
display: table;
list-style-type: none;
margin-left: 0;
margin-top: 0;
padding-left: 0; }
#kss-node .kss-parameters__title {
font-weight: bold; }
#kss-node .kss-parameters__item {
display: table-row; }
#kss-node .kss-parameters__name {
display: table-cell;
padding-right: 20px;
white-space: nowrap; }
#kss-node .kss-parameters__description {
display: table-cell; }
#kss-node .kss-parameters__default-value code {
white-space: nowrap; }
#kss-node .is-fullscreen .kss-modifier__wrapper {
border: 0;
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0; }
#kss-node .kss-modifier__heading {
margin: 2.4rem 0;
padding: 1.2rem 0; }
#kss-node .kss-modifier__heading::after {
border-bottom: 4px solid #f3f3f5;
content: '';
display: block;
padding-top: 1.2rem;
width: 40%; }
#kss-node .is-fullscreen .kss-modifier__heading {
border: 1px solid #999;
margin: 0 20px 10px; }
#kss-node .kss-modifier__default-name {
font-weight: bold;
margin-bottom: 12px; }
#kss-node .is-fullscreen .kss-modifier__default-name {
margin-left: 20px;
margin-right: 20px; }
#kss-node .kss-modifier__name {
float: left;
font-weight: bold;
padding-right: 10px; }
#kss-node .is-fullscreen .kss-modifier__name {
margin-left: 20px; }
#kss-node .kss-modifier__description {
margin-bottom: 12px; }
#kss-node .is-fullscreen .kss-modifier__description {
margin-right: 20px; }
#kss-node .kss-modifier__example {
border: 2px dashed transparent;
clear: left;
margin: -2px -2px 22px;
position: relative;
z-index: 0; }
#kss-node .kss-modifier__example:last-child {
margin-bottom: 0; }
#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
border: 2px solid #000;
box-sizing: border-box;
content: '';
height: 5px;
position: absolute;
width: 5px;
z-index: -1; }
#kss-node.kss-guides-mode .kss-modifier__example {
border-color: #000; }
#kss-node.kss-guides-mode .kss-modifier__example:before {
border-left: 0;
border-top: 0;
left: -5px;
top: -5px; }
#kss-node.kss-guides-mode .kss-modifier__example:after {
border-right: 0;
border-top: 0;
right: -5px;
top: -5px; }
#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
left: auto;
right: 0; }
#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
left: 0;
right: auto; }
#kss-node .kss-modifier__example-footer {
clear: both; }
#kss-node.kss-guides-mode .kss-modifier__example-footer:before {
border-bottom: 0;
border-left: 0;
bottom: -5px;
left: -5px; }
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
border-bottom: 0;
border-right: 0;
bottom: -5px;
right: -5px; }
#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
left: auto;
right: 0; }
#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
left: 0;
right: auto; }
#kss-node .kss-markup {
border: 1px solid #e0e4e7;
border-radius: 3px;
margin: 24px 0;
padding: 20px; }
#kss-node .kss-markup[open] summary {
background: url("./images/up_arrow.svg") no-repeat right center; }
#kss-node .kss-markup summary {
background: url("./images/down_arrow.svg") no-repeat right center;
cursor: pointer; }
#kss-node .kss-markup pre {
background: #1d1f20;
overflow: auto;
padding: 20px; }
#kss-node .kss-markup pre code {
background: transparent; }
#kss-node .kss-source {
font-size: 70%;
font-style: italic; }
#kss-node .kss-github {
display: none; }
@media screen and (min-width: 501px) {
#kss-node .kss-github {
display: block;
position: absolute;
right: 0;
top: 0; } }
#kss-node .kss-github img {
border: 0; }
#kss-node .tag {
color: #a7925a; }
#kss-node .atn {
color: #ddca7e; }
#kss-node .pun {
color: #fff; }
#kss-node .atv {
color: #96b38a; }
#kss-node .pln {
color: #fff; }
#kss-node ol.linenums {
list-style-type: none;
margin: 0;
padding: 0; }
#kss-node ol.linenums li {
line-height: 2rem;
margin: 0;
min-height: 24px;
padding: 0 10px; }
.kss-container {
display: grid;
grid-template-columns: 25% 75%; }
.kss-header {
background-color: #2f3742;
display: flex;
padding: 0 2.4rem;
position: fixed; }
.kss-header h1,
.kss-header li a {
color: #fff;
display: inline-block;
font-family: 'San Francisco';
font-size: .8em;
font-weight: bold;
line-height: 7.2rem;
padding: 0; }
.kss-header li a:hover {
color: #93cdcf; }
.kss-header .kss-menu-active {
border-bottom: 4px solid #93cdcf;
box-sizing: border-box;
color: #93cdcf; }
.kss-sub-header {
background: #f3f3f5;
border-bottom: 4px solid #e7e7e9;
font-size: 14px;
padding: 1rem 2.4rem;
position: fixed;
top: 72px;
width: 100%;
z-index: 1; }
#kssref-layout-radius .radius {
padding: 2.4rem; }
#kssref-base-backgrounds span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem; }
#kssref-base-backgrounds-transparent div[class*='bg'] {
margin: 0;
padding: 2rem; }
#kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
margin: 3rem;
padding: 6rem; }
#kssref-base-backgrounds-gradient div[class*='bg'] {
margin: 3rem;
padding: 4rem; }
#kssref-slide-background-anim .slide {
clip: rect(0, 200px, 200px, 0);
position: absolute; }
#kssref-slide-background-anim .kss-modifier__example {
height: 200px;
margin: 0 auto;
width: 200px; }
.kss-description p {
padding-bottom: 1.2rem; }

View File

@@ -1,53 +0,0 @@
(function() {
var KssStateGenerator;
KssStateGenerator = (function() {
var pseudo_selectors;
pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child'];
function KssStateGenerator() {
var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g");
try {
_ref = document.styleSheets;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
stylesheet = _ref[_i];
if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) {
idxs = [];
_ref2 = stylesheet.cssRules;
for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
rule = _ref2[idx];
if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
replaceRule = function(matched, stuff) {
return matched.replace(/\:/g, '.pseudo-class-');
};
this.insertRule(rule.cssText.replace(pseudos, replaceRule));
}
pseudos.lastIndex = 0;
}
}
}
} catch (_error) {}
}
KssStateGenerator.prototype.insertRule = function(rule) {
var headEl, styleEl;
headEl = document.getElementsByTagName('head')[0];
styleEl = document.createElement('style');
styleEl.type = 'text/css';
if (styleEl.styleSheet) {
styleEl.styleSheet.cssText = rule;
} else {
styleEl.appendChild(document.createTextNode(rule));
}
return headEl.appendChild(styleEl);
};
return KssStateGenerator;
})();
new KssStateGenerator;
}).call(this);

View File

@@ -1,970 +0,0 @@
// ------------------------------------------------------------------------------
// Variables - Colors, Fonts, etc.
// ------------------------------------------------------------------------------
$kss-black: #000;
$kss-gray: #999;
$kss-white: #fff;
$kss-transparent: rgba(0, 0, 0, 0);
$kss-dark-gray: #333;
$kss-shadow: rgba(0, 0, 0, .25);
$kss-colors-header-bg: #2f3742;
$kss-colors-header-font: #fff;
$kss-colors-header-link-active: #93cdcf;
$kss-colors-subheader-bg: #f3f3f5;
$kss-colors-subheader-border: #e7e7e9;
$kss-colors-background: $kss-white;
$kss-colors-border-sep: #e2e3e5;
$kss-colors-border-bottom-sep: #f4f3f8;
$kss-colors-menu-link: #2e3337;
$kss-colors-menu-link-active: #93cdcf;
$kss-colors-submenu-link: #6a737a;
$kss-colors-foreground: #60676f;
$kss-colors-heading: #111;
$kss-colors-heading-side: #e2e3e5;
$kss-colors-quotes: $kss-gray;
$kss-colors-ins-bg: #ff9;
$kss-colors-mark-bg: #ff0;
$kss-colors-markup-border: #e0e4e7;
$kss-colors-markup-code: #1d1f20;
$kss-colors-link: #d1783e;
$kss-colors-link-visited: #d1783e;
$kss-colors-link-hover: lighten($kss-colors-link, 20%);
$kss-colors-link-active: #d1783e;
$kss-colors-tag: #a7925a;
$kss-colors-atn: #ddca7e;
$kss-colors-pun: #fff;
$kss-colors-atv: #96b38a;
$kss-colors-pln: #fff;
$kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
$kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
$kss-font-size: 16px;
$kss-vertical-rhythm: $kss-font-size * 1.5;
// ------------------------------------------------------------------------------
// Wrap all of this builder's base HTML styling inside a .kss-style selector.
// ------------------------------------------------------------------------------
[class*='kss-'] {
font-family: 'San Francisco';
}
.kss-style {
color: $kss-colors-foreground;
font-family: $kss-font-body;
font-size: $kss-font-size;
line-height: $kss-vertical-rhythm;
a {
color: $kss-colors-link;
text-decoration: none;
transition-duration: .5s;
transition-property: color;
&:visited { color: $kss-colors-link-visited; }
&:focus { color: $kss-colors-link-hover; }
&:active,
&:hover {
color: $kss-colors-link-active;
}
&:hover,
&:active {
outline: 0;
}
&.kss-nav__menu-link {
color: $kss-colors-menu-link;
font-size: 1.3rem;
font-weight: 900;
}
&.kss-nav__menu-link-active {
color: $kss-colors-menu-link-active;
}
}
p {
margin: ($kss-vertical-rhythm / 2) 0 $kss-vertical-rhythm;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $kss-colors-heading;
font-family: $kss-font-body;
font-weight: 900;
line-height: 1.15em;
margin: $kss-vertical-rhythm 0 0;
}
h4,
h5,
h6 {
font-weight: bold;
}
h1,
h2 {
&::before {
color: $kss-colors-heading-side;
font-size: $kss-font-size * 1.1;
position: absolute;
}
&::after {
border-bottom: 1px solid $kss-colors-border-bottom-sep;
content: '';
display: block;
height: 2.4rem;
margin-left: -90px;
width: 74vw;
}
}
h1 {
font-size: $kss-font-size * 2.5;
&::before {
content: ' #';
margin-left: -20px;
}
}
h2 {
font-size: $kss-font-size * 2;
&::before {
content: '##';
margin-left: -30px;
}
}
h3 { font-size: $kss-font-size * 2.125; }
h4 { font-size: $kss-font-size * 2; }
h5 { font-size: $kss-font-size * 1.875; }
h6 { font-size: $kss-font-size * 1.75; }
blockquote {
border-left: .5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid;
color: $kss-colors-quotes;
margin: 0;
padding-left: $kss-vertical-rhythm;
}
hr {
border: 0;
border-bottom: 1px solid darken($kss-colors-background, 10%);
border-top: 1px solid lighten($kss-colors-foreground, 60%);
display: block;
height: 2px;
margin: $kss-vertical-rhythm 0;
padding: 0;
}
pre,
code,
kbd,
samp {
color: mix($kss-colors-foreground, $kss-colors-heading, 50%);
font-family: $kss-font-code;
font-size: 1em;
}
pre {
overflow: scroll;
white-space: pre;
}
ins {
background: $kss-colors-ins-bg;
color: $kss-colors-heading;
text-decoration: none;
}
mark {
background: $kss-colors-mark-bg;
color: $kss-colors-heading;
font-weight: bold;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -.5em; }
sub { bottom: -.25em; }
ul,
ol {
margin: $kss-vertical-rhythm 0;
padding: 0 0 0 $kss-vertical-rhythm;
}
li p:last-child {
margin: 0;
}
dd {
margin: 0 0 0 $kss-vertical-rhythm;
}
img {
border: 0;
max-width: 100%;
vertical-align: middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
vertical-align: top;
}
@media print {
a,
a:visited {
text-decoration: underline;
}
hr {
border: 0;
border-bottom: 1px solid $kss-black;
height: 1px;
}
a[href]:after { content: ' (' attr(href) ')'; }
a[href^='javascript:']:after,
a[href^='#']:after {
content: '';
}
abbr[title]:after { content: ' (' attr(title) ')'; }
pre,
blockquote {
border: 1px solid $kss-gray;
padding-right: 1em;
page-break-inside: avoid;
}
tr,
img {
page-break-inside: avoid;
}
img { max-width: 100%; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
}
// ------------------------------------------------------------------------------
// Layout and page background
// ------------------------------------------------------------------------------
#kss-node {
background: $kss-white;
margin: 0;
padding: 20px;
&.kss-fullscreen-mode {
.kss-sidebar,
.kss-section:not(.is-fullscreen),
.kss-github {
display: none;
}
}
@media screen and (min-width: 769px) {
padding: 0;
.kss-main,
.kss-sidebar {
border: 0;
border-right: 1px solid $kss-colors-border-sep;
box-sizing: border-box;
}
}
.kss-main {
@media screen and (min-width: 769px) {
padding: 140px 90px;
}
}
.kss-sidebar {
border-right: 1px solid $kss-colors-border-sep;
@media screen and (min-width: 769px) {
border-bottom: 0;
padding: 150px 10px 0 20px;
}
}
.kss-doc-title {
margin: 0;
img {
max-width: 40px;
vertical-align: middle;
}
@media screen and (min-width: 769px) {
font-size: 1.5em;
}
}
.kss-nav {
position: relative;
@media screen and (min-width: 769px) {
margin-top: 2em;
}
& ul,
& ol,
& li {
display: block;
float: none;
}
& li {
margin-left: 3.2rem;
}
.kss-nav-has-children > a::before {
content: url('./images/down_arrow.svg');
}
.kss-nav-has-children > a.kss-nav__menu-link-active::before {
content: url('./images/up_arrow.svg');
}
}
.kss-nav__menu {
list-style-type: none;
margin-bottom: ($kss-vertical-rhythm / 2);
margin-top: ($kss-vertical-rhythm / 2);
padding: 0;
}
.kss-nav__menu-item {
display: inline-block;
padding-right: $kss-vertical-rhythm;
@media screen and (min-width: 769px) {
display: list-item;
padding-right: 0;
}
}
.kss-nav__menu-link {
display: inline-block;
position: relative;
&:before {
@media screen and (min-width: 769px) {
background-color: $kss-transparent;
content: ' ';
height: 100%;
left: -20px;
position: absolute;
width: 0;
}
}
}
.kss-nav__menu-child {
display: none;
@media screen and (min-width: 769px) {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 15px 0 0;
&:last-child {
padding: 15px 0;
}
}
}
}
.kss-nav__ref {
color: $kss-colors-submenu-link;
&:after {
content: ' ';
}
}
.kss-nav__ref-child {
font-weight: normal;
}
// ------------------------------------------------------------------------------
// Content-area components
// ------------------------------------------------------------------------------
.kss-section {
padding-bottom: 2.4rem;
padding-top: 2.4rem;
// "fullscreen" styles copied from Mozilla's default stylesheet.
&.is-fullscreen {
bottom: 0;
box-sizing: border-box;
height: 100%;
left: 0;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
object-fit: contain;
// Turn on scrolling if needed.
overflow: auto;
padding: 20px;
position: fixed;
right: 0;
top: 0;
transform: none;
width: 100%;
}
}
.kss-title {
margin-bottom: 0;
}
.is-fullscreen .kss-title {
margin-top: 0;
}
.kss-title__ref {
color: $kss-dark-gray;
display: block;
font-size: $kss-font-size;
line-height: $kss-font-size;
&:before {
content: 'Section ';
}
}
.kss-title__permalink {
color: $kss-black;
display: block;
text-decoration: none;
&:hover,
&:focus,
&:active {
color: $kss-colors-link;
@media screen and (min-width: 607px) {
.kss-title__permalink-hash {
display: inline;
}
}
}
}
.kss-title__permalink-hash {
color: $kss-gray;
display: none;
}
.kss-toolbar {
display: inline-block;
line-height: 1;
margin: 6px 0 24px;
padding: 3px;
a {
box-sizing: content-box;
display: inline-block;
height: 16px;
overflow: visible;
padding: 3px;
position: relative;
vertical-align: top;
width: 16px;
+ a {
margin-left: 6px;
}
.kss-toolbar__icon-fill {
fill: $kss-gray;
}
svg.on {
display: none;
}
&:focus,
&:hover {
border-color: $kss-black;
.kss-toolbar__icon-fill {
fill: $kss-black;
}
}
}
}
.kss-toolbar__tooltip {
background: $kss-white;
border: solid 1px $kss-gray;
bottom: 100%;
box-shadow: 2px 2px 2px $kss-shadow;
clip: rect(1px, 1px, 1px, 1px);
color: $kss-black;
cursor: help;
display: inline-block;
height: 1px;
left: -10px;
margin-bottom: 5px;
opacity: 0;
overflow: hidden;
padding: 8px 10px 6px;
position: absolute;
transition: opacity .25s;
white-space: nowrap;
width: 1px;
word-wrap: normal;
z-index: 1;
// Solid grey triangle.
&:before,
&:after {
border-color: $kss-gray transparent;
border-style: solid;
border-width: 7px 5px 0;
bottom: -8px;
content: '';
height: 0;
left: 15px;
position: absolute;
width: 0;
}
// White triangle knock-out.
&:after {
border-top-color: $kss-white;
bottom: -6px;
}
}
a:focus,
a:hover {
> .kss-toolbar__tooltip {
clip: auto;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
}
.is-fullscreen .kss-toolbar a[data-kss-fullscreen],
&.kss-guides-mode .kss-toolbar a[data-kss-guides],
&.kss-markup-mode .kss-toolbar a[data-kss-markup] {
background-color: $kss-gray;
border-color: $kss-gray;
.kss-toolbar__icon-fill {
fill: $kss-white;
}
svg.on {
display: block;
}
svg.off {
display: none;
}
}
.kss-parameters {
display: table;
list-style-type: none;
margin-left: 0;
margin-top: 0;
padding-left: 0;
}
.kss-parameters__title {
font-weight: bold;
}
.kss-parameters__item {
display: table-row;
}
.kss-parameters__name {
display: table-cell;
padding-right: 20px;
white-space: nowrap;
}
.kss-parameters__description {
display: table-cell;
}
.kss-parameters__default-value code {
white-space: nowrap;
}
.is-fullscreen .kss-modifier__wrapper {
border: 0;
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.kss-modifier__heading {
margin: 2.4rem 0;
padding: 1.2rem 0;
&::after {
border-bottom: 4px solid $kss-colors-subheader-bg;
content: '';
display: block;
padding-top: 1.2rem;
width: 40%;
}
}
.is-fullscreen .kss-modifier__heading {
border: 1px solid $kss-gray;
margin: 0 20px 10px;
}
.kss-modifier__default-name {
font-weight: bold;
margin-bottom: ($kss-vertical-rhythm / 2);
}
.is-fullscreen .kss-modifier__default-name {
margin-left: 20px;
margin-right: 20px;
}
.kss-modifier__name {
float: left;
font-weight: bold;
padding-right: 10px;
}
.is-fullscreen .kss-modifier__name {
margin-left: 20px;
}
.kss-modifier__description {
margin-bottom: ($kss-vertical-rhythm / 2);
}
.is-fullscreen .kss-modifier__description {
margin-right: 20px;
}
.kss-modifier__example {
border: 2px dashed transparent;
clear: left;
margin: -2px -2px ($kss-vertical-rhythm - 2px);
position: relative; // Contain the example's absolute positioning.
z-index: 0; // Establishes a local stacking context.
&:last-child {
margin-bottom: 0;
}
}
&.kss-guides-mode .kss-modifier__example,
&.kss-guides-mode .kss-modifier__example-footer {
&:before,
&:after {
border: 2px solid $kss-black;
box-sizing: border-box;
content: '';
height: 5px;
position: absolute;
width: 5px;
z-index: -1;
}
}
&.kss-guides-mode .kss-modifier__example {
border-color: $kss-black;
&:before {
border-left: 0;
border-top: 0;
left: -5px;
top: -5px;
}
&:after {
border-right: 0;
border-top: 0;
right: -5px;
top: -5px;
}
}
&.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example {
&:before {
left: auto;
right: 0;
}
&:after {
left: 0;
right: auto;
}
}
.kss-modifier__example-footer {
clear: both;
}
&.kss-guides-mode .kss-modifier__example-footer {
&:before {
border-bottom: 0;
border-left: 0;
bottom: -5px;
left: -5px;
}
&:after {
border-bottom: 0;
border-right: 0;
bottom: -5px;
right: -5px;
}
}
&.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer {
&:before {
left: auto;
right: 0;
}
&:after {
left: 0;
right: auto;
}
}
.kss-markup {
border: 1px solid $kss-colors-markup-border;
border-radius: 3px;
margin: 24px 0;
padding: 20px;
&[open] summary {
background: url('./images/up_arrow.svg') no-repeat right center;
}
& summary {
background: url('./images/down_arrow.svg') no-repeat right center;
cursor: pointer;
}
pre {
background: $kss-colors-markup-code;
overflow: auto;
padding: 20px;
code {
background: transparent;
}
}
}
.kss-source {
font-size: 70%;
font-style: italic;
}
.kss-github {
display: none;
@media screen and (min-width: 501px) {
display: block;
position: absolute;
right: 0;
top: 0;
}
img {
border: 0;
}
}
// ------------------------------------------------------------------------------
// prettify.js styles
// ------------------------------------------------------------------------------
/* SPAN elements with the classes below are added by prettyprint. */
.tag { color: $kss-colors-tag; }
.atn { color: $kss-colors-atn; }
.pun { color: $kss-colors-pun; }
.atv { color: $kss-colors-atv; }
.pln { color: $kss-colors-pln; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
list-style-type: none;
margin: 0;
padding: 0;
li {
line-height: 2rem;
margin: 0;
min-height: $kss-vertical-rhythm;
padding: 0 10px;
}
}
}
.kss-container {
display: grid;
grid-template-columns: 25% 75%;
}
// ------------------------------------------------------------------------------
// Sidebar-area components
// ------------------------------------------------------------------------------
.kss-header {
background-color: $kss-colors-header-bg;
display: flex;
padding: 0 2.4rem;
position: fixed;
h1,
li a {
color: $kss-colors-header-font;
display: inline-block;
font-family: 'San Francisco';
font-size: .8em;
font-weight: bold;
line-height: 7.2rem;
padding: 0;
}
li a:hover {
color: $kss-colors-header-link-active;
}
.kss-menu-active {
border-bottom: 4px solid $kss-colors-header-link-active;
box-sizing: border-box;
color: $kss-colors-header-link-active;
}
}
.kss-sub-header {
background: $kss-colors-subheader-bg;
border-bottom: 4px solid $kss-colors-subheader-border;
font-size: 14px;
padding: 1rem 2.4rem;
position: fixed;
top: 72px;
width: 100%;
z-index: 1;
}
// WebSlides
#kssref-layout-radius {
& .radius {
padding: 2.4rem;
}
}
#kssref-base-backgrounds {
& span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem;
}
}
#kssref-base-backgrounds-transparent {
& div[class*='bg'] {
margin: 0;
padding: 2rem;
& > div[class*='bg'] {
margin: 3rem;
padding: 6rem;
}
}
}
#kssref-base-backgrounds-gradient {
& div[class*='bg'] {
margin: 3rem;
padding: 4rem;
}
}
#kssref-slide-background-anim .slide {
clip: rect(0, 200px, 200px, 0);
position: absolute;
}
#kssref-slide-background-anim .kss-modifier__example {
height: 200px;
margin: 0 auto;
width: 200px;
}
.kss-description {
p {
padding-bottom: 1.2rem;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
</svg>

Before

Width:  |  Height:  |  Size: 527 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
</svg>

Before

Width:  |  Height:  |  Size: 529 B

View File

@@ -1,147 +0,0 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function ScrollSpy (wrapper, opt) {
this.doc = document;
this.wrapper = (typeof wrapper === 'string') ? this.doc.querySelector(wrapper) : wrapper;
this.nav = this.wrapper.querySelectorAll(opt.nav);
this.contents = [];
this.win = window;
this.winH = this.win.innerHeight;
this.className = opt.className;
this.callback = opt.callback;
this.init();
}
ScrollSpy.prototype.init = function () {
this.contents = this.getContents();
this.attachEvent();
};
ScrollSpy.prototype.getContents = function () {
var targetList = [];
for (var i = 0, max = this.nav.length; i < max; i++) {
var href = this.nav[i].href;
targetList.push(this.doc.getElementById(href.split('#')[1]));
}
return targetList;
};
ScrollSpy.prototype.attachEvent = function () {
this.win.addEventListener('load', (function () {
this.spy(this.callback);
}).bind(this));
var scrollingTimer;
this.win.addEventListener('scroll', (function () {
if (scrollingTimer) {
clearTimeout(scrollingTimer);
}
var _this = this;
scrollingTimer = setTimeout(function () {
_this.spy(_this.callback);
}, 10);
}).bind(this));
var resizingTimer;
this.win.addEventListener('resize', (function () {
if (resizingTimer) {
clearTimeout(resizingTimer);
}
var _this = this;
resizingTimer = setTimeout(function () {
_this.spy(_this.callback);
}, 10);
}).bind(this));
};
ScrollSpy.prototype.spy = function (cb) {
var elems = this.getElemsViewState();
this.markNav(elems);
if (typeof cb === 'function') {
cb(elems);
}
};
ScrollSpy.prototype.getElemsViewState = function () {
var elemsInView = [],
elemsOutView = [],
viewStatusList = [];
for (var i = 0, max = this.contents.length; i < max; i++) {
var currentContent = this.contents[i],
isInView = this.isInView(currentContent);
if (isInView) {
elemsInView.push(currentContent);
} else {
elemsOutView.push(currentContent);
}
viewStatusList.push(isInView);
}
return {
inView: elemsInView,
outView: elemsOutView,
viewStatusList: viewStatusList
};
};
ScrollSpy.prototype.isInView = function (el) {
var winH = this.winH,
scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop,
scrollBottom = scrollTop + winH,
rect = el.getBoundingClientRect(),
elTop = rect.top + scrollTop,
elBottom = elTop + el.offsetHeight;
return (elTop < scrollBottom) && (elBottom > scrollTop);
};
ScrollSpy.prototype.markNav = function (elems) {
var navItems = this.nav,
isAlreadyMarked = false;
for (var i = 0, max = navItems.length; i < max; i++) {
if (elems.viewStatusList[i] && !isAlreadyMarked) {
isAlreadyMarked = true;
navItems[i].classList.add(this.className);
} else {
navItems[i].classList.remove(this.className);
}
}
};
module.exports = ScrollSpy;
},{}],2:[function(require,module,exports){
(function (global){
/**
* ScrollSpy
*
*/
var ScrollSpy = require('./modules/scrollspy');
global.ScrollSpy = module.exports = ScrollSpy;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./modules/scrollspy":1}]},{},[2]);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,514 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" >
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cards">
<span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cites">
<span class="kss-nav__name">Cites</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta">
<span class="kss-nav__name">Call to action</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta-cover">
<span class="kss-nav__name">Headings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-longform">
<span class="kss-nav__name">Longform</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-quotes">
<span class="kss-nav__name">Quotes</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-toc">
<span class="kss-nav__name">Table of contents</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-landings" class="kss-section kss-section--depth-1 ">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-landings">
Landings
</a>
</h1>
</div>
</div>
<div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cards">
Cards
</a>
</h2>
<div class="kss-description">
<p>Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="card-50">
<figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
<div class="flex-content">
<h2>iPhone 7</h2>
<p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
<p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;card-50&quot;&gt;
&lt;figure&gt;&lt;img class&#x3D;&quot;aligncenter&quot; src&#x3D;&quot;/static/images/iphone.png&quot; alt&#x3D;&quot;iPhone&quot;&gt;&lt;/figure&gt;
&lt;div class&#x3D;&quot;flex-content&quot;&gt;
&lt;h2&gt;iPhone 7&lt;/h2&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;3D Touch, 12MP photos, and 4K video.&lt;/p&gt;
&lt;p&gt;Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_cards.scss</code>, line 1
</div>
</div>
<div id="kssref-landings-cites" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cites">
Cites
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_quotes.scss</code>, line 28
</div>
</div>
<div id="kssref-landings-cta" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cta">
Call to action
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="cta">
<div class="number">
<p><span><sup>$</sup>40</span></p>
</div>
<div class="benefit">
<h2>Watch TV shows anytime, anywhere</h2>
<p>Lorem ipsum</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta&quot;&gt;
&lt;div class&#x3D;&quot;number&quot;&gt;
&lt;p&gt;&lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;40&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;benefit&quot;&gt;
&lt;h2&gt;Watch TV shows anytime, anywhere&lt;/h2&gt;
&lt;p&gt;Lorem ipsum&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 1
</div>
</div>
<div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-cta-cover">
Headings
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1>
<p class="alignright">
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
WebSlides
</a>
<span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;cta-cover&quot;&gt;
&lt;h1&gt;&lt;strong&gt;HTML Presentations&lt;/strong&gt; Made Easy&lt;/h1&gt;
&lt;p class&#x3D;&quot;alignright&quot;&gt;
&lt;a class&#x3D;&quot;button&quot; href&#x3D;&quot;https://webslides.tv/webslides-latest.zip&quot; title&#x3D;&quot;Download WebSlides&quot;&gt;
WebSlides
&lt;/a&gt;
&lt;span class&#x3D;&quot;try&quot;&gt;&lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;Demos&lt;/a&gt; · &lt;a href&#x3D;&quot;https://github.com/webslides/webslides&quot; title&#x3D;&quot;Github&quot;&gt;Github&lt;/a&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 75
</div>
</div>
<div id="kssref-landings-longform" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-longform">
Longform
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section class="wrap longform">
<p>Lorem ipsum</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
&lt;p&gt;Lorem ipsum&lt;/p&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_longform.scss</code>, line 1
</div>
</div>
<div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-quotes">
Quotes
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<blockquote>
<p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
</blockquote>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
&lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
&lt;/blockquote&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_quotes.scss</code>, line 1
</div>
</div>
<div id="kssref-landings-toc" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-landings-toc">
Table of contents
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="toc">
<ol>
<li>
<a href="#" title="Go to Learning to see">
<span class="chapter">Prologue: Learning to See</span>
<span class="toc-page">01</span>
</a>
</li>
<li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
<span class="toc-page">04</span></a>
</li>
<li>
<a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
<span class="toc-page">08</span></a>
<ol>
<li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
<span class="toc-page">12</span></a>
</li>
<li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
<span class="toc-page">14</span></a>
</li>
</ol>
</li>
</ol>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;toc&quot;&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Learning to see&quot;&gt;
&lt;span class&#x3D;&quot;chapter&quot;&gt;Prologue: Learning to See&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;01&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Design?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Design?&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;04&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to What is Beauty?&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;What is Beauty?&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;08&lt;/span&gt;&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Harmony&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Harmony&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;12&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Go to Simplicity vs. Clarity&quot;&gt;&lt;span class&#x3D;&quot;chapter&quot;&gt;Simplicity vs. Clarity&lt;/span&gt;
&lt;span class&#x3D;&quot;toc-page&quot;&gt;14&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_toc.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

View File

@@ -1,527 +0,0 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" >
<header class="kss-header">
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
<nav class="kss-header-nav">
<ul>
<li><a href="../../index.html" target="_blank">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<div class="kss-container">
<div class="kss-sidebar kss-style">
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-landings.html">
<span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
<span class="kss-nav__name">Media</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-avatars">
<span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-background">
<span class="kss-nav__name">Media.Background</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-anim">
<span class="kss-nav__name">Animated</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-video">
<span class="kss-nav__name">Video</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-badgets">
<span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
<span class="kss-nav__name">Embed</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-fullscreen">
<span class="kss-nav__name">Media.Fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-fullscreen-embed">
<span class="kss-nav__name">Fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-screenshots">
<span class="kss-nav__name">Screenshots</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-media" class="kss-section kss-section--depth-1 ">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-media">
Media
</a>
</h1>
</div>
</div>
<div id="kssref-media-avatars" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-avatars">
Avatars
</a>
</h2>
<div class="kss-description">
<p>You&#39;ll love this</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_avatars.scss</code>, line 5
</div>
</div>
<div id="kssref-media-background" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-background">
Media.Background
</a>
</h2>
</div>
</div>
<div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-background-anim">
Animated
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 140
</div>
</div>
<div id="kssref-media-background-video" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-background-video">
Video
</a>
</h3>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<section>
<video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
<source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
</video>
<div class="wrap">
<p><code>.background-video</code></p>
<h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
</div>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;div class&#x3D;&quot;wrap&quot;&gt;
&lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
&lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 92
</div>
</div>
<div id="kssref-media-badgets" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-badgets">
Badges
</a>
</h2>
<div class="kss-description">
<p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="badge-android">Google Play</p>
<p class="badge-ios">App Store</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_badges.scss</code>, line 1
</div>
</div>
<div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-embed">
Embed
</a>
</h2>
<div class="kss-description">
<p>Responsive Media (videos, iframe...)</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;embed&quot;&gt;
&lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 1
</div>
</div>
<div id="kssref-media-fullscreen" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-fullscreen">
Media.Fullscreen
</a>
</h2>
</div>
</div>
<div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-media-fullscreen-embed">
Fullscreen
</a>
</h3>
<div class="kss-description">
<p>Responsive background video
<a href="https://fvsch.com/code/video-background/">https://fvsch.com/code/video-background/</a></p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="fullscreen">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;fullscreen&quot;&gt;
&lt;div class&#x3D;&quot;embed&quot;&gt;
&lt;video autoplay loop poster&#x3D;&quot;https://webslides.tv/static/images/peggy.jpg&quot;&gt;
&lt;source src&#x3D;&quot;https://webslides.tv/static/videos/peggy.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 35
</div>
</div>
<div id="kssref-media-screenshots" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-media-screenshots">
Screenshots
</a>
</h2>
<div class="kss-description">
<p>HTML browser</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<figure class="browser">
<img src="http://lorempixel.com/500/500/food/" />
<figcaption>Foddie</figcaption>
</figure>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
&lt;figcaption&gt;Foddie&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_browser.scss</code>, line 1
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>

45
npm-debug.log Normal file
View File

@@ -0,0 +1,45 @@
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'kss' ]
2 info using npm@3.5.2
3 info using node@v4.2.6
4 verbose run-script [ 'prekss', 'kss', 'postkss' ]
5 info lifecycle webslides@1.3.1~prekss: webslides@1.3.1
6 silly lifecycle webslides@1.3.1~prekss: no script for prekss, continuing
7 info lifecycle webslides@1.3.1~kss: webslides@1.3.1
8 verbose lifecycle webslides@1.3.1~kss: unsafe-perm in lifecycle true
9 verbose lifecycle webslides@1.3.1~kss: PATH: /usr/share/npm/bin/node-gyp-bin:/home/displaynone/Proyectos/WebSlides/node_modules/.bin:/home/displaynone/bin:/home/displaynone/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
10 verbose lifecycle webslides@1.3.1~kss: CWD: /home/displaynone/Proyectos/WebSlides
11 silly lifecycle webslides@1.3.1~kss: Args: [ '-c', 'npm-run-all -p kss:*' ]
12 silly lifecycle webslides@1.3.1~kss: Returned: code: 1 signal: null
13 info lifecycle webslides@1.3.1~kss: Failed to exec kss script
14 verbose stack Error: webslides@1.3.1 kss: `npm-run-all -p kss:*`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:821:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid webslides@1.3.1
16 verbose cwd /home/displaynone/Proyectos/WebSlides
17 error Linux 4.10.0-35-generic
18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "kss"
19 error node v4.2.6
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error webslides@1.3.1 kss: `npm-run-all -p kss:*`
22 error Exit status 1
23 error Failed at the webslides@1.3.1 kss script 'npm-run-all -p kss:*'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the webslides package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm-run-all -p kss:*
23 error You can get information on how to open an issue for this project with:
23 error npm bugs webslides
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls webslides
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

View File

@@ -71,7 +71,7 @@
"kss": "npm-run-all -p kss:*", "kss": "npm-run-all -p kss:*",
"kss:prebuild": "rimraf doc/styleguide*", "kss:prebuild": "rimraf doc/styleguide*",
"kss:css": "node-sass doc/kss/templates/default/kss-assets/kss.scss doc/kss/templates/default/kss-assets/kss.css", "kss:css": "node-sass doc/kss/templates/default/kss-assets/kss.scss doc/kss/templates/default/kss-assets/kss.css",
"kss:doc": "kss --config kss-config.json" "kss:doc": "kss --config kss-config.json --verbose ./README.md"
}, },
"jest": { "jest": {
"collectCoverage": true "collectCoverage": true