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

kss - buttons, forms and grid

Browse Source
This commit is contained in:
Luis Sacristán
2017-08-31 20:06:52 +02:00
parent 4b0258034e
commit aa40062199
69 changed files with 2915 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
doc/styleguide/index.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

25
doc/styleguide/item-avatars.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

25
doc/styleguide/item-badgets.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

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

@@ -71,29 +71,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

44
doc/styleguide/item-buttons.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -101,22 +116,35 @@
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<a href="#" class="button">Download</a>
<a href="#" class="button ">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.radius
</div>
<div class="kss-modifier__description kss-style">
Rounded corners
</div>
<div class="kss-modifier__example">
<a href="#" class="button radius">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button&quot;&gt;Download&lt;/a&gt;</code></pre>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">

25
doc/styleguide/item-cards.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

175
doc/styleguide/item-elements-try.html Normal file
View File

@@ -0,0 +1,175 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-elements-try" class="kss-section kss-section--depth-2 is-fullscreen">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-elements-try">
<span class="kss-title__ref">
6.1
<span class="kss-title__permalink-hash">
#Elements.Try
</span>
</span>
Try
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<a href="#" class="try">Try element</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 96
</div>
</div>
</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
doc/styleguide/item-elements.html Normal file
View File

@@ -0,0 +1,161 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html#kssref-elements-try">
<span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Try</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-elements" 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-elements">
<span class="kss-title__ref">
6
<span class="kss-title__permalink-hash">
#Elements
</span>
</span>
Elements
</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>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-activity">
<span class="kss-title__ref">
6.1
7.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref">
6.2
7.2
<span class="kss-title__permalink-hash">
#Flexblock.Blink
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref">
6.3
7.3
<span class="kss-title__permalink-hash">
#Flexblock.Clients
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref">
6.4
7.4
<span class="kss-title__permalink-hash">
#Flexblock.Features
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref">
6.5.1
7.5.1
<span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref">
6.5
7.5
<span class="kss-title__permalink-hash">
#Flexblock.Gallery
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref">
6.6
7.6
<span class="kss-title__permalink-hash">
#Flexblock.Metrics
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-plans">
<span class="kss-title__ref">
6.7
7.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-reasons">
<span class="kss-title__ref">
6.8
7.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-specs">
<span class="kss-title__ref">
6.9
7.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-steps">
<span class="kss-title__ref">
6.10
7.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>

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

@@ -51,97 +51,112 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</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 ">6.1</span
<span class="kss-nav__ref ">7.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 ">6.2</span
<span class="kss-nav__ref ">7.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 ">6.3</span
<span class="kss-nav__ref ">7.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 ">6.4</span
<span class="kss-nav__ref ">7.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 ">6.5</span
<span class="kss-nav__ref ">7.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">6.5.1</span
<span class="kss-nav__ref kss-nav__ref-child">7.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 ">6.6</span
<span class="kss-nav__ref ">7.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 ">6.7</span
<span class="kss-nav__ref ">7.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 ">6.8</span
<span class="kss-nav__ref ">7.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 ">6.9</span
<span class="kss-nav__ref ">7.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 ">6.10</span
<span class="kss-nav__ref ">7.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -155,7 +170,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-flexblock">
<span class="kss-title__ref">
6
7
<span class="kss-title__permalink-hash">
#Flexblock
</span>

181
doc/styleguide/item-forms-user.html Normal file
View File

@@ -0,0 +1,181 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-forms-user" 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-forms-user">
<span class="kss-title__ref">
8.1
<span class="kss-title__permalink-hash">
#Forms.User
</span>
</span>
User
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="user">
<input type="text" placeholder="Username" />
<button>Log in</button>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
&lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 139
</div>
</div>
</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
doc/styleguide/item-forms.html Normal file
View File

@@ -0,0 +1,161 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-user">
<span class="kss-nav__ref ">8.1</span
><span class="kss-nav__name">User</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-forms" 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-forms">
<span class="kss-title__ref">
8
<span class="kss-title__permalink-hash">
#Forms
</span>
</span>
Forms
</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>

223
doc/styleguide/item-grid.html Normal file
View File

@@ -0,0 +1,223 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-grid" 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-grid">
<span class="kss-title__ref">
9
<span class="kss-title__permalink-hash">
#Grid
</span>
</span>
Grid
</a>
</h1>
<div class="kss-description">
<p>Basic Grid (Flexible blocks)
Auto-fill &amp; Equal height</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div class="grid ">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.vertical-align
</div>
<div class="kss-modifier__description kss-style">
Vertical align
</div>
<div class="kss-modifier__example">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_grid.scss</code>, line 1
</div>
</div>
</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>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-alignment">
<span class="kss-title__ref">
7.1
10.1
<span class="kss-title__permalink-hash">
#Layout.Alignment
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-radius">
<span class="kss-title__ref">
7.2
10.2
<span class="kss-title__permalink-hash">
#Layout.Radius
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-shadow">
<span class="kss-title__ref">
7.3
10.3
<span class="kss-title__permalink-hash">
#Layout.Shadow
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-sizes">
<span class="kss-title__ref">
7.4
10.4
<span class="kss-title__permalink-hash">
#Layout.Sizes
</span>

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

@@ -51,37 +51,52 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</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 ">7.1</span
<span class="kss-nav__ref ">10.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 ">7.2</span
<span class="kss-nav__ref ">10.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 ">7.3</span
<span class="kss-nav__ref ">10.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 ">7.4</span
<span class="kss-nav__ref ">10.4</span
><span class="kss-nav__name">Resizing</span>
</a>
</li>
@@ -89,17 +104,17 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -113,7 +128,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-layout">
<span class="kss-title__ref">
7
10
<span class="kss-title__permalink-hash">
#Layout
</span>

27
doc/styleguide/item-screenshots.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-screenshots">
<span class="kss-title__ref">
8
11
<span class="kss-title__permalink-hash">
#Screenshots
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
<span class="kss-title__ref">
9.1.1
12.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Anim
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-video">
<span class="kss-title__ref">
9.1.2
12.1.2
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>

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

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-slide-background">
<span class="kss-title__ref">
9.1
12.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>

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

@@ -51,41 +51,56 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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 ">9.1</span
<span class="kss-nav__ref ">12.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">9.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">12.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">9.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">12.1.2</span
><span class="kss-nav__name">Video</span>
</a>
</li>
@@ -93,7 +108,7 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -107,7 +122,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-slide">
<span class="kss-title__ref">
9
12
<span class="kss-title__permalink-hash">
#Slide
</span>

27
doc/styleguide/item-typography-columns.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-columns">
<span class="kss-title__ref">
10.1
13.1
<span class="kss-title__permalink-hash">
#Typography.Columns
</span>

27
doc/styleguide/item-typography-context.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-context">
<span class="kss-title__ref">
10.2
13.2
<span class="kss-title__permalink-hash">
#Typography.Context
</span>

27
doc/styleguide/item-typography-data.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-data">
<span class="kss-title__ref">
10.3
13.3
<span class="kss-title__permalink-hash">
#Typography.Data
</span>

27
doc/styleguide/item-typography-emoji.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-emoji">
<span class="kss-title__ref">
10.4
13.4
<span class="kss-title__permalink-hash">
#Typography.Emoji
</span>

27
doc/styleguide/item-typography-info.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-info">
<span class="kss-title__ref">
10.5
13.5
<span class="kss-title__permalink-hash">
#Typography.Info
</span>

27
doc/styleguide/item-typography-interviews.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-interviews">
<span class="kss-title__ref">
10.6
13.6
<span class="kss-title__permalink-hash">
#Typography.Interviews
</span>

27
doc/styleguide/item-typography-intro.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-intro">
<span class="kss-title__ref">
10.7
13.7
<span class="kss-title__permalink-hash">
#Typography.Intro
</span>

27
doc/styleguide/item-typography-label.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-label">
<span class="kss-title__ref">
10.8
13.8
<span class="kss-title__permalink-hash">
#Typography.Label
</span>

27
doc/styleguide/item-typography-landings.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-landings">
<span class="kss-title__ref">
10.9
13.9
<span class="kss-title__permalink-hash">
#Typography.Landings
</span>

27
doc/styleguide/item-typography-lowercase.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-lowercase">
<span class="kss-title__ref">
10.10
13.10
<span class="kss-title__permalink-hash">
#Typography.Lowercase
</span>

27
doc/styleguide/item-typography-pull_quote.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-pull_quote">
<span class="kss-title__ref">
10.11
13.11
<span class="kss-title__permalink-hash">
#Typography.Pull_Quote
</span>

27
doc/styleguide/item-typography-separator.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-separator">
<span class="kss-title__ref">
10.12
13.12
<span class="kss-title__permalink-hash">
#Typography.Separator
</span>

27
doc/styleguide/item-typography-serif.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-serif">
<span class="kss-title__ref">
10.13
13.13
<span class="kss-title__permalink-hash">
#Typography.Serif
</span>

27
doc/styleguide/item-typography-subtitle.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-subtitle">
<span class="kss-title__ref">
10.14
13.14
<span class="kss-title__permalink-hash">
#Typography.Subtitle
</span>

27
doc/styleguide/item-typography-symbols.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-symbols">
<span class="kss-title__ref">
10.15
13.15
<span class="kss-title__permalink-hash">
#Typography.Symbols
</span>

27
doc/styleguide/item-typography-uppercase.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-uppercase">
<span class="kss-title__ref">
10.16
13.16
<span class="kss-title__permalink-hash">
#Typography.Uppercase
</span>

59
doc/styleguide/item-typography.html
View File

@@ -51,124 +51,139 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</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 ">10.1</span
<span class="kss-nav__ref ">13.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 ">10.2</span
<span class="kss-nav__ref ">13.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 ">10.3</span
<span class="kss-nav__ref ">13.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 ">10.4</span
<span class="kss-nav__ref ">13.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 ">10.5</span
<span class="kss-nav__ref ">13.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 ">10.6</span
<span class="kss-nav__ref ">13.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 ">10.7</span
<span class="kss-nav__ref ">13.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 ">10.8</span
<span class="kss-nav__ref ">13.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 ">10.9</span
<span class="kss-nav__ref ">13.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 ">10.10</span
<span class="kss-nav__ref ">13.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 ">10.11</span
<span class="kss-nav__ref ">13.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 ">10.12</span
<span class="kss-nav__ref ">13.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 ">10.13</span
<span class="kss-nav__ref ">13.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 ">10.14</span
<span class="kss-nav__ref ">13.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 ">10.15</span
<span class="kss-nav__ref ">13.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 ">10.16</span
<span class="kss-nav__ref ">13.16</span
><span class="kss-nav__name">Uppercase</span>
</a>
</li>
@@ -185,7 +200,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-typography">
<span class="kss-title__ref">
10
13
<span class="kss-title__permalink-hash">
#Typography
</span>

25
doc/styleguide/section-avatars.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

25
doc/styleguide/section-badgets.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

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

@@ -71,29 +71,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

44
doc/styleguide/section-buttons.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -101,22 +116,35 @@
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<a href="#" class="button">Download</a>
<a href="#" class="button ">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.radius
</div>
<div class="kss-modifier__description kss-style">
Rounded corners
</div>
<div class="kss-modifier__example">
<a href="#" class="button radius">Download</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button&quot;&gt;Download&lt;/a&gt;</code></pre>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">

25
doc/styleguide/section-cards.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>

204
doc/styleguide/section-elements.html Normal file
View File

@@ -0,0 +1,204 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html#kssref-elements-try">
<span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Try</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-elements" 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-elements">
<span class="kss-title__ref">
6
<span class="kss-title__permalink-hash">
#Elements
</span>
</span>
Elements
</a>
</h1>
</div>
</div>
<section id="kssref-elements-try" 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-elements-try">
<span class="kss-title__ref">
6.1
<span class="kss-title__permalink-hash">
#Elements.Try
</span>
</span>
Try
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<a href="#" class="try">Try element</a>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;try&quot;&gt;Try element&lt;/a&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 96
</div>
</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>

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

@@ -51,97 +51,112 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</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 ">6.1</span
<span class="kss-nav__ref ">7.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 ">6.2</span
<span class="kss-nav__ref ">7.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 ">6.3</span
<span class="kss-nav__ref ">7.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 ">6.4</span
<span class="kss-nav__ref ">7.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 ">6.5</span
<span class="kss-nav__ref ">7.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">6.5.1</span
<span class="kss-nav__ref kss-nav__ref-child">7.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 ">6.6</span
<span class="kss-nav__ref ">7.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 ">6.7</span
<span class="kss-nav__ref ">7.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 ">6.8</span
<span class="kss-nav__ref ">7.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 ">6.9</span
<span class="kss-nav__ref ">7.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 ">6.10</span
<span class="kss-nav__ref ">7.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -155,7 +170,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-flexblock">
<span class="kss-title__ref">
6
7
<span class="kss-title__permalink-hash">
#Flexblock
</span>
@@ -176,7 +191,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-activity">
<span class="kss-title__ref">
6.1
7.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>
@@ -307,7 +322,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref">
6.2
7.2
<span class="kss-title__permalink-hash">
#Flexblock.Blink
</span>
@@ -461,7 +476,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref">
6.3
7.3
<span class="kss-title__permalink-hash">
#Flexblock.Clients
</span>
@@ -590,7 +605,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref">
6.4
7.4
<span class="kss-title__permalink-hash">
#Flexblock.Features
</span>
@@ -716,7 +731,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref">
6.5
7.5
<span class="kss-title__permalink-hash">
#Flexblock.Gallery
</span>
@@ -831,7 +846,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref">
6.5.1
7.5.1
<span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay
</span>
@@ -934,7 +949,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref">
6.6
7.6
<span class="kss-title__permalink-hash">
#Flexblock.Metrics
</span>
@@ -1042,7 +1057,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-plans">
<span class="kss-title__ref">
6.7
7.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>
@@ -1195,7 +1210,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-reasons">
<span class="kss-title__ref">
6.8
7.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>
@@ -1260,7 +1275,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-specs">
<span class="kss-title__ref">
6.9
7.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>
@@ -1345,7 +1360,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-steps">
<span class="kss-title__ref">
6.10
7.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>

210
doc/styleguide/section-forms.html Normal file
View File

@@ -0,0 +1,210 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-user">
<span class="kss-nav__ref ">8.1</span
><span class="kss-nav__name">User</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-forms" 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-forms">
<span class="kss-title__ref">
8
<span class="kss-title__permalink-hash">
#Forms
</span>
</span>
Forms
</a>
</h1>
</div>
</div>
<section id="kssref-forms-user" 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-forms-user">
<span class="kss-title__ref">
8.1
<span class="kss-title__permalink-hash">
#Forms.User
</span>
</span>
User
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="user">
<input type="text" placeholder="Username" />
<button>Log in</button>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
&lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
&lt;button&gt;Log in&lt;/button&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_form.scss</code>, line 139
</div>
</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>

223
doc/styleguide/section-grid.html Normal file
View File

@@ -0,0 +1,223 @@
<!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-badgets.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-cards.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">12</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">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-grid" 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-grid">
<span class="kss-title__ref">
9
<span class="kss-title__permalink-hash">
#Grid
</span>
</span>
Grid
</a>
</h1>
<div class="kss-description">
<p>Basic Grid (Flexible blocks)
Auto-fill &amp; Equal height</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div class="grid ">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.vertical-align
</div>
<div class="kss-modifier__description kss-style">
Vertical align
</div>
<div class="kss-modifier__example">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
<p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<div class="column">
<h3><strong>WebSlides is the clean</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
</div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;column&quot;&gt;
&lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
&lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_grid.scss</code>, line 1
</div>
</div>
</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>

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

@@ -51,37 +51,52 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</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 ">7.1</span
<span class="kss-nav__ref ">10.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 ">7.2</span
<span class="kss-nav__ref ">10.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 ">7.3</span
<span class="kss-nav__ref ">10.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 ">7.4</span
<span class="kss-nav__ref ">10.4</span
><span class="kss-nav__name">Resizing</span>
</a>
</li>
@@ -89,17 +104,17 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -113,7 +128,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-layout">
<span class="kss-title__ref">
7
10
<span class="kss-title__permalink-hash">
#Layout
</span>
@@ -134,7 +149,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-alignment">
<span class="kss-title__ref">
7.1
10.1
<span class="kss-title__permalink-hash">
#Layout.Alignment
</span>
@@ -225,7 +240,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-radius">
<span class="kss-title__ref">
7.2
10.2
<span class="kss-title__permalink-hash">
#Layout.Radius
</span>
@@ -276,7 +291,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-shadow">
<span class="kss-title__ref">
7.3
10.3
<span class="kss-title__permalink-hash">
#Layout.Shadow
</span>
@@ -327,7 +342,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-layout-sizes">
<span class="kss-title__ref">
7.4
10.4
<span class="kss-title__permalink-hash">
#Layout.Sizes
</span>

27
doc/styleguide/section-screenshots.html
View File

@@ -51,29 +51,44 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -87,7 +102,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-screenshots">
<span class="kss-title__ref">
8
11
<span class="kss-title__permalink-hash">
#Screenshots
</span>

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

@@ -51,41 +51,56 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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 ">9.1</span
<span class="kss-nav__ref ">12.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">9.1.1</span
<span class="kss-nav__ref kss-nav__ref-child">12.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">9.1.2</span
<span class="kss-nav__ref kss-nav__ref-child">12.1.2</span
><span class="kss-nav__name">Video</span>
</a>
</li>
@@ -93,7 +108,7 @@
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
@@ -107,7 +122,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-slide">
<span class="kss-title__ref">
9
12
<span class="kss-title__permalink-hash">
#Slide
</span>
@@ -128,7 +143,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-slide-background">
<span class="kss-title__ref">
9.1
12.1
<span class="kss-title__permalink-hash">
#Slide.Background
</span>
@@ -322,7 +337,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
<span class="kss-title__ref">
9.1.1
12.1.1
<span class="kss-title__permalink-hash">
#Slide.Background.Anim
</span>
@@ -369,7 +384,7 @@
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-slide-background-video">
<span class="kss-title__ref">
9.1.2
12.1.2
<span class="kss-title__permalink-hash">
#Slide.Background.Video
</span>

91
doc/styleguide/section-typography.html
View File

@@ -51,124 +51,139 @@
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-elements.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Flexblock</span>
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Forms</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-grid.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Grid</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">7</span><span class="kss-nav__name">Layout</span>
<span class="kss-nav__ref">10</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">8</span><span class="kss-nav__name">Screenshots</span>
<span class="kss-nav__ref">11</span><span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">9</span><span class="kss-nav__name">Slide</span>
<span class="kss-nav__ref">12</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">10</span><span class="kss-nav__name">Typography</span>
<span class="kss-nav__ref">13</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 ">10.1</span
<span class="kss-nav__ref ">13.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 ">10.2</span
<span class="kss-nav__ref ">13.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 ">10.3</span
<span class="kss-nav__ref ">13.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 ">10.4</span
<span class="kss-nav__ref ">13.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 ">10.5</span
<span class="kss-nav__ref ">13.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 ">10.6</span
<span class="kss-nav__ref ">13.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 ">10.7</span
<span class="kss-nav__ref ">13.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 ">10.8</span
<span class="kss-nav__ref ">13.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 ">10.9</span
<span class="kss-nav__ref ">13.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 ">10.10</span
<span class="kss-nav__ref ">13.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 ">10.11</span
<span class="kss-nav__ref ">13.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 ">10.12</span
<span class="kss-nav__ref ">13.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 ">10.13</span
<span class="kss-nav__ref ">13.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 ">10.14</span
<span class="kss-nav__ref ">13.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 ">10.15</span
<span class="kss-nav__ref ">13.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 ">10.16</span
<span class="kss-nav__ref ">13.16</span
><span class="kss-nav__name">Uppercase</span>
</a>
</li>
@@ -185,7 +200,7 @@
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-typography">
<span class="kss-title__ref">
10
13
<span class="kss-title__permalink-hash">
#Typography
</span>
@@ -206,7 +221,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-columns">
<span class="kss-title__ref">
10.1
13.1
<span class="kss-title__permalink-hash">
#Typography.Columns
</span>
@@ -253,7 +268,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-context">
<span class="kss-title__ref">
10.2
13.2
<span class="kss-title__permalink-hash">
#Typography.Context
</span>
@@ -300,7 +315,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-data">
<span class="kss-title__ref">
10.3
13.3
<span class="kss-title__permalink-hash">
#Typography.Data
</span>
@@ -347,7 +362,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-emoji">
<span class="kss-title__ref">
10.4
13.4
<span class="kss-title__permalink-hash">
#Typography.Emoji
</span>
@@ -394,7 +409,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-info">
<span class="kss-title__ref">
10.5
13.5
<span class="kss-title__permalink-hash">
#Typography.Info
</span>
@@ -441,7 +456,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-interviews">
<span class="kss-title__ref">
10.6
13.6
<span class="kss-title__permalink-hash">
#Typography.Interviews
</span>
@@ -522,7 +537,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-intro">
<span class="kss-title__ref">
10.7
13.7
<span class="kss-title__permalink-hash">
#Typography.Intro
</span>
@@ -569,7 +584,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-label">
<span class="kss-title__ref">
10.8
13.8
<span class="kss-title__permalink-hash">
#Typography.Label
</span>
@@ -612,7 +627,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-landings">
<span class="kss-title__ref">
10.9
13.9
<span class="kss-title__permalink-hash">
#Typography.Landings
</span>
@@ -659,7 +674,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-lowercase">
<span class="kss-title__ref">
10.10
13.10
<span class="kss-title__permalink-hash">
#Typography.Lowercase
</span>
@@ -702,7 +717,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-pull_quote">
<span class="kss-title__ref">
10.11
13.11
<span class="kss-title__permalink-hash">
#Typography.Pull_Quote
</span>
@@ -755,7 +770,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-separator">
<span class="kss-title__ref">
10.12
13.12
<span class="kss-title__permalink-hash">
#Typography.Separator
</span>
@@ -802,7 +817,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-serif">
<span class="kss-title__ref">
10.13
13.13
<span class="kss-title__permalink-hash">
#Typography.Serif
</span>
@@ -849,7 +864,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-subtitle">
<span class="kss-title__ref">
10.14
13.14
<span class="kss-title__permalink-hash">
#Typography.Subtitle
</span>
@@ -896,7 +911,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-symbols">
<span class="kss-title__ref">
10.15
13.15
<span class="kss-title__permalink-hash">
#Typography.Symbols
</span>
@@ -943,7 +958,7 @@
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-uppercase">
<span class="kss-title__ref">
10.16
13.16
<span class="kss-title__permalink-hash">
#Typography.Uppercase
</span>

4
src/scss/modules/_button.scss
View File

@@ -1,7 +1,9 @@
// Buttons
//
// Markup:
// <a href="#" class="button">Download</a>
// <a href="#" class="button {{modifier_class}}">Download</a>
//
// .radius - Rounded corners
//
// Styleguide Buttons
[class*='button'] {

15
src/scss/modules/_form.scss
View File

@@ -93,6 +93,12 @@ input[type='submit'] {
width: 50%;
}
// Try
//
// Markup:
// <a href="#" class="try">Try element</a>
//
// Styleguide Elements.Try
.try {
display: block;
font-size: 1.6rem;
@@ -130,6 +136,15 @@ button:disabled:hover {
cursor: not-allowed;
}
// User
//
// Markup:
// <div class="user">
// <input type="text" placeholder="Username" />
// <button>Log in</button>
// </div>
//
// Styleguide Forms.User
.user {
input {
margin-bottom: 0;

24
src/scss/modules/_grid.scss
View File

@@ -1,6 +1,24 @@
/*=== 1.4. Basic Grid (Flexible blocks)
Auto-fill & Equal height === */
// Grid
//
// Basic Grid (Flexible blocks)
// Auto-fill & Equal height
//
// Markup:
// <div class="grid {{modifier_class}}">
// <div class="column">
// <h3><strong>WebSlides is really easy</strong></h3>
// <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
// <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
// </div>
// <div class="column">
// <h3><strong>WebSlides is the clean</strong></h3>
// <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
// </div>
// </div>
//
// .vertical-align - Vertical align
//
// Styleguide Grid
.grid {
clear: both;
display: flex;