mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 10:30:51 +02:00
Code Issues Releases Wiki Activity

KSS - backgrounds, colors, ...

Browse Source
This commit is contained in:
Luis Sacristán
2017-08-15 20:46:19 +02:00
parent 69ec3c06b0
commit 5aa42db66c
18 changed files with 1275 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
doc/styleguide/index.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-base-backgrounds-gradient.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-base-backgrounds-transparent.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-base-backgrounds.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-base.html
View File

@@ -56,6 +56,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-layout-alignment.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-layout-radius.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-layout-shadow.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-layout-sizes.html
View File

@@ -36,6 +36,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/item-layout.html
View File

@@ -62,6 +62,11 @@
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

276
doc/styleguide/item-slide-background-position.html Normal file
View File

@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</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">
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<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__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-slide-background-position" 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-slide-background-position">
<span class="kss-title__ref">
3.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Position
</span>
</span>
Slide backgrounds
</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>
<span class="" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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" style="background-image:url('http://lorempixel.com/250/250/')"></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]&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/250/250/&#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>
</article>
<!-- 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>

141
doc/styleguide/item-slide-background-video.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</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">
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<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__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-slide-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-slide-background-video">
<span class="kss-title__ref">
3.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>
</span>
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>
</article>
<!-- 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>

276
doc/styleguide/item-slide-background.html Normal file
View File

@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</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">
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<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__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-slide-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-slide-background">
<span class="kss-title__ref">
3.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>
</span>
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>
</article>
<!-- 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>

117
doc/styleguide/item-slide.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</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">
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<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__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background">
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name">Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-video">
<span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
><span class="kss-nav__name">Video</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-slide" 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-slide">
<span class="kss-title__ref">
3
<span class="kss-title__permalink-hash">
#Slide
</span>
</span>
Slide
</a>
</h1>
</div>
</div>
</article>
<!-- 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>

5
doc/styleguide/section-base.html
View File

@@ -56,6 +56,11 @@
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

5
doc/styleguide/section-layout.html
View File

@@ -62,6 +62,11 @@
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>

370
doc/styleguide/section-slide.html Normal file
View File

@@ -0,0 +1,370 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</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" >
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<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__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background">
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name">Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-video">
<span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
><span class="kss-nav__name">Video</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-slide" 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-slide">
<span class="kss-title__ref">
3
<span class="kss-title__permalink-hash">
#Slide
</span>
</span>
Slide
</a>
</h1>
</div>
</div>
<section id="kssref-slide-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-slide-background">
<span class="kss-title__ref">
3.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>
</span>
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>
</section>
<section id="kssref-slide-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-slide-background-video">
<span class="kss-title__ref">
3.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>
</span>
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>
</section>
</article>
<!-- 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>

39
src/scss/modules/_slides-bg.scss
View File

@@ -12,6 +12,27 @@
/*=== BG Positions === */
// Backgrounds
//
// Markup:
// <section>
// <span class="{{modifier_class}} bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
// </section>
//
// .background - Center.
// .background-top - Top.
// .background-bottom - Bottom.
// .background-center - Center.
// .background-center-top - Center top.
// .background-left-top - Left top.
// .background-right-top - Right top.
// .background-center-bottom - Center bottom.
// .background-left-bottom - Left bottom.
// .background-right-bottom - Right bottom.
// .background-left - Left.
// .background-right - Right.
//
// Styleguide Slide.Background
.background {
background-position: center;
background-size: cover;
@@ -68,10 +89,20 @@
}
}
/*fullscreen video
<video class="background-video">
*/
// Video
//
// Markup:
// <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>
//
// Styleguide Slide.Background.Video
&-video {
height: 100%;
object-fit: fill;