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

kss - Layouts section

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-13 21:03:44 +02:00
parent e9d9bf973d
commit f31f8045c0
23 changed files with 590 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -185,6 +185,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;7" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;6" title="Example left" target="_blank">Example left</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;8" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;5" title="In the header" target="_blank">In the header</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="In the footer" target="_blank">In the footer</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -271,6 +291,32 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Example 1" target="_blank">Example 1</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;59" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;60" title="Example 3" target="_blank">Example 3</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;61" title="Example 4" target="_blank">Example 4</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;51" title="Right top" target="_blank">Right top</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Right bottom" target="_blank">Right bottom</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;87" title="Left bottom" target="_blank">Left bottom</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -283,7 +329,7 @@
<div class="kss-modifier__example">
<section>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -296,7 +342,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -308,7 +354,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -320,7 +366,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -332,7 +378,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -344,7 +390,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -356,7 +402,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -368,7 +414,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -380,7 +426,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -392,7 +438,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -404,7 +450,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -416,7 +462,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -428,7 +474,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -439,7 +485,7 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/800/800/city/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>
@@ -460,6 +506,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;100" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -469,7 +523,9 @@
<div class="kss-modifier__example">
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<div class="kss-container-background-anim">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
</div>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -481,12 +537,14 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;div class&#x3D;&quot;kss-container-background-anim&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 140
Source: <code>modules/_slides-bg.scss</code>, line 152
</div>
</div>
@@ -502,6 +560,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;34" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -540,7 +606,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 92
Source: <code>modules/_slides-bg.scss</code>, line 101
</div>
</div>
@@ -576,6 +642,20 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="White" target="_blank">White</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;28" title="Several colors" target="_blank">Several colors</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Examples" target="_blank">Examples</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -584,19 +664,19 @@
<div class="kss-modifier__example">
<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>
<span class="bg-primary">Primary #44d</span>
<span class="bg-secondary">Secondary #67d</span>
<span class="bg-light">Light #f7f9fb</span>
<span class="bg-black">Black #000</span>
<span class="bg-black-blue">Black blue #123</span>
<span class="bg-blue">Blue #346</span>
<span class="bg-brown">Brown #f9f8f2</span>
<span class="bg-gray">Gray #d5d9e2</span>
<span class="bg-green">Green #077</span>
<span class="bg-purple">Purple #62b</span>
<span class="bg-red">Red #c23</span>
<span class="bg-white">White #fff</span>
<span class="bg-facebook">Facebook #3b5998</span>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -606,19 +686,19 @@
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
</details>
<div class="kss-source kss-style">
@@ -653,6 +733,10 @@
<div class="bg-gradient-h">Horizontal</div>
<div class="bg-gradient-v">Vertical</div>
<div class="bg-gradient-r">Radial</div>
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide=29)
[Vertical](https://webslides.tv/demos/classes#slide=32)
[Radial](https://webslides.tv/demos/classes#slide=31)
<div class="kss-modifier__example-footer"></div>
</div>
@@ -664,11 +748,15 @@
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide&#x3D;29)
[Vertical](https://webslides.tv/demos/classes#slide&#x3D;32)
[Radial](https://webslides.tv/demos/classes#slide&#x3D;31)</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 193
Source: <code>_color.scss</code>, line 201
</div>
</div>
@@ -688,6 +776,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;28" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -718,7 +814,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 168
Source: <code>_color.scss</code>, line 173
</div>
</div>
@@ -739,6 +835,29 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;18" title="Example" target="_blank">Example</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;4" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;20" title="Sidebar + main" target="_blank">Sidebar + main</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;21" title="Main + sidebar" target="_blank">Main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;22" title="Sidebar + main + sidebar" target="_blank">Sidebar + main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;9" title="Columns" target="_blank">Columns</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -824,6 +943,14 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;8" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -970,6 +1097,17 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;25" title="50%" target="_blank">50%</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;26" title="30%" target="_blank">30%</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -1065,7 +1203,7 @@ Auto-fill &amp; Equal height</p>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 189
Source: <code>_base.scss</code>, line 197
</div>
</div>
@@ -1178,12 +1316,9 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
@@ -1192,18 +1327,6 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
bottom
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
@@ -1216,7 +1339,7 @@ All HTML elements will have those styles</p>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 74
Source: <code>modules/_slides.scss</code>, line 72
</div>
</div>
@@ -1281,12 +1404,9 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-top">
@@ -1295,18 +1415,6 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
top
</div>
<div class="kss-modifier__example">
<section class="slide-top">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">