mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-28 15:29:52 +02:00
Code Issues Releases Wiki Activity

kss - latest flexboxes

Browse Source
This commit is contained in:
Luis Sacristán
2017-08-27 10:32:40 +02:00
parent 03c4456f76
commit 4706b3c6ee
18 changed files with 1750 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
doc/styleguide/item-flexblock-activity.html Normal file
View File

@@ -0,0 +1,218 @@
<!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-activity" 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-activity">
<span class="kss-title__ref">
2.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>
</span>
Activity
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock activity">
<li>
<a href="#" title="UX Designer at ACME">
<div>
<p class="year">
2016
</p>
<p class="title">
UX Designer at ACME
</p>
<p class="summary">
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
</p>
</div>
</a>
</li>
<li>
<a href="#" title="14 world famous buildings to inspire you">
<p class="year">
2 mins ago
</p>
<p class="title">
14 world famous buildings to inspire you
</p>
<p class="summary">
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
</p>
</a>
</li>
<li>
<a href="#" title="Co-Founder of GAMMA">
<p class="year">
2013
</p>
<p class="title">
Co-Founder of GAMMA
</p>
<p class="summary">
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
</p>
</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">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
&lt;div&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2016
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
UX Designer at ACME
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2 mins ago
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
14 world famous buildings to inspire you
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2013
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
Co-Founder of GAMMA
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-activity.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>

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

@@ -57,7 +57,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink"> <a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.1 2.2
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Blink #Flexblock.Blink
</span> </span>

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

@@ -57,7 +57,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients"> <a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.2 2.3
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Clients #Flexblock.Clients
</span> </span>

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

@@ -57,7 +57,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features"> <a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.3 2.4
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Features #Flexblock.Features
</span> </span>

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

@@ -57,7 +57,7 @@
<h3 class="kss-title kss-title--level-3"> <h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay"> <a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.4.1 2.5.1
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay #Flexblock.Gallery.Overlay
</span> </span>

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

@@ -57,7 +57,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery"> <a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.4 2.5
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Gallery #Flexblock.Gallery
</span> </span>

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

@@ -57,7 +57,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics"> <a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.5 2.6
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Metrics #Flexblock.Metrics
</span> </span>

240
doc/styleguide/item-flexblock-plans.html Normal file
View File

@@ -0,0 +1,240 @@
<!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-plans" 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-plans">
<span class="kss-title__ref">
2.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>
</span>
Plans
</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 plans ">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</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">
block linkable
</div>
<div class="kss-modifier__example">
<ul class="flexblock plans blink">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</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">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
&lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Medium&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-plans.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>

152
doc/styleguide/item-flexblock-reasons.html Normal file
View File

@@ -0,0 +1,152 @@
<!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-reasons" 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-reasons">
<span class="kss-title__ref">
2.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>
</span>
Reasons
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock reasons">
<li>
<h2>Why WebSlides? Work better, faster.</h2>
<p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
</li>
<li>
<h2> Good karma. Just the essentials and using lovely CSS.</h2>
<p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
</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">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
&lt;li&gt;
&lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
&lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
&lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-reasons.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>

172
doc/styleguide/item-flexblock-specs.html Normal file
View File

@@ -0,0 +1,172 @@
<!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-specs" 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-specs">
<span class="kss-title__ref">
2.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>
</span>
Specs
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock specs">
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</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">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-specs.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>

184
doc/styleguide/item-flexblock-steps.html Normal file
View File

@@ -0,0 +1,184 @@
<!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-steps" 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-steps">
<span class="kss-title__ref">
2.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>
</span>
Steps
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock steps">
<li>
<h2>01. Passion</h2>
<p>When you're really passionate about your job, you can change the world.</p>
</li>
<li>
<div class="process step-2"></div>
<h2>02. Purpose</h2>
<p>Why does this business exist? How are you different? Why matters?</p>
</li>
<li>
<div class="process step-3"></div>
<h2>03. Principles</h2>
<p>Leadership through usefulness, openness, empathy, and good taste.</p>
</li>
<li>
<div class="process step-4"></div>
<h2>04. Process</h2>
<ul>
<li>Useful</li>
<li>Easy</li>
<li>Fast</li>
<li>Beautiful</li>
</ul>
</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">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
&lt;li&gt;
&lt;h2&gt;01. Passion&lt;/h2&gt;
&lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
&lt;h2&gt;02. Purpose&lt;/h2&gt;
&lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
&lt;h2&gt;03. Principles&lt;/h2&gt;
&lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
&lt;h2&gt;04. Process&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Useful&lt;/li&gt;
&lt;li&gt;Easy&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Beautiful&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-steps.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>

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

@@ -37,41 +37,71 @@
</a> </a>
<ul class="kss-nav__menu-child"> <ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink"> <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
<span class="kss-nav__ref ">2.1</span <span class="kss-nav__ref ">2.1</span
><span class="kss-nav__name"> Activity</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
<span class="kss-nav__ref ">2.2</span
><span class="kss-nav__name">Flexblocks</span> ><span class="kss-nav__name">Flexblocks</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients"> <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__ref ">2.3</span
><span class="kss-nav__name">Clients</span> ><span class="kss-nav__name">Clients</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features"> <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__ref ">2.4</span
><span class="kss-nav__name">Features</span> ><span class="kss-nav__name">Features</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery"> <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__ref ">2.5</span
><span class="kss-nav__name">Gallery</span> ><span class="kss-nav__name">Gallery</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay"> <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__ref kss-nav__ref-child">2.5.1</span
><span class="kss-nav__name">Gallery + Overflow</span> ><span class="kss-nav__name">Gallery + Overflow</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics"> <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__ref ">2.6</span
><span class="kss-nav__name">Metrics</span> ><span class="kss-nav__name">Metrics</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
<span class="kss-nav__ref ">2.7</span
><span class="kss-nav__name">Plans</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
<span class="kss-nav__ref ">2.8</span
><span class="kss-nav__name">Reasons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
<span class="kss-nav__ref ">2.9</span
><span class="kss-nav__name">Specs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
<span class="kss-nav__ref ">2.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
</ul> </ul>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">

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

@@ -37,41 +37,71 @@
</a> </a>
<ul class="kss-nav__menu-child"> <ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink"> <a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-activity">
<span class="kss-nav__ref ">2.1</span <span class="kss-nav__ref ">2.1</span
><span class="kss-nav__name"> Activity</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-blink">
<span class="kss-nav__ref ">2.2</span
><span class="kss-nav__name">Flexblocks</span> ><span class="kss-nav__name">Flexblocks</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-clients"> <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__ref ">2.3</span
><span class="kss-nav__name">Clients</span> ><span class="kss-nav__name">Clients</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-features"> <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__ref ">2.4</span
><span class="kss-nav__name">Features</span> ><span class="kss-nav__name">Features</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery"> <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__ref ">2.5</span
><span class="kss-nav__name">Gallery</span> ><span class="kss-nav__name">Gallery</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-gallery-overlay"> <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__ref kss-nav__ref-child">2.5.1</span
><span class="kss-nav__name">Gallery + Overflow</span> ><span class="kss-nav__name">Gallery + Overflow</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-metrics"> <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__ref ">2.6</span
><span class="kss-nav__name">Metrics</span> ><span class="kss-nav__name">Metrics</span>
</a> </a>
</li> </li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-plans">
<span class="kss-nav__ref ">2.7</span
><span class="kss-nav__name">Plans</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-reasons">
<span class="kss-nav__ref ">2.8</span
><span class="kss-nav__name">Reasons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-specs">
<span class="kss-nav__ref ">2.9</span
><span class="kss-nav__name">Specs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html#kssref-flexblock-steps">
<span class="kss-nav__ref ">2.10</span
><span class="kss-nav__name"> Steps</span>
</a>
</li>
</ul> </ul>
</li> </li>
<li class="kss-nav__menu-item"> <li class="kss-nav__menu-item">
@@ -110,13 +140,144 @@
</div> </div>
<section id="kssref-flexblock-activity" 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-activity">
<span class="kss-title__ref">
2.1
<span class="kss-title__permalink-hash">
#Flexblock.Activity
</span>
</span>
Activity
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock activity">
<li>
<a href="#" title="UX Designer at ACME">
<div>
<p class="year">
2016
</p>
<p class="title">
UX Designer at ACME
</p>
<p class="summary">
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
</p>
</div>
</a>
</li>
<li>
<a href="#" title="14 world famous buildings to inspire you">
<p class="year">
2 mins ago
</p>
<p class="title">
14 world famous buildings to inspire you
</p>
<p class="summary">
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
</p>
</a>
</li>
<li>
<a href="#" title="Co-Founder of GAMMA">
<p class="year">
2013
</p>
<p class="title">
Co-Founder of GAMMA
</p>
<p class="summary">
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
</p>
</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">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
&lt;div&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2016
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
UX Designer at ACME
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2 mins ago
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
14 world famous buildings to inspire you
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
&lt;p class&#x3D;&quot;year&quot;&gt;
2013
&lt;/p&gt;
&lt;p class&#x3D;&quot;title&quot;&gt;
Co-Founder of GAMMA
&lt;/p&gt;
&lt;p class&#x3D;&quot;summary&quot;&gt;
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-activity.scss</code>, line 5
</div>
</section>
<section id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 "> <section id="kssref-flexblock-blink" class="kss-section kss-section--depth-2 ">
<div class="kss-style"> <div class="kss-style">
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-blink"> <a class="kss-title__permalink" href="#kssref-flexblock-blink">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.1 2.2
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Blink #Flexblock.Blink
</span> </span>
@@ -270,7 +431,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-clients"> <a class="kss-title__permalink" href="#kssref-flexblock-clients">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.2 2.3
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Clients #Flexblock.Clients
</span> </span>
@@ -399,7 +560,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-features"> <a class="kss-title__permalink" href="#kssref-flexblock-features">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.3 2.4
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Features #Flexblock.Features
</span> </span>
@@ -525,7 +686,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery"> <a class="kss-title__permalink" href="#kssref-flexblock-gallery">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.4 2.5
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Gallery #Flexblock.Gallery
</span> </span>
@@ -640,7 +801,7 @@
<h3 class="kss-title kss-title--level-3"> <h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay"> <a class="kss-title__permalink" href="#kssref-flexblock-gallery-overlay">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.4.1 2.5.1
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Gallery.Overlay #Flexblock.Gallery.Overlay
</span> </span>
@@ -743,7 +904,7 @@
<h2 class="kss-title kss-title--level-2"> <h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-flexblock-metrics"> <a class="kss-title__permalink" href="#kssref-flexblock-metrics">
<span class="kss-title__ref"> <span class="kss-title__ref">
2.5 2.6
<span class="kss-title__permalink-hash"> <span class="kss-title__permalink-hash">
#Flexblock.Metrics #Flexblock.Metrics
</span> </span>
@@ -845,6 +1006,406 @@
</div> </div>
</section> </section>
<section id="kssref-flexblock-plans" 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-plans">
<span class="kss-title__ref">
2.7
<span class="kss-title__permalink-hash">
#Flexblock.Plans
</span>
</span>
Plans
</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 plans ">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</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">
block linkable
</div>
<div class="kss-modifier__example">
<ul class="flexblock plans blink">
<li>
<a href="#" title="Purchase">
<h2>Basic</h2>
<div>
<span class="price">Free</span>
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
<span class="button">Select</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Medium</h2>
<div>
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
<p>Clean markup with popular naming conventions. Minimum effort.</p>
<span class="button">Buy Now</span>
</div>
</a>
</li>
<li>
<a href="#" title="Purchase">
<h2>Premium <sup>(save 20%)</sup></h2>
<div>
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
<span class="button">Select</span>
</div>
</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">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
&lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Medium&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
&lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
&lt;div&gt;
&lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
&lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
&lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-plans.scss</code>, line 5
</div>
</section>
<section id="kssref-flexblock-reasons" 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-reasons">
<span class="kss-title__ref">
2.8
<span class="kss-title__permalink-hash">
#Flexblock.Reasons
</span>
</span>
Reasons
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock reasons">
<li>
<h2>Why WebSlides? Work better, faster.</h2>
<p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
</li>
<li>
<h2> Good karma. Just the essentials and using lovely CSS.</h2>
<p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
</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">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
&lt;li&gt;
&lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
&lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
&lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-reasons.scss</code>, line 5
</div>
</section>
<section id="kssref-flexblock-specs" 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-specs">
<span class="kss-title__ref">
2.9
<span class="kss-title__permalink-hash">
#Flexblock.Specs
</span>
</span>
Specs
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock specs">
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</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">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-specs.scss</code>, line 5
</div>
</section>
<section id="kssref-flexblock-steps" 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-steps">
<span class="kss-title__ref">
2.10
<span class="kss-title__permalink-hash">
#Flexblock.Steps
</span>
</span>
Steps
</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">
Example
</div>
<div class="kss-modifier__example">
<ul class="flexblock steps">
<li>
<h2>01. Passion</h2>
<p>When you're really passionate about your job, you can change the world.</p>
</li>
<li>
<div class="process step-2"></div>
<h2>02. Purpose</h2>
<p>Why does this business exist? How are you different? Why matters?</p>
</li>
<li>
<div class="process step-3"></div>
<h2>03. Principles</h2>
<p>Leadership through usefulness, openness, empathy, and good taste.</p>
</li>
<li>
<div class="process step-4"></div>
<h2>04. Process</h2>
<ul>
<li>Useful</li>
<li>Easy</li>
<li>Fast</li>
<li>Beautiful</li>
</ul>
</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">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
&lt;li&gt;
&lt;h2&gt;01. Passion&lt;/h2&gt;
&lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
&lt;h2&gt;02. Purpose&lt;/h2&gt;
&lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
&lt;h2&gt;03. Principles&lt;/h2&gt;
&lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
&lt;h2&gt;04. Process&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Useful&lt;/li&gt;
&lt;li&gt;Easy&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Beautiful&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-steps.scss</code>, line 6
</div>
</section>
</article> </article>
<!-- SCRIPTS --> <!-- SCRIPTS -->

51
src/scss/modules/_flexblock-activity.scss
View File

@@ -2,7 +2,56 @@
6.9 Block Activity <ul class="activity"> 6.9 Block Activity <ul class="activity">
CV / News CV / News
============================================= */ ============================================= */
// Activity
//
// Bla bla bla
//
// Markup:
// <ul class="flexblock activity">
// <li>
// <a href="#" title="UX Designer at ACME">
// <div>
// <p class="year">
// 2016
// </p>
// <p class="title">
// UX Designer at ACME
// </p>
// <p class="summary">
// This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
// </p>
// </div>
// </a>
// </li>
// <li>
// <a href="#" title="14 world famous buildings to inspire you">
// <p class="year">
// 2 mins ago
// </p>
// <p class="title">
// 14 world famous buildings to inspire you
// </p>
// <p class="summary">
// From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
// </p>
// </a>
// </li>
// <li>
// <a href="#" title="Co-Founder of GAMMA">
// <p class="year">
// 2013
// </p>
// <p class="title">
// Co-Founder of GAMMA
// </p>
// <p class="summary">
// The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
// </p>
// </a>
// </li>
// </ul>
//
// Styleguide Flexblock.Activity
.flexblock.activity { .flexblock.activity {
flex-direction: column; flex-direction: column;

41
src/scss/modules/_flexblock-plans.scss
View File

@@ -2,6 +2,47 @@
6.8 Plans / Pricing <ul class="flexblock plans"> 6.8 Plans / Pricing <ul class="flexblock plans">
================================================= */ ================================================= */
// Plans
//
// Bla bla bla
//
// Markup:
// <ul class="flexblock plans {{modifier_class}}">
// <li>
// <a href="#" title="Purchase">
// <h2>Basic</h2>
// <div>
// <span class="price">Free</span>
// <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
// <span class="button">Select</span>
// </div>
// </a>
// </li>
// <li>
// <a href="#" title="Purchase">
// <h2>Medium</h2>
// <div>
// <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
// <p>Clean markup with popular naming conventions. Minimum effort.</p>
// <span class="button">Buy Now</span>
// </div>
// </a>
// </li>
// <li>
// <a href="#" title="Purchase">
// <h2>Premium <sup>(save 20%)</sup></h2>
// <div>
// <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
// <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
// <span class="button">Select</span>
// </div>
// </a>
// </li>
// </ul>
//
// .blink - block linkable
//
// Styleguide Flexblock.Plans
.flexblock.plans { .flexblock.plans {
> li { > li {
border-radius: 3px; border-radius: 3px;

18
src/scss/modules/_flexblock-reasons.scss
View File

@@ -2,6 +2,23 @@
6.6 Reasons/Why/Numbers (counter-increment) 6.6 Reasons/Why/Numbers (counter-increment)
<ul class="flexblock reasons"> <ul class="flexblock reasons">
=================================================== */ =================================================== */
// Reasons
//
// Bla bla bla
//
// Markup:
// <ul class="flexblock reasons">
// <li>
// <h2>Why WebSlides? Work better, faster.</h2>
// <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
// </li>
// <li>
// <h2> Good karma. Just the essentials and using lovely CSS.</h2>
// <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
// </li>
// </ul>
//
// Styleguide Flexblock.Reasons
.flexblock.reasons { .flexblock.reasons {
li { li {
counter-increment: list; counter-increment: list;
@@ -38,4 +55,3 @@
} }
} }
} }

28
src/scss/modules/_flexblock-specs.scss
View File

@@ -2,6 +2,34 @@
6.5 Specs/Items: <ul class="flexblock specs"> 6.5 Specs/Items: <ul class="flexblock specs">
======================================================= */ ======================================================= */
// Specs
//
// Bla bla bla
//
// Markup:
// <ul class="flexblock specs">
// <li>
// <div>
// <h2>Ultra-Fast WiFi</h2>
// Simple and secure file sharing.
// </div>
// </li>
// <li>
// <div>
// <h2>All day battery life</h2>
// Your battery worries may be over.
// </div>
// </li>
// <li>
// <div>
// <h2>Lifetime Warranty </h2>
// We'll fix it or if we can't, we'll replace it.
// </div>
// </li>
// </ul>
//
// Styleguide Flexblock.Specs
.specs li { .specs li {
text-align: left; text-align: left;
width: 100%; width: 100%;

33
src/scss/modules/_flexblock-steps.scss
View File

@@ -3,6 +3,39 @@
About, Philosophy... About, Philosophy...
=================================================== */ =================================================== */
// Steps
//
// Bla bla bla
//
// Markup:
// <ul class="flexblock steps">
// <li>
// <h2>01. Passion</h2>
// <p>When you're really passionate about your job, you can change the world.</p>
// </li>
// <li>
// <div class="process step-2"></div>
// <h2>02. Purpose</h2>
// <p>Why does this business exist? How are you different? Why matters?</p>
// </li>
// <li>
// <div class="process step-3"></div>
// <h2>03. Principles</h2>
// <p>Leadership through usefulness, openness, empathy, and good taste.</p>
// </li>
// <li>
// <div class="process step-4"></div>
// <h2>04. Process</h2>
// <ul>
// <li>Useful</li>
// <li>Easy</li>
// <li>Fast</li>
// <li>Beautiful</li>
// </ul>
// </li>
// </ul>
//
// Styleguide Flexblock.Steps
.steps li { .steps li {
width: 100%; width: 100%;