mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-20 11:51:40 +02:00
969 lines
33 KiB
HTML
969 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WebSlides - Documentation 1.5.0</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="kss-node">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<link rel="stylesheet" href="kss-assets/kss.css">
|
|
<link rel="stylesheet" href="../../static/css/webslides.css">
|
|
|
|
</head>
|
|
<body id="kss-node" >
|
|
<header class="kss-header">
|
|
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
|
|
<nav class="kss-header-nav">
|
|
<ul>
|
|
<li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
|
|
<li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
|
|
<li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="kss-sub-header">
|
|
<p>WebSlides - Documentation 1.5.0</p>
|
|
</div>
|
|
<div class="kss-container">
|
|
<div class="kss-sidebar kss-style">
|
|
<nav class="kss-nav">
|
|
<ul class="kss-nav__menu">
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link " href="./">
|
|
<span class="kss-nav__name">Introduction</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-forms.html">
|
|
<span class="kss-nav__name">Forms</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
|
|
<span class="kss-nav__name">Landings and portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-layout.html">
|
|
<span class="kss-nav__name">Layout</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-longforms.html">
|
|
<span class="kss-nav__name">Longform</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-media.html">
|
|
<span class="kss-nav__name">Media</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
|
|
<span class="kss-nav__name">Multipurpose blocks</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-typography.html">
|
|
<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 kss-nav__ref " href="section-typography.html#kssref-typography-columns">
|
|
<span class="kss-nav__name">Columns</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-context">
|
|
<span class="kss-nav__name">Context</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-data">
|
|
<span class="kss-nav__name">Data</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-emoji">
|
|
<span class="kss-nav__name">Emoji</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-info">
|
|
<span class="kss-nav__name">Info Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-intro">
|
|
<span class="kss-nav__name">Intro</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-label">
|
|
<span class="kss-nav__name">Label</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-landings">
|
|
<span class="kss-nav__name">Landings</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-lowercase">
|
|
<span class="kss-nav__name">Lowercase</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-pull_quote">
|
|
<span class="kss-nav__name">Pulls</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-separator">
|
|
<span class="kss-nav__name">Separator</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-serif">
|
|
<span class="kss-nav__name">Serif</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-shadow">
|
|
<span class="kss-nav__name">Shadows</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-subtitle">
|
|
<span class="kss-nav__name">Subtitule</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-symbols">
|
|
<span class="kss-nav__name">Symbols</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-uppercase">
|
|
<span class="kss-nav__name">Uppercase</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div role="main" class="kss-main">
|
|
|
|
<div id="kssref-typography" class="kss-section kss-section--depth-1 ">
|
|
|
|
<div class="kss-style">
|
|
<h1 class="kss-title kss-title--level-1">
|
|
<a class="kss-title__permalink" href="#kssref-typography">
|
|
Typography
|
|
</a>
|
|
</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="kssref-typography-columns" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-columns">
|
|
Columns
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Magazine Two Columns</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=65" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 364
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-context" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-context">
|
|
Context
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Heading with border</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=64" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-context">Why WebSlides?</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-context">Why WebSlides?</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 397
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-data" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-data">
|
|
Data
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Numbers (results, sales... )-</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=63" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-data">23,478,289</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-data">23,478,289</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 326
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-emoji">
|
|
Emoji
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>You'll love this</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/keynote#slide=40" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-emoji">😀😁😂😅😉😋😎😍</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-emoji">😀😁😂😅😉😋😎😍</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 305
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-info" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-info">
|
|
Info Messages
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Error, warning, success...</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-info">Psychiatrists have long debated whether it really exists.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 579
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-intro" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-intro">
|
|
Intro
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Typography Classes = .text-</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=2" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-intro">Create a simple web presence.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-intro">Create a simple web presence.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 206
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-label" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-label">
|
|
Label
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=66" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 348
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-landings" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-landings">
|
|
Landings
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>h1,h2... Promo/Landings</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=35" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<h1 class="text-landing">Landings</h1>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><h1 class="text-landing">Landings</h1></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 236
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-lowercase">
|
|
Lowercase
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-lowercase">Create a simple web presence.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-lowercase">Create a simple web presence.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 295
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-pull_quote">
|
|
Pulls
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Pull Quote Right/Left</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=69" title="Pull right" target="_blank">Pull right</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
|
|
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
|
|
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
|
|
<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
|
|
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
|
|
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
|
|
<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 476
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-separator" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-separator">
|
|
Separator
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Stars <em> </em> *</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-separator">Separator</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-separator">Separator</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 445
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-serif" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-serif">
|
|
Serif
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Maitree font</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-serif">Create a simple web presence.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-serif">Create a simple web presence.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 223
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-shadow" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-shadow">
|
|
Shadows
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Drops a shadow under the layer. The layer containing the shadow has to have a solid background</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=55" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="bg-white shadow">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
|
|
</div>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="bg-white shadow">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
|
|
</div></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_base.scss</code>, line 73
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-subtitle">
|
|
Subtitule
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Subtitle (Before h1, h2)</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=58" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 256
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-symbols" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-symbols">
|
|
Symbols
|
|
</a>
|
|
</h2>
|
|
|
|
<div class="kss-description">
|
|
<p>Stars <em> </em> *</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__heading kss-style">
|
|
Demos
|
|
</div>
|
|
<ul class="kss__demos">
|
|
<li>
|
|
<a href="https://webslides.tv/demos/classes#slide=69" title="Example" target="_blank">Example</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-symbols">* * *</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-symbols">* * *</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 428
|
|
</div>
|
|
|
|
</div>
|
|
<div id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 ">
|
|
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-typography-uppercase">
|
|
Uppercase
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example
|
|
</div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="text-uppercase">Create a simple web presence.</p>
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="text-uppercase">Create a simple web presence.</p></code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_typography.scss</code>, line 285
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SCRIPTS -->
|
|
<script src="kss-assets/kss.js"></script>
|
|
<script src="kss-assets/scrollspy.js"></script>
|
|
<script src="kss-assets/prettify.js"></script>
|
|
<script src="kss-assets/kss-fullscreen.js"></script>
|
|
<script src="kss-assets/kss-guides.js"></script>
|
|
<script src="kss-assets/kss-markup.js"></script>
|
|
<script>
|
|
prettyPrint();
|
|
var spy = new ScrollSpy('#kss-node', {
|
|
nav: '.kss-nav__menu-child > li > a',
|
|
className: 'is-in-viewport'
|
|
});
|
|
var kssFullScreen = new KssFullScreen({
|
|
idPrefix: 'kss-fullscreen-',
|
|
bodyClass: 'kss-fullscreen-mode',
|
|
elementClass: 'is-fullscreen'
|
|
});
|
|
var kssGuides = new KssGuides({
|
|
bodyClass: 'kss-guides-mode'
|
|
});
|
|
var kssMarkup = new KssMarkup({
|
|
bodyClass: 'kss-markup-mode',
|
|
detailsClass: 'kss-markup'
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
|
</body>
|
|
</html>
|