mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-21 04:12:01 +02:00
Some css doc
This commit is contained in:
Luis Sacristán
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -75,19 +80,19 @@
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<span class="bg-primary size-20">Primary</span>
|
||||
<span class="bg-secondary size-20">Secondary</span>
|
||||
<span class="bg-light size-20">Light</span>
|
||||
<span class="bg-black size-20">Black</span>
|
||||
<span class="bg-black-blue size-20">Black blue</span>
|
||||
<span class="bg-blue size-20">Blue</span>
|
||||
<span class="bg-brown size-20">Brown</span>
|
||||
<span class="bg-gray size-20">Gray</span>
|
||||
<span class="bg-green size-20">Green</span>
|
||||
<span class="bg-purple size-20">Purple</span>
|
||||
<span class="bg-red size-20">Red</span>
|
||||
<span class="bg-white size-20">White</span>
|
||||
<span class="bg-facebook size-20">Facebook</span>
|
||||
<span class="bg-primary size-20">Primary #44d</span>
|
||||
<span class="bg-secondary size-20">Secondary #67d</span>
|
||||
<span class="bg-light size-20">Light #f7f9fb</span>
|
||||
<span class="bg-black size-20">Black #000</span>
|
||||
<span class="bg-black-blue size-20">Black blue #123</span>
|
||||
<span class="bg-blue size-20">Blue #346</span>
|
||||
<span class="bg-brown size-20">Brown #f9f8f2</span>
|
||||
<span class="bg-gray size-20">Gray #d5d9e2</span>
|
||||
<span class="bg-green size-20">Green #077</span>
|
||||
<span class="bg-purple size-20">Purple #62b</span>
|
||||
<span class="bg-red size-20">Red #c23</span>
|
||||
<span class="bg-white size-20">White #fff</span>
|
||||
<span class="bg-facebook size-20">Facebook #3b5998</span>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
@@ -97,19 +102,19 @@
|
||||
<summary>
|
||||
Markup
|
||||
</summary>
|
||||
<pre class="prettyprint linenums lang-html"><code data-language="html"><span class="bg-primary size-20">Primary</span>
|
||||
<span class="bg-secondary size-20">Secondary</span>
|
||||
<span class="bg-light size-20">Light</span>
|
||||
<span class="bg-black size-20">Black</span>
|
||||
<span class="bg-black-blue size-20">Black blue</span>
|
||||
<span class="bg-blue size-20">Blue</span>
|
||||
<span class="bg-brown size-20">Brown</span>
|
||||
<span class="bg-gray size-20">Gray</span>
|
||||
<span class="bg-green size-20">Green</span>
|
||||
<span class="bg-purple size-20">Purple</span>
|
||||
<span class="bg-red size-20">Red</span>
|
||||
<span class="bg-white size-20">White</span>
|
||||
<span class="bg-facebook size-20">Facebook</span></code></pre>
|
||||
<pre class="prettyprint linenums lang-html"><code data-language="html"><span class="bg-primary size-20">Primary #44d</span>
|
||||
<span class="bg-secondary size-20">Secondary #67d</span>
|
||||
<span class="bg-light size-20">Light #f7f9fb</span>
|
||||
<span class="bg-black size-20">Black #000</span>
|
||||
<span class="bg-black-blue size-20">Black blue #123</span>
|
||||
<span class="bg-blue size-20">Blue #346</span>
|
||||
<span class="bg-brown size-20">Brown #f9f8f2</span>
|
||||
<span class="bg-gray size-20">Gray #d5d9e2</span>
|
||||
<span class="bg-green size-20">Green #077</span>
|
||||
<span class="bg-purple size-20">Purple #62b</span>
|
||||
<span class="bg-red size-20">Red #c23</span>
|
||||
<span class="bg-white size-20">White #fff</span>
|
||||
<span class="bg-facebook size-20">Facebook #3b5998</span></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
|
||||
@@ -51,14 +51,19 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
241
doc/styleguide/item-flexblock-blink.html
Normal file
241
doc/styleguide/item-flexblock-blink.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-blink">
|
||||
<span class="kss-title__ref">
|
||||
2.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Blink
|
||||
</span>
|
||||
</span>
|
||||
Flexblocks
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Auto-fill & Equal height columns</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">
|
||||
<ul class="flexblock ">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.blink
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
Linkable block
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock blink">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
With border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock border">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock [modifier class]">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock.scss</code>, line 6
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="kss-assets/kss.js"></script>
|
||||
<script src="kss-assets/scrollspy.js"></script>
|
||||
<script src="kss-assets/prettify.js"></script>
|
||||
<script src="kss-assets/kss-fullscreen.js"></script>
|
||||
<script src="kss-assets/kss-guides.js"></script>
|
||||
<script src="kss-assets/kss-markup.js"></script>
|
||||
<script>
|
||||
prettyPrint();
|
||||
var spy = new ScrollSpy('#kss-node', {
|
||||
nav: '.kss-nav__menu-child > li > a',
|
||||
className: 'is-in-viewport'
|
||||
});
|
||||
var kssFullScreen = new KssFullScreen({
|
||||
idPrefix: 'kss-fullscreen-',
|
||||
bodyClass: 'kss-fullscreen-mode',
|
||||
elementClass: 'is-fullscreen'
|
||||
});
|
||||
var kssGuides = new KssGuides({
|
||||
bodyClass: 'kss-guides-mode'
|
||||
});
|
||||
var kssMarkup = new KssMarkup({
|
||||
bodyClass: 'kss-markup-mode',
|
||||
detailsClass: 'kss-markup'
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
||||
</body>
|
||||
</html>
|
||||
216
doc/styleguide/item-flexblock-clients.html
Normal file
216
doc/styleguide/item-flexblock-clients.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-clients" class="kss-section kss-section--depth-2 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-clients">
|
||||
<span class="kss-title__ref">
|
||||
2.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Clients
|
||||
</span>
|
||||
</span>
|
||||
Clients
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Highlight clients information</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">
|
||||
<ul class="flexblock clients ">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock clients border">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock clients [modifier class]">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-clients.scss</code>, line 5
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="kss-assets/kss.js"></script>
|
||||
<script src="kss-assets/scrollspy.js"></script>
|
||||
<script src="kss-assets/prettify.js"></script>
|
||||
<script src="kss-assets/kss-fullscreen.js"></script>
|
||||
<script src="kss-assets/kss-guides.js"></script>
|
||||
<script src="kss-assets/kss-markup.js"></script>
|
||||
<script>
|
||||
prettyPrint();
|
||||
var spy = new ScrollSpy('#kss-node', {
|
||||
nav: '.kss-nav__menu-child > li > a',
|
||||
className: 'is-in-viewport'
|
||||
});
|
||||
var kssFullScreen = new KssFullScreen({
|
||||
idPrefix: 'kss-fullscreen-',
|
||||
bodyClass: 'kss-fullscreen-mode',
|
||||
elementClass: 'is-fullscreen'
|
||||
});
|
||||
var kssGuides = new KssGuides({
|
||||
bodyClass: 'kss-guides-mode'
|
||||
});
|
||||
var kssMarkup = new KssMarkup({
|
||||
bodyClass: 'kss-markup-mode',
|
||||
detailsClass: 'kss-markup'
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
||||
</body>
|
||||
</html>
|
||||
213
doc/styleguide/item-flexblock-features.html
Normal file
213
doc/styleguide/item-flexblock-features.html
Normal file
@@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-features" class="kss-section kss-section--depth-2 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-features">
|
||||
<span class="kss-title__ref">
|
||||
2.3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Features
|
||||
</span>
|
||||
</span>
|
||||
Features
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Special features</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">
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-features.scss</code>, line 5
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="kss-assets/kss.js"></script>
|
||||
<script src="kss-assets/scrollspy.js"></script>
|
||||
<script src="kss-assets/prettify.js"></script>
|
||||
<script src="kss-assets/kss-fullscreen.js"></script>
|
||||
<script src="kss-assets/kss-guides.js"></script>
|
||||
<script src="kss-assets/kss-markup.js"></script>
|
||||
<script>
|
||||
prettyPrint();
|
||||
var spy = new ScrollSpy('#kss-node', {
|
||||
nav: '.kss-nav__menu-child > li > a',
|
||||
className: 'is-in-viewport'
|
||||
});
|
||||
var kssFullScreen = new KssFullScreen({
|
||||
idPrefix: 'kss-fullscreen-',
|
||||
bodyClass: 'kss-fullscreen-mode',
|
||||
elementClass: 'is-fullscreen'
|
||||
});
|
||||
var kssGuides = new KssGuides({
|
||||
bodyClass: 'kss-guides-mode'
|
||||
});
|
||||
var kssMarkup = new KssMarkup({
|
||||
bodyClass: 'kss-markup-mode',
|
||||
detailsClass: 'kss-markup'
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
||||
</body>
|
||||
</html>
|
||||
190
doc/styleguide/item-flexblock-gallery-overlay.html
Normal file
190
doc/styleguide/item-flexblock-gallery-overlay.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
|
||||
<span class="kss-title__ref">
|
||||
2.4.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Gallery.Overlay
|
||||
</span>
|
||||
</span>
|
||||
Gallery + Overflow
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Beautiful gallery with overlay content</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>New York</h2>
|
||||
<p>1,234 rooms</p>
|
||||
</div>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>uWatch</h2>
|
||||
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>New York</h2>
|
||||
<p>1,234 rooms</p>
|
||||
</div>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>uWatch</h2>
|
||||
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-gallery.scss</code>, line 50
|
||||
</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>
|
||||
202
doc/styleguide/item-flexblock-gallery.html
Normal file
202
doc/styleguide/item-flexblock-gallery.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-gallery">
|
||||
<span class="kss-title__ref">
|
||||
2.4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Gallery
|
||||
</span>
|
||||
</span>
|
||||
Gallery
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Beautiful gallery</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
<figcaption>
|
||||
<h2>uWatch</h2>
|
||||
<p>By Jane Doe</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
<figcaption>
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
<figcaption>
|
||||
<h2>New York</h2>
|
||||
<p>3,456 rooms</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
<figcaption>
|
||||
<h2>uWatch</h2>
|
||||
<p>By Jane Doe</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
<figcaption>
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
<figcaption>
|
||||
<h2>New York</h2>
|
||||
<p>3,456 rooms</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-gallery.scss</code>, line 7
|
||||
</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>
|
||||
195
doc/styleguide/item-flexblock-metrics.html
Normal file
195
doc/styleguide/item-flexblock-metrics.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-metrics">
|
||||
<span class="kss-title__ref">
|
||||
2.5
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Metrics
|
||||
</span>
|
||||
</span>
|
||||
Metrics
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Bla bla bla</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Examples
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__default-name kss-style">
|
||||
Default styling
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock metrics ">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock metrics border">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock metrics [modifier class]">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-metrics.scss</code>, line 5
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="kss-assets/kss.js"></script>
|
||||
<script src="kss-assets/scrollspy.js"></script>
|
||||
<script src="kss-assets/prettify.js"></script>
|
||||
<script src="kss-assets/kss-fullscreen.js"></script>
|
||||
<script src="kss-assets/kss-guides.js"></script>
|
||||
<script src="kss-assets/kss-markup.js"></script>
|
||||
<script>
|
||||
prettyPrint();
|
||||
var spy = new ScrollSpy('#kss-node', {
|
||||
nav: '.kss-nav__menu-child > li > a',
|
||||
className: 'is-in-viewport'
|
||||
});
|
||||
var kssFullScreen = new KssFullScreen({
|
||||
idPrefix: 'kss-fullscreen-',
|
||||
bodyClass: 'kss-fullscreen-mode',
|
||||
elementClass: 'is-fullscreen'
|
||||
});
|
||||
var kssGuides = new KssGuides({
|
||||
bodyClass: 'kss-guides-mode'
|
||||
});
|
||||
var kssMarkup = new KssMarkup({
|
||||
bodyClass: 'kss-markup-mode',
|
||||
detailsClass: 'kss-markup'
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
||||
</body>
|
||||
</html>
|
||||
146
doc/styleguide/item-flexblock.html
Normal file
146
doc/styleguide/item-flexblock.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
<ul class="kss-nav__menu-child">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
|
||||
<span class="kss-nav__ref ">2.1</span
|
||||
><span class="kss-nav__name">Flexblocks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
|
||||
<span class="kss-nav__ref ">2.2</span
|
||||
><span class="kss-nav__name">Clients</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
|
||||
<span class="kss-nav__ref ">2.3</span
|
||||
><span class="kss-nav__name">Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
|
||||
<span class="kss-nav__ref ">2.4</span
|
||||
><span class="kss-nav__name">Gallery</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
|
||||
<span class="kss-nav__ref kss-nav__ref-child">2.4.1</span
|
||||
><span class="kss-nav__name">Gallery + Overflow</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
|
||||
<span class="kss-nav__ref ">2.5</span
|
||||
><span class="kss-nav__name">Metrics</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock" 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-flexblock">
|
||||
<span class="kss-title__ref">
|
||||
2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock
|
||||
</span>
|
||||
</span>
|
||||
Flexblock
|
||||
</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>
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-alignment">
|
||||
<span class="kss-title__ref">
|
||||
2.1
|
||||
3.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Alignment
|
||||
</span>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-radius">
|
||||
<span class="kss-title__ref">
|
||||
2.2
|
||||
3.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Radius
|
||||
</span>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-shadow">
|
||||
<span class="kss-title__ref">
|
||||
2.3
|
||||
3.3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Shadow
|
||||
</span>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-sizes">
|
||||
<span class="kss-title__ref">
|
||||
2.4
|
||||
3.4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Sizes
|
||||
</span>
|
||||
|
||||
@@ -31,32 +31,37 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</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 ">2.1</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.2</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.3</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.4</span
|
||||
<span class="kss-nav__ref ">3.4</span
|
||||
><span class="kss-nav__name">Resizing</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -64,7 +69,7 @@
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -78,7 +83,7 @@
|
||||
<h1 class="kss-title kss-title--level-1">
|
||||
<a class="kss-title__permalink" href="#kssref-layout">
|
||||
<span class="kss-title__ref">
|
||||
2
|
||||
3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout
|
||||
</span>
|
||||
|
||||
134
doc/styleguide/item-slide-background-anim.html
Normal file
134
doc/styleguide/item-slide-background-anim.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" class="kss-fullscreen-mode">
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-slide-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
|
||||
|
||||
<div class="kss-style">
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
|
||||
<span class="kss-title__ref">
|
||||
4.1.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background.Anim
|
||||
</span>
|
||||
</span>
|
||||
Animated
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
</section>
|
||||
<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"><section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
</section></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_slides-bg.scss</code>, line 140
|
||||
</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>
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background-video">
|
||||
<span class="kss-title__ref">
|
||||
3.1.1
|
||||
4.1.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background.Video
|
||||
</span>
|
||||
|
||||
@@ -31,14 +31,19 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +57,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background">
|
||||
<span class="kss-title__ref">
|
||||
3.1
|
||||
4.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background
|
||||
</span>
|
||||
|
||||
@@ -31,25 +31,36 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</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 ">3.1</span
|
||||
<span class="kss-nav__ref ">4.1</span
|
||||
><span class="kss-nav__name">Backgrounds</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-anim">
|
||||
<span class="kss-nav__ref kss-nav__ref-child">4.1.1</span
|
||||
><span class="kss-nav__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">3.1.1</span
|
||||
<span class="kss-nav__ref kss-nav__ref-child">4.1.2</span
|
||||
><span class="kss-nav__name">Video</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -66,7 +77,7 @@
|
||||
<h1 class="kss-title kss-title--level-1">
|
||||
<a class="kss-title__permalink" href="#kssref-slide">
|
||||
<span class="kss-title__ref">
|
||||
3
|
||||
4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide
|
||||
</span>
|
||||
|
||||
@@ -595,3 +595,12 @@
|
||||
#kssref-base-backgrounds-gradient div[class*=bg] {
|
||||
padding: 4rem;
|
||||
margin: 3rem; }
|
||||
|
||||
#kssref-slide-background-anim .slide {
|
||||
clip: rect(0px, 200px, 200px, 0px);
|
||||
position: absolute; }
|
||||
|
||||
#kssref-slide-background-anim .kss-modifier__example {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto; }
|
||||
|
||||
@@ -790,3 +790,13 @@ $kss-vertical-rhythm : $kss-font-size * 1.5;
|
||||
margin: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#kssref-slide-background-anim .slide {
|
||||
clip: rect(0px, 200px, 200px, 0px);
|
||||
position: absolute;
|
||||
}
|
||||
#kssref-slide-background-anim .kss-modifier__example {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -51,14 +51,19 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -116,19 +121,19 @@
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<span class="bg-primary size-20">Primary</span>
|
||||
<span class="bg-secondary size-20">Secondary</span>
|
||||
<span class="bg-light size-20">Light</span>
|
||||
<span class="bg-black size-20">Black</span>
|
||||
<span class="bg-black-blue size-20">Black blue</span>
|
||||
<span class="bg-blue size-20">Blue</span>
|
||||
<span class="bg-brown size-20">Brown</span>
|
||||
<span class="bg-gray size-20">Gray</span>
|
||||
<span class="bg-green size-20">Green</span>
|
||||
<span class="bg-purple size-20">Purple</span>
|
||||
<span class="bg-red size-20">Red</span>
|
||||
<span class="bg-white size-20">White</span>
|
||||
<span class="bg-facebook size-20">Facebook</span>
|
||||
<span class="bg-primary size-20">Primary #44d</span>
|
||||
<span class="bg-secondary size-20">Secondary #67d</span>
|
||||
<span class="bg-light size-20">Light #f7f9fb</span>
|
||||
<span class="bg-black size-20">Black #000</span>
|
||||
<span class="bg-black-blue size-20">Black blue #123</span>
|
||||
<span class="bg-blue size-20">Blue #346</span>
|
||||
<span class="bg-brown size-20">Brown #f9f8f2</span>
|
||||
<span class="bg-gray size-20">Gray #d5d9e2</span>
|
||||
<span class="bg-green size-20">Green #077</span>
|
||||
<span class="bg-purple size-20">Purple #62b</span>
|
||||
<span class="bg-red size-20">Red #c23</span>
|
||||
<span class="bg-white size-20">White #fff</span>
|
||||
<span class="bg-facebook size-20">Facebook #3b5998</span>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
@@ -138,19 +143,19 @@
|
||||
<summary>
|
||||
Markup
|
||||
</summary>
|
||||
<pre class="prettyprint linenums lang-html"><code data-language="html"><span class="bg-primary size-20">Primary</span>
|
||||
<span class="bg-secondary size-20">Secondary</span>
|
||||
<span class="bg-light size-20">Light</span>
|
||||
<span class="bg-black size-20">Black</span>
|
||||
<span class="bg-black-blue size-20">Black blue</span>
|
||||
<span class="bg-blue size-20">Blue</span>
|
||||
<span class="bg-brown size-20">Brown</span>
|
||||
<span class="bg-gray size-20">Gray</span>
|
||||
<span class="bg-green size-20">Green</span>
|
||||
<span class="bg-purple size-20">Purple</span>
|
||||
<span class="bg-red size-20">Red</span>
|
||||
<span class="bg-white size-20">White</span>
|
||||
<span class="bg-facebook size-20">Facebook</span></code></pre>
|
||||
<pre class="prettyprint linenums lang-html"><code data-language="html"><span class="bg-primary size-20">Primary #44d</span>
|
||||
<span class="bg-secondary size-20">Secondary #67d</span>
|
||||
<span class="bg-light size-20">Light #f7f9fb</span>
|
||||
<span class="bg-black size-20">Black #000</span>
|
||||
<span class="bg-black-blue size-20">Black blue #123</span>
|
||||
<span class="bg-blue size-20">Blue #346</span>
|
||||
<span class="bg-brown size-20">Brown #f9f8f2</span>
|
||||
<span class="bg-gray size-20">Gray #d5d9e2</span>
|
||||
<span class="bg-green size-20">Green #077</span>
|
||||
<span class="bg-purple size-20">Purple #62b</span>
|
||||
<span class="bg-red size-20">Red #c23</span>
|
||||
<span class="bg-white size-20">White #fff</span>
|
||||
<span class="bg-facebook size-20">Facebook #3b5998</span></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
|
||||
881
doc/styleguide/section-flexblock.html
Normal file
881
doc/styleguide/section-flexblock.html
Normal file
@@ -0,0 +1,881 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides</title>
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="generator" content="kss-node">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="stylesheet" href="kss-assets/kss.css">
|
||||
<link rel="stylesheet" href="../../static/css/webslides.css">
|
||||
|
||||
</head>
|
||||
<body id="kss-node" >
|
||||
|
||||
<div class="kss-sidebar kss-style">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title">WebSlides</h1>
|
||||
</header>
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="./">
|
||||
<span class="kss-nav__ref">0</span
|
||||
><span class="kss-nav__name">Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-base.html">
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
<ul class="kss-nav__menu-child">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
|
||||
<span class="kss-nav__ref ">2.1</span
|
||||
><span class="kss-nav__name">Flexblocks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients">
|
||||
<span class="kss-nav__ref ">2.2</span
|
||||
><span class="kss-nav__name">Clients</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features">
|
||||
<span class="kss-nav__ref ">2.3</span
|
||||
><span class="kss-nav__name">Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery">
|
||||
<span class="kss-nav__ref ">2.4</span
|
||||
><span class="kss-nav__name">Gallery</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay">
|
||||
<span class="kss-nav__ref kss-nav__ref-child">2.4.1</span
|
||||
><span class="kss-nav__name">Gallery + Overflow</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics">
|
||||
<span class="kss-nav__ref ">2.5</span
|
||||
><span class="kss-nav__name">Metrics</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<article role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-flexblock" 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-flexblock">
|
||||
<span class="kss-title__ref">
|
||||
2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock
|
||||
</span>
|
||||
</span>
|
||||
Flexblock
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<section id="kssref-flexblock-blink" 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-flexblock-blink">
|
||||
<span class="kss-title__ref">
|
||||
2.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Blink
|
||||
</span>
|
||||
</span>
|
||||
Flexblocks
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Auto-fill & Equal height columns</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">
|
||||
<ul class="flexblock ">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.blink
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
Linkable block
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock blink">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
With border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock border">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock [modifier class]">
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Item 4
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock.scss</code>, line 6
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-flexblock-clients" 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-flexblock-clients">
|
||||
<span class="kss-title__ref">
|
||||
2.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Clients
|
||||
</span>
|
||||
</span>
|
||||
Clients
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Highlight clients information</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">
|
||||
<ul class="flexblock clients ">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock clients border">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock clients [modifier class]">
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Client">
|
||||
<figure>
|
||||
<img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<figcaption>
|
||||
<h3>Interfaces</h3>
|
||||
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-clients.scss</code>, line 5
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-flexblock-features" 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-flexblock-features">
|
||||
<span class="kss-title__ref">
|
||||
2.3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Features
|
||||
</span>
|
||||
</span>
|
||||
Features
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Special features</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">
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||||
Well documented.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span><sup>$</sup>48</span>
|
||||
<h2>Extra virgin olive oil</h2>
|
||||
The Spanish caviar.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
Ultra-fast Wifi
|
||||
</h2>
|
||||
Simple file sharing.
|
||||
</div>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-features.scss</code>, line 5
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-flexblock-gallery" 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-flexblock-gallery">
|
||||
<span class="kss-title__ref">
|
||||
2.4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Gallery
|
||||
</span>
|
||||
</span>
|
||||
Gallery
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Beautiful gallery</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
<figcaption>
|
||||
<h2>uWatch</h2>
|
||||
<p>By Jane Doe</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
<figcaption>
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
<figcaption>
|
||||
<h2>New York</h2>
|
||||
<p>3,456 rooms</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
<figcaption>
|
||||
<h2>uWatch</h2>
|
||||
<p>By Jane Doe</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
<figcaption>
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<figure>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
<figcaption>
|
||||
<h2>New York</h2>
|
||||
<p>3,456 rooms</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-gallery.scss</code>, line 7
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-flexblock-gallery-overlay" class="kss-section kss-section--depth-3 ">
|
||||
|
||||
<div class="kss-style">
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
|
||||
<span class="kss-title__ref">
|
||||
2.4.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Gallery.Overlay
|
||||
</span>
|
||||
</span>
|
||||
Gallery + Overflow
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Beautiful gallery with overlay content</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>New York</h2>
|
||||
<p>1,234 rooms</p>
|
||||
</div>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>uWatch</h2>
|
||||
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>New York</h2>
|
||||
<p>1,234 rooms</p>
|
||||
</div>
|
||||
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>uWatch</h2>
|
||||
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="overlay">
|
||||
<h2>Ellen Daniels</h2>
|
||||
<p>CEO</p>
|
||||
</div>
|
||||
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||||
</a>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-gallery.scss</code>, line 50
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-flexblock-metrics" 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-flexblock-metrics">
|
||||
<span class="kss-title__ref">
|
||||
2.5
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Flexblock.Metrics
|
||||
</span>
|
||||
</span>
|
||||
Metrics
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="kss-description">
|
||||
<p>Bla bla bla</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Examples
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__default-name kss-style">
|
||||
Default styling
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock metrics ">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.border
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
with border
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<ul class="flexblock metrics border">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul>
|
||||
<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"><ul class="flexblock metrics [modifier class]">
|
||||
<li> Founded
|
||||
<span>2016</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>24M</span>
|
||||
Subscribers
|
||||
</li>
|
||||
<li>
|
||||
Revenue:
|
||||
<span>$16M</span>
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_flexblock-metrics.scss</code>, line 5
|
||||
</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>
|
||||
@@ -31,32 +31,37 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</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 ">2.1</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.2</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.3</span
|
||||
<span class="kss-nav__ref ">3.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 ">2.4</span
|
||||
<span class="kss-nav__ref ">3.4</span
|
||||
><span class="kss-nav__name">Resizing</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -64,7 +69,7 @@
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Slide</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -78,7 +83,7 @@
|
||||
<h1 class="kss-title kss-title--level-1">
|
||||
<a class="kss-title__permalink" href="#kssref-layout">
|
||||
<span class="kss-title__ref">
|
||||
2
|
||||
3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout
|
||||
</span>
|
||||
@@ -99,7 +104,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-alignment">
|
||||
<span class="kss-title__ref">
|
||||
2.1
|
||||
3.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Alignment
|
||||
</span>
|
||||
@@ -190,7 +195,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-radius">
|
||||
<span class="kss-title__ref">
|
||||
2.2
|
||||
3.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Radius
|
||||
</span>
|
||||
@@ -241,7 +246,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-shadow">
|
||||
<span class="kss-title__ref">
|
||||
2.3
|
||||
3.3
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Shadow
|
||||
</span>
|
||||
@@ -292,7 +297,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-layout-sizes">
|
||||
<span class="kss-title__ref">
|
||||
2.4
|
||||
3.4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Layout.Sizes
|
||||
</span>
|
||||
|
||||
@@ -31,25 +31,36 @@
|
||||
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-flexblock.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Flexblock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-layout.html">
|
||||
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Layout</span>
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html">
|
||||
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Slide</span>
|
||||
<span class="kss-nav__ref">4</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 ">3.1</span
|
||||
<span class="kss-nav__ref ">4.1</span
|
||||
><span class="kss-nav__name">Backgrounds</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link" href="section-slide.html#kssref-slide-background-anim">
|
||||
<span class="kss-nav__ref kss-nav__ref-child">4.1.1</span
|
||||
><span class="kss-nav__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">3.1.1</span
|
||||
<span class="kss-nav__ref kss-nav__ref-child">4.1.2</span
|
||||
><span class="kss-nav__name">Video</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -66,7 +77,7 @@
|
||||
<h1 class="kss-title kss-title--level-1">
|
||||
<a class="kss-title__permalink" href="#kssref-slide">
|
||||
<span class="kss-title__ref">
|
||||
3
|
||||
4
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide
|
||||
</span>
|
||||
@@ -87,7 +98,7 @@
|
||||
<h2 class="kss-title kss-title--level-2">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background">
|
||||
<span class="kss-title__ref">
|
||||
3.1
|
||||
4.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background
|
||||
</span>
|
||||
@@ -274,6 +285,53 @@
|
||||
Source: <code>modules/_slides-bg.scss</code>, line 15
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-slide-background-anim" class="kss-section kss-section--depth-3 ">
|
||||
|
||||
<div class="kss-style">
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background-anim">
|
||||
<span class="kss-title__ref">
|
||||
4.1.1
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background.Anim
|
||||
</span>
|
||||
</span>
|
||||
Animated
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Example
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
</section>
|
||||
<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"><section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
</section></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>modules/_slides-bg.scss</code>, line 140
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section id="kssref-slide-background-video" class="kss-section kss-section--depth-3 ">
|
||||
|
||||
@@ -281,7 +339,7 @@
|
||||
<h3 class="kss-title kss-title--level-3">
|
||||
<a class="kss-title__permalink" href="#kssref-slide-background-video">
|
||||
<span class="kss-title__ref">
|
||||
3.1.1
|
||||
4.1.2
|
||||
<span class="kss-title__permalink-hash">
|
||||
#Slide.Background.Video
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user