mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-21 20:35:31 +02:00
Code Issues Releases Wiki Activity

kss - avatars & typography

Browse Source
This commit is contained in:
Luis Sacristán
2017-08-28 22:48:58 +02:00
parent 4706b3c6ee
commit be4827d998
56 changed files with 5147 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
doc/styleguide/index.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

154
doc/styleguide/item-avatars.html Normal file
View File

@@ -0,0 +1,154 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-avatars" 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-avatars">
<span class="kss-title__ref">
1
<span class="kss-title__permalink-hash">
#Avatars
</span>
</span>
Avatars
</a>
</h1>
<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>
</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>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-backgrounds-gradient">
<span class="kss-title__ref">
1.1.1
2.1.1
<span class="kss-title__permalink-hash">
#Base.backgrounds.gradient
</span>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-backgrounds-transparent">
<span class="kss-title__ref">
1.1.2
2.1.2
<span class="kss-title__permalink-hash">
#Base.backgrounds.transparent
</span>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-backgrounds">
<span class="kss-title__ref">
1.1
2.1
<span class="kss-title__permalink-hash">
#Base.backgrounds
</span>

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

@@ -26,26 +26,31 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds">
<span class="kss-nav__ref ">1.1</span
<span class="kss-nav__ref ">2.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-base.html#kssref-base-backgrounds-gradient">
<span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">2.1.1</span
><span class="kss-nav__name">Gradient Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-transparent">
<span class="kss-nav__ref kss-nav__ref-child">1.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">2.1.2</span
><span class="kss-nav__name">Transparent Backgrounds</span>
</a>
</li>
@@ -53,17 +58,22 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -77,7 +87,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-base">
<span class="kss-title__ref">
1
2
<span class="kss-title__permalink-hash">
#Base
</span>

20
doc/styleguide/item-flexblock-activity.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-activity">
<span class="kss-title__ref">
2.1
3.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>

20
doc/styleguide/item-flexblock-blink.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref">
2.2
3.2
<span class="kss-title__permalink-hash">
#Flexblock.Blink
</span>

20
doc/styleguide/item-flexblock-clients.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref">
2.3
3.3
<span class="kss-title__permalink-hash">
#Flexblock.Clients
</span>

20
doc/styleguide/item-flexblock-features.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref">
2.4
3.4
<span class="kss-title__permalink-hash">
#Flexblock.Features
</span>

20
doc/styleguide/item-flexblock-gallery-overlay.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref">
2.5.1
3.5.1
<span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay
</span>

20
doc/styleguide/item-flexblock-gallery.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref">
2.5
3.5
<span class="kss-title__permalink-hash">
#Flexblock.Gallery
</span>

147
doc/styleguide/item-flexblock-landings.html Normal file
View File

@@ -0,0 +1,147 @@
<!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-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</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">4</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-flexblock-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-flexblock-landings">
<span class="kss-title__ref">
2.6
<span class="kss-title__permalink-hash">
#Flexblock.Landings
</span>
</span>
Landings
</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">
<h1 class="text-landing">Landings</h1>
<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">
<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 220
</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>

20
doc/styleguide/item-flexblock-metrics.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref">
2.6
3.6
<span class="kss-title__permalink-hash">
#Flexblock.Metrics
</span>

20
doc/styleguide/item-flexblock-plans.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-plans">
<span class="kss-title__ref">
2.7
3.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>

20
doc/styleguide/item-flexblock-reasons.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-reasons">
<span class="kss-title__ref">
2.8
3.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>

20
doc/styleguide/item-flexblock-specs.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-specs">
<span class="kss-title__ref">
2.9
3.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>

20
doc/styleguide/item-flexblock-steps.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-steps">
<span class="kss-title__ref">
2.10
3.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>

42
doc/styleguide/item-flexblock.html
View File

@@ -26,79 +26,84 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
<span class="kss-nav__ref ">2.1</span
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name"> Activity</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
<span class="kss-nav__ref ">2.2</span
<span class="kss-nav__ref ">3.2</span
><span class="kss-nav__name">Flexblocks</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
<span class="kss-nav__ref ">2.3</span
<span class="kss-nav__ref ">3.3</span
><span class="kss-nav__name">Clients</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
<span class="kss-nav__ref ">2.4</span
<span class="kss-nav__ref ">3.4</span
><span class="kss-nav__name">Features</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
<span class="kss-nav__ref ">2.5</span
<span class="kss-nav__ref ">3.5</span
><span class="kss-nav__name">Gallery</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
<span class="kss-nav__ref kss-nav__ref-child">2.5.1</span
<span class="kss-nav__ref kss-nav__ref-child">3.5.1</span
><span class="kss-nav__name">Gallery + Overflow</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
<span class="kss-nav__ref ">2.6</span
<span class="kss-nav__ref ">3.6</span
><span class="kss-nav__name">Metrics</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
<span class="kss-nav__ref ">2.7</span
<span class="kss-nav__ref ">3.7</span
><span class="kss-nav__name">Plans</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
<span class="kss-nav__ref ">2.8</span
<span class="kss-nav__ref ">3.8</span
><span class="kss-nav__name">Reasons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
<span class="kss-nav__ref ">2.9</span
<span class="kss-nav__ref ">3.9</span
><span class="kss-nav__name">Specs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
<span class="kss-nav__ref ">2.10</span
<span class="kss-nav__ref ">3.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
@@ -106,12 +111,17 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -125,7 +135,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-flexblock">
<span class="kss-title__ref">
2
3
<span class="kss-title__permalink-hash">
#Flexblock
</span>

139
doc/styleguide/item-landings-intro.html Normal file
View File

@@ -0,0 +1,139 @@
<!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-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-landings.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-landings-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-landings-intro">
<span class="kss-title__ref">
3.1
<span class="kss-title__permalink-hash">
#Landings.Intro
</span>
</span>
Intro
</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">
<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 207
</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>

147
doc/styleguide/item-landings.html Normal file
View File

@@ -0,0 +1,147 @@
<!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-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-landings.html">
<span class="kss-nav__ref">3</span><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" href="section-landings.html#kssref-landings-intro">
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name">Intro</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article 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">
<span class="kss-title__ref">
3
<span class="kss-title__permalink-hash">
#Landings
</span>
</span>
Landings
</a>
</h1>
<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">
<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 228
</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>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-alignment">
<span class="kss-title__ref">
3.1
4.1
<span class="kss-title__permalink-hash">
#Layout.Alignment
</span>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-radius">
<span class="kss-title__ref">
3.2
4.2
<span class="kss-title__permalink-hash">
#Layout.Radius
</span>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-shadow">
<span class="kss-title__ref">
3.3
4.3
<span class="kss-title__permalink-hash">
#Layout.Shadow
</span>

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

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-sizes">
<span class="kss-title__ref">
3.4
4.4
<span class="kss-title__permalink-hash">
#Layout.Sizes
</span>

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

@@ -26,42 +26,47 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</span><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" href="section-layout.html#kssref-layout-alignment">
<span class="kss-nav__ref ">3.1</span
<span class="kss-nav__ref ">4.1</span
><span class="kss-nav__name">Align content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
<span class="kss-nav__ref ">3.2</span
<span class="kss-nav__ref ">4.2</span
><span class="kss-nav__name">Radius</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
<span class="kss-nav__ref ">3.3</span
<span class="kss-nav__ref ">4.3</span
><span class="kss-nav__name">Shadows</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
<span class="kss-nav__ref ">3.4</span
<span class="kss-nav__ref ">4.4</span
><span class="kss-nav__name">Resizing</span>
</a>
</li>
@@ -69,7 +74,12 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -83,7 +93,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-layout">
<span class="kss-title__ref">
3
4
<span class="kss-title__permalink-hash">
#Layout
</span>

20
doc/styleguide/item-slide-background-anim.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
<span class="kss-title__ref">
4.1.1
5.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Anim
</span>

20
doc/styleguide/item-slide-background-video.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-video">
<span class="kss-title__ref">
4.1.2
5.1.2
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>

20
doc/styleguide/item-slide-background.html
View File

@@ -26,24 +26,34 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -57,7 +67,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-slide-background">
<span class="kss-title__ref">
4.1
5.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>

26
doc/styleguide/item-slide.html
View File

@@ -26,46 +26,56 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</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 ">4.1</span
<span class="kss-nav__ref ">5.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-anim">
<span class="kss-nav__ref kss-nav__ref-child">4.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">5.1.1</span
><span class="kss-nav__name">Animated</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">4.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">5.1.2</span
><span class="kss-nav__name">Video</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
@@ -77,7 +87,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-slide">
<span class="kss-title__ref">
4
5
<span class="kss-title__permalink-hash">
#Slide
</span>

144
doc/styleguide/item-typography-columns.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-columns">
<span class="kss-title__ref">
6.1
<span class="kss-title__permalink-hash">
#Typography.Columns
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-context.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-context">
<span class="kss-title__ref">
6.2
<span class="kss-title__permalink-hash">
#Typography.Context
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-data.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-data">
<span class="kss-title__ref">
6.3
<span class="kss-title__permalink-hash">
#Typography.Data
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-emoji.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-emoji">
<span class="kss-title__ref">
6.4
<span class="kss-title__permalink-hash">
#Typography.Emoji
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-info.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-info">
<span class="kss-title__ref">
6.5
<span class="kss-title__permalink-hash">
#Typography.Info
</span>
</span>
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>
</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>

178
doc/styleguide/item-typography-interviews.html Normal file
View File

@@ -0,0 +1,178 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-interviews">
<span class="kss-title__ref">
6.6
<span class="kss-title__permalink-hash">
#Typography.Interviews
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-intro.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-intro">
<span class="kss-title__ref">
6.7
<span class="kss-title__permalink-hash">
#Typography.Intro
</span>
</span>
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>
</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>

140
doc/styleguide/item-typography-label.html Normal file
View File

@@ -0,0 +1,140 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-label">
<span class="kss-title__ref">
6.8
<span class="kss-title__permalink-hash">
#Typography.Label
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-landings.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-landings">
<span class="kss-title__ref">
6.9
<span class="kss-title__permalink-hash">
#Typography.Landings
</span>
</span>
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>
</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>

140
doc/styleguide/item-typography-lowercase.html Normal file
View File

@@ -0,0 +1,140 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-lowercase">
<span class="kss-title__ref">
6.10
<span class="kss-title__permalink-hash">
#Typography.Lowercase
</span>
</span>
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>
</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>

150
doc/styleguide/item-typography-pull_quote.html Normal file
View File

@@ -0,0 +1,150 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-pull_quote">
<span class="kss-title__ref">
6.11
<span class="kss-title__permalink-hash">
#Typography.Pull_Quote
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-separator.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-separator">
<span class="kss-title__ref">
6.12
<span class="kss-title__permalink-hash">
#Typography.Separator
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-serif.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-serif">
<span class="kss-title__ref">
6.13
<span class="kss-title__permalink-hash">
#Typography.Serif
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-subtitle.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-subtitle">
<span class="kss-title__ref">
6.14
<span class="kss-title__permalink-hash">
#Typography.Subtitle
</span>
</span>
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>
</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>

144
doc/styleguide/item-typography-symbols.html Normal file
View File

@@ -0,0 +1,144 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-symbols">
<span class="kss-title__ref">
6.15
<span class="kss-title__permalink-hash">
#Typography.Symbols
</span>
</span>
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>
</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>

140
doc/styleguide/item-typography-uppercase.html Normal file
View File

@@ -0,0 +1,140 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography-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-typography-uppercase">
<span class="kss-title__ref">
6.16
<span class="kss-title__permalink-hash">
#Typography.Uppercase
</span>
</span>
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>
</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>

216
doc/styleguide/item-typography.html Normal file
View File

@@ -0,0 +1,216 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-columns">
<span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Columns</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-context">
<span class="kss-nav__ref ">6.2</span
><span class="kss-nav__name">Context</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-data">
<span class="kss-nav__ref ">6.3</span
><span class="kss-nav__name">Data</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-emoji">
<span class="kss-nav__ref ">6.4</span
><span class="kss-nav__name">Emoji</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-info">
<span class="kss-nav__ref ">6.5</span
><span class="kss-nav__name">Info Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-interviews">
<span class="kss-nav__ref ">6.6</span
><span class="kss-nav__name">Interviews</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-intro">
<span class="kss-nav__ref ">6.7</span
><span class="kss-nav__name">Intro</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-label">
<span class="kss-nav__ref ">6.8</span
><span class="kss-nav__name">Label</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-landings">
<span class="kss-nav__ref ">6.9</span
><span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-lowercase">
<span class="kss-nav__ref ">6.10</span
><span class="kss-nav__name">Lowercase</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-pull_quote">
<span class="kss-nav__ref ">6.11</span
><span class="kss-nav__name">Pull Quote</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-separator">
<span class="kss-nav__ref ">6.12</span
><span class="kss-nav__name">Separator</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-serif">
<span class="kss-nav__ref ">6.13</span
><span class="kss-nav__name">Serif</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-subtitle">
<span class="kss-nav__ref ">6.14</span
><span class="kss-nav__name">Subtitule</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-symbols">
<span class="kss-nav__ref ">6.15</span
><span class="kss-nav__name">Symbols</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-uppercase">
<span class="kss-nav__ref ">6.16</span
><span class="kss-nav__name">Uppercase</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography" 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-typography">
<span class="kss-title__ref">
6
<span class="kss-title__permalink-hash">
#Typography
</span>
</span>
Typography
</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>

154
doc/styleguide/section-avatars.html Normal file
View File

@@ -0,0 +1,154 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-avatars" 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-avatars">
<span class="kss-title__ref">
1
<span class="kss-title__permalink-hash">
#Avatars
</span>
</span>
Avatars
</a>
</h1>
<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>
</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>

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

@@ -26,26 +26,31 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds">
<span class="kss-nav__ref ">1.1</span
<span class="kss-nav__ref ">2.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-base.html#kssref-base-backgrounds-gradient">
<span class="kss-nav__ref kss-nav__ref-child">1.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">2.1.1</span
><span class="kss-nav__name">Gradient Backgrounds</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-backgrounds-transparent">
<span class="kss-nav__ref kss-nav__ref-child">1.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">2.1.2</span
><span class="kss-nav__name">Transparent Backgrounds</span>
</a>
</li>
@@ -53,17 +58,22 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -77,7 +87,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-base">
<span class="kss-title__ref">
1
2
<span class="kss-title__permalink-hash">
#Base
</span>
@@ -98,7 +108,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-backgrounds">
<span class="kss-title__ref">
1.1
2.1
<span class="kss-title__permalink-hash">
#Base.backgrounds
</span>
@@ -169,7 +179,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-backgrounds-gradient">
<span class="kss-title__ref">
1.1.1
2.1.1
<span class="kss-title__permalink-hash">
#Base.backgrounds.gradient
</span>
@@ -220,7 +230,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-backgrounds-transparent">
<span class="kss-title__ref">
1.1.2
2.1.2
<span class="kss-title__permalink-hash">
#Base.backgrounds.transparent
</span>

64
doc/styleguide/section-flexblock.html
View File

@@ -26,79 +26,84 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
<span class="kss-nav__ref ">2.1</span
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name"> Activity</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
<span class="kss-nav__ref ">2.2</span
<span class="kss-nav__ref ">3.2</span
><span class="kss-nav__name">Flexblocks</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
<span class="kss-nav__ref ">2.3</span
<span class="kss-nav__ref ">3.3</span
><span class="kss-nav__name">Clients</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
<span class="kss-nav__ref ">2.4</span
<span class="kss-nav__ref ">3.4</span
><span class="kss-nav__name">Features</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
<span class="kss-nav__ref ">2.5</span
<span class="kss-nav__ref ">3.5</span
><span class="kss-nav__name">Gallery</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
<span class="kss-nav__ref kss-nav__ref-child">2.5.1</span
<span class="kss-nav__ref kss-nav__ref-child">3.5.1</span
><span class="kss-nav__name">Gallery + Overflow</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
<span class="kss-nav__ref ">2.6</span
<span class="kss-nav__ref ">3.6</span
><span class="kss-nav__name">Metrics</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
<span class="kss-nav__ref ">2.7</span
<span class="kss-nav__ref ">3.7</span
><span class="kss-nav__name">Plans</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
<span class="kss-nav__ref ">2.8</span
<span class="kss-nav__ref ">3.8</span
><span class="kss-nav__name">Reasons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
<span class="kss-nav__ref ">2.9</span
<span class="kss-nav__ref ">3.9</span
><span class="kss-nav__name">Specs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
<span class="kss-nav__ref ">2.10</span
<span class="kss-nav__ref ">3.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
@@ -106,12 +111,17 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -125,7 +135,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-flexblock">
<span class="kss-title__ref">
2
3
<span class="kss-title__permalink-hash">
#Flexblock
</span>
@@ -146,7 +156,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-activity">
<span class="kss-title__ref">
2.1
3.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>
@@ -277,7 +287,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref">
2.2
3.2
<span class="kss-title__permalink-hash">
#Flexblock.Blink
</span>
@@ -431,7 +441,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref">
2.3
3.3
<span class="kss-title__permalink-hash">
#Flexblock.Clients
</span>
@@ -560,7 +570,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref">
2.4
3.4
<span class="kss-title__permalink-hash">
#Flexblock.Features
</span>
@@ -686,7 +696,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref">
2.5
3.5
<span class="kss-title__permalink-hash">
#Flexblock.Gallery
</span>
@@ -801,7 +811,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref">
2.5.1
3.5.1
<span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay
</span>
@@ -904,7 +914,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref">
2.6
3.6
<span class="kss-title__permalink-hash">
#Flexblock.Metrics
</span>
@@ -1012,7 +1022,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-plans">
<span class="kss-title__ref">
2.7
3.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>
@@ -1165,7 +1175,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-reasons">
<span class="kss-title__ref">
2.8
3.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>
@@ -1230,7 +1240,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-specs">
<span class="kss-title__ref">
2.9
3.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>
@@ -1315,7 +1325,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-steps">
<span class="kss-title__ref">
2.10
3.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>

194
doc/styleguide/section-landings.html Normal file
View File

@@ -0,0 +1,194 @@
<!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-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-landings.html">
<span class="kss-nav__ref">3</span><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" href="section-landings.html#kssref-landings-intro">
<span class="kss-nav__ref ">3.1</span
><span class="kss-nav__name">Intro</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
</ul>
</nav>
</div>
<article 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">
<span class="kss-title__ref">
3
<span class="kss-title__permalink-hash">
#Landings
</span>
</span>
Landings
</a>
</h1>
<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">
<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 228
</div>
</div>
<section id="kssref-landings-intro" 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-intro">
<span class="kss-title__ref">
3.1
<span class="kss-title__permalink-hash">
#Landings.Intro
</span>
</span>
Intro
</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">
<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 207
</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>

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

@@ -26,42 +26,47 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</span><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" href="section-layout.html#kssref-layout-alignment">
<span class="kss-nav__ref ">3.1</span
<span class="kss-nav__ref ">4.1</span
><span class="kss-nav__name">Align content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-radius">
<span class="kss-nav__ref ">3.2</span
<span class="kss-nav__ref ">4.2</span
><span class="kss-nav__name">Radius</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-shadow">
<span class="kss-nav__ref ">3.3</span
<span class="kss-nav__ref ">4.3</span
><span class="kss-nav__name">Shadows</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-sizes">
<span class="kss-nav__ref ">3.4</span
<span class="kss-nav__ref ">4.4</span
><span class="kss-nav__name">Resizing</span>
</a>
</li>
@@ -69,7 +74,12 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -83,7 +93,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-layout">
<span class="kss-title__ref">
3
4
<span class="kss-title__permalink-hash">
#Layout
</span>
@@ -104,7 +114,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-alignment">
<span class="kss-title__ref">
3.1
4.1
<span class="kss-title__permalink-hash">
#Layout.Alignment
</span>
@@ -195,7 +205,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-radius">
<span class="kss-title__ref">
3.2
4.2
<span class="kss-title__permalink-hash">
#Layout.Radius
</span>
@@ -246,7 +256,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-shadow">
<span class="kss-title__ref">
3.3
4.3
<span class="kss-title__permalink-hash">
#Layout.Shadow
</span>
@@ -297,7 +307,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-sizes">
<span class="kss-title__ref">
3.4
4.4
<span class="kss-title__permalink-hash">
#Layout.Sizes
</span>

32
doc/styleguide/section-slide.html
View File

@@ -26,46 +26,56 @@
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</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>
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">4</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">4</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">5</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 ">4.1</span
<span class="kss-nav__ref ">5.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-anim">
<span class="kss-nav__ref kss-nav__ref-child">4.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">5.1.1</span
><span class="kss-nav__name">Animated</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">4.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">5.1.2</span
><span class="kss-nav__name">Video</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
@@ -77,7 +87,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-slide">
<span class="kss-title__ref">
4
5
<span class="kss-title__permalink-hash">
#Slide
</span>
@@ -98,7 +108,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-slide-background">
<span class="kss-title__ref">
4.1
5.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>
@@ -292,7 +302,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
<span class="kss-title__ref">
4.1.1
5.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Anim
</span>
@@ -339,7 +349,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-video">
<span class="kss-title__ref">
4.1.2
5.1.2
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>

996
doc/styleguide/section-typography.html Normal file
View File

@@ -0,0 +1,996 @@
<!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-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-columns">
<span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Columns</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-context">
<span class="kss-nav__ref ">6.2</span
><span class="kss-nav__name">Context</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-data">
<span class="kss-nav__ref ">6.3</span
><span class="kss-nav__name">Data</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-emoji">
<span class="kss-nav__ref ">6.4</span
><span class="kss-nav__name">Emoji</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-info">
<span class="kss-nav__ref ">6.5</span
><span class="kss-nav__name">Info Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-interviews">
<span class="kss-nav__ref ">6.6</span
><span class="kss-nav__name">Interviews</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-intro">
<span class="kss-nav__ref ">6.7</span
><span class="kss-nav__name">Intro</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-label">
<span class="kss-nav__ref ">6.8</span
><span class="kss-nav__name">Label</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-landings">
<span class="kss-nav__ref ">6.9</span
><span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-lowercase">
<span class="kss-nav__ref ">6.10</span
><span class="kss-nav__name">Lowercase</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-pull_quote">
<span class="kss-nav__ref ">6.11</span
><span class="kss-nav__name">Pull Quote</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-separator">
<span class="kss-nav__ref ">6.12</span
><span class="kss-nav__name">Separator</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-serif">
<span class="kss-nav__ref ">6.13</span
><span class="kss-nav__name">Serif</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-subtitle">
<span class="kss-nav__ref ">6.14</span
><span class="kss-nav__name">Subtitule</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-symbols">
<span class="kss-nav__ref ">6.15</span
><span class="kss-nav__name">Symbols</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-uppercase">
<span class="kss-nav__ref ">6.16</span
><span class="kss-nav__name">Uppercase</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography" 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-typography">
<span class="kss-title__ref">
6
<span class="kss-title__permalink-hash">
#Typography
</span>
</span>
Typography
</a>
</h1>
</div>
</div>
<section id="kssref-typography-columns" 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-typography-columns">
<span class="kss-title__ref">
6.1
<span class="kss-title__permalink-hash">
#Typography.Columns
</span>
</span>
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>
</section>
<section id="kssref-typography-context" 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-typography-context">
<span class="kss-title__ref">
6.2
<span class="kss-title__permalink-hash">
#Typography.Context
</span>
</span>
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>
</section>
<section id="kssref-typography-data" 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-typography-data">
<span class="kss-title__ref">
6.3
<span class="kss-title__permalink-hash">
#Typography.Data
</span>
</span>
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>
</section>
<section id="kssref-typography-emoji" 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-typography-emoji">
<span class="kss-title__ref">
6.4
<span class="kss-title__permalink-hash">
#Typography.Emoji
</span>
</span>
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>
</section>
<section id="kssref-typography-info" 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-typography-info">
<span class="kss-title__ref">
6.5
<span class="kss-title__permalink-hash">
#Typography.Info
</span>
</span>
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>
</section>
<section id="kssref-typography-interviews" 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-typography-interviews">
<span class="kss-title__ref">
6.6
<span class="kss-title__permalink-hash">
#Typography.Interviews
</span>
</span>
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>
</section>
<section id="kssref-typography-intro" 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-typography-intro">
<span class="kss-title__ref">
6.7
<span class="kss-title__permalink-hash">
#Typography.Intro
</span>
</span>
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>
</section>
<section id="kssref-typography-label" 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-typography-label">
<span class="kss-title__ref">
6.8
<span class="kss-title__permalink-hash">
#Typography.Label
</span>
</span>
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>
</section>
<section id="kssref-typography-landings" 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-typography-landings">
<span class="kss-title__ref">
6.9
<span class="kss-title__permalink-hash">
#Typography.Landings
</span>
</span>
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>
</section>
<section id="kssref-typography-lowercase" 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-typography-lowercase">
<span class="kss-title__ref">
6.10
<span class="kss-title__permalink-hash">
#Typography.Lowercase
</span>
</span>
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>
</section>
<section id="kssref-typography-pull_quote" 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-typography-pull_quote">
<span class="kss-title__ref">
6.11
<span class="kss-title__permalink-hash">
#Typography.Pull_Quote
</span>
</span>
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>
</section>
<section id="kssref-typography-separator" 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-typography-separator">
<span class="kss-title__ref">
6.12
<span class="kss-title__permalink-hash">
#Typography.Separator
</span>
</span>
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>
</section>
<section id="kssref-typography-serif" 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-typography-serif">
<span class="kss-title__ref">
6.13
<span class="kss-title__permalink-hash">
#Typography.Serif
</span>
</span>
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>
</section>
<section id="kssref-typography-subtitle" 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-typography-subtitle">
<span class="kss-title__ref">
6.14
<span class="kss-title__permalink-hash">
#Typography.Subtitle
</span>
</span>
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>
</section>
<section id="kssref-typography-symbols" 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-typography-symbols">
<span class="kss-title__ref">
6.15
<span class="kss-title__permalink-hash">
#Typography.Symbols
</span>
</span>
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>
</section>
<section id="kssref-typography-uppercase" 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-typography-uppercase">
<span class="kss-title__ref">
6.16
<span class="kss-title__permalink-hash">
#Typography.Uppercase
</span>
</span>
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>
</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>

161
src/scss/_typography.scss
View File

@@ -203,20 +203,41 @@ h3 [class*='bg-'] {
padding: .4rem .8rem;
}
/*== 2.2. Typography Classes = .text- == */
// Intro
//
// Typography Classes = .text-
//
// Markup:
// <p class="text-intro">Create a simple web presence.</p>
//
// Styleguide Typography.Intro
.text-intro,
[class*='content-'] p {
font-size: 2.4rem;
line-height: 4rem;
}
/* -- Serif -- */
// Serif
//
// Maitree font
//
// Markup:
// <p class="text-serif">Create a simple web presence.</p>
//
// Styleguide Typography.Serif
.text-serif,
h1 span {
font-family: 'Maitree', times, serif;
}
/* -- h1,h2... Promo/Landings -- */
// Landings
//
// h1,h2... Promo/Landings
//
// Markup:
// <h1 class="text-landing">Landings</h1>
//
// Styleguide Typography.Landings
.text-landing {
letter-spacing: .4rem;
text-transform: uppercase;
@@ -226,7 +247,14 @@ h1 span {
}
}
/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
// Subtitule
//
// Subtitle (Before h1, h2)
//
// Markup:
// <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
//
// Styleguide Typography.Subtitle
.text-subtitle {
letter-spacing: .2rem;
margin-bottom: 0;
@@ -245,15 +273,34 @@ h1 span {
}
}
// Uppercase
//
// Markup:
// <p class="text-uppercase">Create a simple web presence.</p>
//
// Styleguide Typography.Uppercase
.text-uppercase {
text-transform: uppercase;
}
// Lowercase
//
// Markup:
// <p class="text-lowercase">Create a simple web presence.</p>
//
// Styleguide Typography.Lowercase
.text-lowercase {
text-transform: lowercase;
}
/* -- Emoji (you'll love this) -- */
// Emoji
//
// You'll love this
//
// Markup:
// <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
//
// Styleguide Typography.Emoji
.text-emoji {
font-size: 6.8rem;
line-height: 8.8rem;
@@ -264,7 +311,14 @@ h1 span {
}
}
/* -- Numbers (results, sales... 23,478,289 iphones) -- */
// Data
//
// Numbers (results, sales... )-
//
// Markup:
// <p class="text-data">23,478,289</p>
//
// Styleguide Typography.Data
.text-data {
font-size: 6.4rem;
line-height: 8rem;
@@ -276,6 +330,12 @@ h1 span {
}
}
// Label
//
// Markup:
// <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
//
// Styleguide Typography.Label
.text-label {
display: inline-block;
font-weight: 600;
@@ -283,8 +343,15 @@ h1 span {
width: 12.8rem;
}
/* -- Magazine Two Columns -- */
@media (min-width: 768px) {
// Columns
//
// Magazine Two Columns
//
// Markup:
// <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
//
// Styleguide Typography.Columns
@media (min-width: 768px) {
.text-cols {
column-count: 2;
column-gap: 4.8rem;
@@ -306,7 +373,14 @@ h1 span {
text-transform: uppercase;
}
/* -- Heading with border -- */
// Context
//
// Heading with border
//
// Markup:
// <p class="text-context">Why WebSlides?</p>
//
// Styleguide Typography.Context
.text-context {
position: relative;
@@ -327,13 +401,28 @@ h1 span {
}
}
/* -- Separator/Symbols (stars ***...) -- */
// Symbols
//
// Stars * * *
//
// Markup:
// <p class="text-symbols">* * *</p>
//
// Styleguide Typography.Symbols
.text-symbols {
font-weight: 600;
letter-spacing: .8rem;
text-align: center;
}
// Separator
//
// Stars * * *
//
// Markup:
// <p class="text-separator">Separator</p>
//
// Styleguide Typography.Separator
.text-separator {
margin-top: 2.4rem;
@@ -357,7 +446,17 @@ h1 span {
}
}
/* -- Pull Quote (Right/Left) -- */
// Pull Quote
//
// Pull Quote Right/Left
//
// Markup:
// <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>
//
// Styleguide Typography.Pull_Quote
[class*='text-pull'] {
font-size: 2.4rem;
font-weight: 400;
@@ -402,12 +501,31 @@ figure[class*='text-pull-'] {
padding-top: 0;
}
/* -- Interviews (Questions & Answers) --- */
/* -- <dl class="text-interview">
<dt>name</dt>
<dd><p>question or answer</p>
</dd>
--- */
// Interviews
//
// Questions & Answers
//
// Markup:
// <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>
//
// Styleguide Typography.Interviews
.text-interview dt {
font-weight: 600;
margin-bottom: 0;
@@ -425,7 +543,14 @@ figure[class*='text-pull-'] {
}
/* -- Info Messages (error, warning, success... -- */
// Info Messages
//
// Error, warning, success...
//
// Markup:
// <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
//
// Styleguide Typography.Info
.text-info {
font-size: 1.6rem;
line-height: 2.4rem;

13
src/scss/modules/_avatars.scss
View File

@@ -2,6 +2,19 @@
12. Avatars - uifaces.com
=========================================== */
// Avatars
//
// You'll love this
//
// Markup:
// <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" />
//
// Styleguide Avatars
cite img,
img[class*='avatar-'] {
display: inline-block;