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

kss - Header and sidebar styles

Browse Source
This commit is contained in:
Luis Sacristán
2017-09-27 23:31:52 +02:00
parent eb9a9bf027
commit bbdab5ca59
104 changed files with 18955 additions and 17606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</title>
<title>WebSlides - Documentation 1.5.0</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
@@ -13,476 +13,457 @@
</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-blocks.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Blocks</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-buttons.html">
<span class="kss-nav__ref">5</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">6</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">7</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">8</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">9</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">10</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">11</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 ">11.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 ">11.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 ">11.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 ">11.4</span
><span class="kss-nav__name">Resizing</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-longform.html">
<span class="kss-nav__ref">12</span><span class="kss-nav__name">Longform</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-media.html">
<span class="kss-nav__ref">13</span><span class="kss-nav__name">Media</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-navigation.html">
<span class="kss-nav__ref">14</span><span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-screenshots.html">
<span class="kss-nav__ref">15</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">16</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slides.html">
<span class="kss-nav__ref">17</span><span class="kss-nav__name">fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slides.html">
<span class="kss-nav__ref">17</span><span class="kss-nav__name">Slides</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">18</span><span class="kss-nav__name">Typography</span>
</a>
</li>
<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">WebSlides</a></li>
<li><a href="./" target="_blank">Documentation</a></li>
<li><a href=".../demos/index.html" target="_blank">Demos</a></li>
</ul>
</nav>
</header>
<div class="kss-sub-header">
<p>WebSlides - Documentation 1.5.0</p>
</div>
<article role="main" class="kss-main">
<div id="kssref-layout" 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-layout">
<span class="kss-title__ref">
11
<span class="kss-title__permalink-hash">
#Layout
</span>
</span>
Layout
<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 kss-nav__menu-link-activefalse" href="./">
<span class="kss-nav__name">Introduction</span>
</a>
</h1>
</li>
<li class="kss-nav__menu-item ">
<a class="kss-nav__menu-link " href="section-avatars.html">
<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__name">Badges</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-base.html">
<span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-blocks.html">
<span class="kss-nav__name">Blocks</span>
</a>
</li>
<li class="kss-nav__menu-item ">
<a class="kss-nav__menu-link " href="section-buttons.html">
<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__name">Cards</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-content.html">
<span class="kss-nav__name">Content</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-elements.html">
<span class="kss-nav__name">Elements</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-flexblock.html">
<span class="kss-nav__name">Flexblock</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 ">
<a class="kss-nav__menu-link " href="section-grid.html">
<span class="kss-nav__name">Grid</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-layout.html">
<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 kss-nav__ref " href="section-layout.html#kssref-layout-alignment">
<span class="kss-nav__name">Align content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-radius">
<span class="kss-nav__name">Radius</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-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-layout.html#kssref-layout-sizes">
<span class="kss-nav__name">Resizing</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item ">
<a class="kss-nav__menu-link " href="section-longform.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 ">
<a class="kss-nav__menu-link " href="section-navigation.html">
<span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item ">
<a class="kss-nav__menu-link " href="section-screenshots.html">
<span class="kss-nav__name">Screenshots</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-slide.html">
<span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-slides.html">
<span class="kss-nav__name">fullscreen</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-slides.html">
<span class="kss-nav__name">Slides</span>
</a>
</li>
<li class="kss-nav__menu-item kss-nav-has-children">
<a class="kss-nav__menu-link " href="section-typography.html">
<span class="kss-nav__name">Typography</span>
</a>
</li>
</ul>
</nav>
</div>
<div role="main" class="kss-main">
<div id="kssref-layout" 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-layout">
Layout
</a>
</h1>
</div>
</div>
<section id="kssref-layout-alignment" 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-layout-alignment">
Align content
</a>
</h2>
</div>
</div>
<section id="kssref-layout-alignment" 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-layout-alignment">
<span class="kss-title__ref">
11.1
<span class="kss-title__permalink-hash">
#Layout.Alignment
</span>
</span>
Align content
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__example">
<div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 " />
<p>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.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.alignright
</div>
<div class="kss-modifier__description kss-style">
Align right.
</div>
<div class="kss-modifier__example">
<div>
<div class="kss-modifier__name kss-style">
.alignright
</div>
<div class="kss-modifier__description kss-style">
Align right.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 alignright" />
<p>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.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.alignleft
</div>
<div class="kss-modifier__description kss-style">
Align left.
</div>
<div class="kss-modifier__example">
<div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.alignleft
</div>
<div class="kss-modifier__description kss-style">
Align left.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 alignleft" />
<p>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.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.aligncenter
</div>
<div class="kss-modifier__description kss-style">
Align center.
</div>
<div class="kss-modifier__example">
<div>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.aligncenter
</div>
<div class="kss-modifier__description kss-style">
Align center.
</div>
<div class="kss-modifier__example">
<div>
<img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
<p>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.</p>
</div>
<div class="kss-modifier__example-footer"></div>
</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&gt;
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;size-50 [modifier class]&quot; /&gt;
&lt;p&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;/p&gt;
&lt;/div&gt;</code></pre>
</details>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 143
</div>
</section>
<section id="kssref-layout-radius" 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-layout-radius">
Radius
</a>
</h2>
<div class="kss-description">
<p>Adds a rounded radis</p>
</div>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 143
</div>
</section>
<section id="kssref-layout-radius" 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-layout-radius">
<span class="kss-title__ref">
11.2
<span class="kss-title__permalink-hash">
#Layout.Radius
</span>
</span>
Radius
</a>
</h2>
<div class="kss-description">
<p>Adds a rounded radis</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-black radius">
<div class="kss-modifier__example">
<div class="bg-black radius">
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 class="kss-modifier__example-footer"></div>
</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-black radius&quot;&gt;
<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-black radius&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>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 129
</div>
</section>
<section id="kssref-layout-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-layout-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 class="kss-source kss-style">
Source: <code>_base.scss</code>, line 129
</div>
</section>
<section id="kssref-layout-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-layout-shadow">
<span class="kss-title__ref">
11.3
<span class="kss-title__permalink-hash">
#Layout.Shadow
</span>
</span>
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__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="bg-white shadow">
<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 class="kss-modifier__example-footer"></div>
</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;
<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>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 73
</div>
</section>
<section id="kssref-layout-sizes" 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-layout-sizes">
<span class="kss-title__ref">
11.4
<span class="kss-title__permalink-hash">
#Layout.Sizes
</span>
</span>
Resizing
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 73
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</section>
<section id="kssref-layout-sizes" 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-layout-sizes">
Resizing
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="" />
<div class="kss-modifier__example-footer"></div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-80
</div>
<div class="kss-modifier__description kss-style">
resize to 80%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-80" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-70
</div>
<div class="kss-modifier__description kss-style">
resize to 70%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-70" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-60
</div>
<div class="kss-modifier__description kss-style">
resize to 60%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-60" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-50
</div>
<div class="kss-modifier__description kss-style">
resize to 50%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-50" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-40
</div>
<div class="kss-modifier__description kss-style">
resize to 40%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-40" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-30
</div>
<div class="kss-modifier__description kss-style">
resize to 30%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-30" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-20
</div>
<div class="kss-modifier__description kss-style">
resize to 20%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-20" />
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<div class="kss-modifier__name kss-style">
.size-80
</div>
<div class="kss-modifier__description kss-style">
resize to 80%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-80" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-70
</div>
<div class="kss-modifier__description kss-style">
resize to 70%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-70" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-60
</div>
<div class="kss-modifier__description kss-style">
resize to 60%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-60" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-50
</div>
<div class="kss-modifier__description kss-style">
resize to 50%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-50" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-40
</div>
<div class="kss-modifier__description kss-style">
resize to 40%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-40" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-30
</div>
<div class="kss-modifier__description kss-style">
resize to 30%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-30" />
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
.size-20
</div>
<div class="kss-modifier__description kss-style">
resize to 20%.
</div>
<div class="kss-modifier__example">
<img src="../../../static/images/iphone.png" class="size-20" />
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
</details>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 199
</div>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 199
</div>
</section>
</article>
</section>
</div>
</div>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>