mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-23 13:23:23 +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

54
doc/styleguide/item-layout-background.html
View File

@@ -87,6 +87,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">
@@ -99,7 +125,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>
@@ -112,7 +138,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>
@@ -124,7 +150,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>
@@ -136,7 +162,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>
@@ -148,7 +174,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>
@@ -160,7 +186,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>
@@ -172,7 +198,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>
@@ -184,7 +210,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>
@@ -196,7 +222,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>
@@ -208,7 +234,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>
@@ -220,7 +246,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>
@@ -232,7 +258,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>
@@ -244,7 +270,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>
@@ -255,7 +281,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>