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

kss - Fixing menu links

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-03 20:48:25 +02:00
parent bd7468de4e
commit 69472ef94b
119 changed files with 8087 additions and 5341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,890 @@
<!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-architecture.html">
<span class="kss-nav__name">Architecture</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-contents.html">
<span class="kss-nav__name">Contents</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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 346
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-context">Why WebSlides?</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 376
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-data">23,478,289</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 314
</div>
</div>
<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&#39;ll love this</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-emoji">😀😁😂😅😉😋😎😍</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 296
</div>
</div>
<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">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 546
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-intro">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 206
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 333
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<h1 class="text-landing">Landings</h1>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 233
</div>
</div>
<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">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 286
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 449
</div>
</div>
<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">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 418
</div>
</div>
<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">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 220
</div>
</div>
<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__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">&lt;div class&#x3D;&quot;bg-white shadow&quot;&gt;
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.
&lt;/div&gt;</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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 250
</div>
</div>
<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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-symbols">* * *</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 404
</div>
</div>
<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">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 276
</div>
</div>
</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>