mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-21 04:12:01 +02:00
1469 lines
56 KiB
HTML
1469 lines
56 KiB
HTML
<!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" class="">WebSlides</a></li>
|
|
<li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
|
|
<li><a href=".../demos/index.html" target="_blank" class="">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 " 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-forms.html">
|
|
<span class="kss-nav__name">Forms</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
|
|
<span class="kss-nav__name">Landings and portfolio</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-layout.html">
|
|
<span class="kss-nav__name">Layout</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-layout.html#kssref-layout-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-layout.html#kssref-layout-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 kss-nav__ref-child" href="section-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-backgrounds">
|
|
<span class="kss-nav__name">Layout.backgrounds</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-navbars">
|
|
<span class="kss-nav__name">Navbars</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-sizes">
|
|
<span class="kss-nav__name">Sizes</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slide-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-layout.html#kssref-layout-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-layout.html#kssref-layout-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-layout.html#kssref-layout-slides-fullscreen">
|
|
<span class="kss-nav__name">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-layout.html#kssref-layout-slides-top">
|
|
<span class="kss-nav__name">Align top</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-longforms.html">
|
|
<span class="kss-nav__name">Longform</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>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
|
|
<span class="kss-nav__name">Multipurpose blocks</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-typography.html">
|
|
<span class="kss-nav__name">Typography</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div role="main" class="kss-main">
|
|
|
|
<div id="kssref-layout" 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-layout">
|
|
Layout
|
|
</a>
|
|
</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="kssref-layout-alignment" 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-layout-alignment">
|
|
Align content
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=7" title="Example right" target="_blank">Example right</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=6" title="Example left" target="_blank">Example left</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=8" title="Example right" target="_blank">Example right</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=5" title="In the header" target="_blank">In the header</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=58" title="In the footer" target="_blank">In the footer</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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"><div>
|
|
<img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
|
|
<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></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_base.scss</code>, line 136
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-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-layout-background">
|
|
Backgrounds
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=58" title="Example 1" target="_blank">Example 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=59" title="Example 2" target="_blank">Example 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=60" title="Example 3" target="_blank">Example 3</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=61" title="Example 4" target="_blank">Example 4</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=51" title="Right top" target="_blank">Right top</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=92" title="Right bottom" target="_blank">Right bottom</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=87" title="Left bottom" target="_blank">Left bottom</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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/800/800/city/')"></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"><section>
|
|
<span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
|
|
</section></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides-bg.scss</code>, line 15
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-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-layout-background-anim">
|
|
Animated
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=100" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<section class="aligncenter bg-black">
|
|
<div class="kss-container-background-anim">
|
|
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
|
</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"><section class="aligncenter bg-black">
|
|
<div class="kss-container-background-anim">
|
|
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
|
</div>
|
|
</section></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides-bg.scss</code>, line 152
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-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-layout-background-video">
|
|
Video
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=34" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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"><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></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides-bg.scss</code>, line 101
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-backgrounds" 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-layout-backgrounds">
|
|
Layout.backgrounds
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="kssref-layout-backgrounds" 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-layout-backgrounds">
|
|
Backgrounds
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Colors we use for backgrounds.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=24" title="White" target="_blank">White</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=28" title="Several colors" target="_blank">Several colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=27" title="Examples" target="_blank">Examples</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<span class="bg-primary">Primary #44d</span>
|
|
<span class="bg-secondary">Secondary #67d</span>
|
|
<span class="bg-light">Light #f7f9fb</span>
|
|
<span class="bg-black">Black #000</span>
|
|
<span class="bg-black-blue">Black blue #123</span>
|
|
<span class="bg-blue">Blue #346</span>
|
|
<span class="bg-brown">Brown #f9f8f2</span>
|
|
<span class="bg-gray">Gray #d5d9e2</span>
|
|
<span class="bg-green">Green #077</span>
|
|
<span class="bg-purple">Purple #62b</span>
|
|
<span class="bg-red">Red #c23</span>
|
|
<span class="bg-white">White #fff</span>
|
|
<span class="bg-facebook">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"><span class="bg-primary">Primary #44d</span>
|
|
<span class="bg-secondary">Secondary #67d</span>
|
|
<span class="bg-light">Light #f7f9fb</span>
|
|
<span class="bg-black">Black #000</span>
|
|
<span class="bg-black-blue">Black blue #123</span>
|
|
<span class="bg-blue">Blue #346</span>
|
|
<span class="bg-brown">Brown #f9f8f2</span>
|
|
<span class="bg-gray">Gray #d5d9e2</span>
|
|
<span class="bg-green">Green #077</span>
|
|
<span class="bg-purple">Purple #62b</span>
|
|
<span class="bg-red">Red #c23</span>
|
|
<span class="bg-white">White #fff</span>
|
|
<span class="bg-facebook">Facebook #3b5998</span></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_color.scss</code>, line 107
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-backgrounds-gradient" 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-layout-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>
|
|
Demos:
|
|
[Horizontal](https://webslides.tv/demos/classes#slide=29)
|
|
[Vertical](https://webslides.tv/demos/classes#slide=32)
|
|
[Radial](https://webslides.tv/demos/classes#slide=31)
|
|
<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"> <div class="bg-gradient-h">Horizontal</div>
|
|
<div class="bg-gradient-v">Vertical</div>
|
|
<div class="bg-gradient-r">Radial</div>
|
|
Demos:
|
|
[Horizontal](https://webslides.tv/demos/classes#slide=29)
|
|
[Vertical](https://webslides.tv/demos/classes#slide=32)
|
|
[Radial](https://webslides.tv/demos/classes#slide=31)</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_color.scss</code>, line 201
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-backgrounds-transparent" 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-layout-backgrounds-transparent">
|
|
Backgrounds - Transparent
|
|
</a>
|
|
</h3>
|
|
|
|
<div class="kss-description">
|
|
<p>Colors we use for backgrounds.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=28" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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"><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></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_color.scss</code>, line 173
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-grid" 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-layout-grid">
|
|
Grid
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Basic Grid (Flexible blocks)
|
|
Auto-fill & Equal height</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=18" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=4" title="Example 2" target="_blank">Example 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=20" title="Sidebar + main" target="_blank">Sidebar + main</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=21" title="Main + sidebar" target="_blank">Main + sidebar</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=22" title="Sidebar + main + sidebar" target="_blank">Sidebar + main + sidebar</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=9" title="Columns" target="_blank">Columns</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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><section></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><section></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><section></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><section></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"><div class="grid [modifier class]">
|
|
<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></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_grid.scss</code>, line 1
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-navbars" 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-layout-navbars">
|
|
Navbars
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Responsive Media (videos, iframe...)</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=8" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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">
|
|
<nav role="navigation" class="">
|
|
<ul>
|
|
<li><a href="">About</a></li>
|
|
<li><a href="">Clients</a></li>
|
|
<li class="facebook">
|
|
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
@WebSlides
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__name kss-style">
|
|
.navbar
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
Navigation bar
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<nav role="navigation" class="navbar">
|
|
<ul>
|
|
<li><a href="">About</a></li>
|
|
<li><a href="">Clients</a></li>
|
|
<li class="facebook">
|
|
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
@WebSlides
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
<div class="kss-modifier__name kss-style">
|
|
.aligncenter
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
Center alignment
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<nav role="navigation" class="aligncenter">
|
|
<ul>
|
|
<li><a href="">About</a></li>
|
|
<li><a href="">Clients</a></li>
|
|
<li class="facebook">
|
|
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
@WebSlides
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
<div class="kss-modifier__name kss-style">
|
|
.alignright
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
Right alignment
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<nav role="navigation" class="alignright">
|
|
<ul>
|
|
<li><a href="">About</a></li>
|
|
<li><a href="">Clients</a></li>
|
|
<li class="facebook">
|
|
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
@WebSlides
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<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"><nav role="navigation" class="[modifier class]">
|
|
<ul>
|
|
<li><a href="">About</a></li>
|
|
<li><a href="">Clients</a></li>
|
|
<li class="facebook">
|
|
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
@WebSlides
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_navigation.scss</code>, line 1
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-sizes" 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-layout-sizes">
|
|
Sizes
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=25" title="50%" target="_blank">50%</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://webslides.tv/demos/components#slide=26" title="30%" target="_blank">30%</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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"><img src="../../../static/images/iphone.png" class="[modifier class]" /></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_base.scss</code>, line 200
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-slide-navigation" 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-layout-slide-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"><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></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides-navigation.scss</code>, line 1
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-slides" 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-layout-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"><section>
|
|
<p>Content</p>
|
|
</section></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides.scss</code>, line 1
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-slides-bottom" 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-layout-slides-bottom">
|
|
Align bottom
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</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"><section class="slide-bottom">
|
|
<p>Content</p>
|
|
</section></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides.scss</code>, line 72
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-slides-fullscreen" 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-layout-slides-fullscreen">
|
|
Fullscreen
|
|
</a>
|
|
</h3>
|
|
|
|
<div class="kss-description">
|
|
<p>Slide with no padding (full card, .embed youtube video...)</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<section class="fullscreen">
|
|
<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"><section class="fullscreen">
|
|
<p>Content</p>
|
|
</section></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>modules/_slides.scss</code>, line 43
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-layout-slides-top" 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-layout-slides-top">
|
|
Align top
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</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"><section class="slide-top">
|
|
<p>Content</p>
|
|
</section></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>
|