mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-22 12:53:23 +02:00
kss - Fixing menu links
This commit is contained in:
Luis Sacristán
208
doc/styleguide/item-layout-alignment.html
Normal file
208
doc/styleguide/item-layout-alignment.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSlides - Documentation 1.5.0</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">
|
||||
<header class="kss-header">
|
||||
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
|
||||
<nav class="kss-header-nav">
|
||||
<ul>
|
||||
<li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
|
||||
<li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
|
||||
<li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="kss-sub-header">
|
||||
<p>WebSlides - Documentation 1.5.0</p>
|
||||
</div>
|
||||
<div class="kss-container">
|
||||
<div class="kss-sidebar kss-style">
|
||||
<nav class="kss-nav">
|
||||
<ul class="kss-nav__menu">
|
||||
<li class="kss-nav__menu-item">
|
||||
<a class="kss-nav__menu-link " href="./">
|
||||
<span class="kss-nav__name">Introduction</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-architecture.html">
|
||||
<span class="kss-nav__name">Architecture</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-contents.html">
|
||||
<span class="kss-nav__name">Contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-forms.html">
|
||||
<span class="kss-nav__name">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
|
||||
<span class="kss-nav__name">Landings and portfolio</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-layout.html">
|
||||
<span class="kss-nav__name">Layout</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-longforms.html">
|
||||
<span class="kss-nav__name">Longform</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-media.html">
|
||||
<span class="kss-nav__name">Media</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
|
||||
<span class="kss-nav__name">Multipurpose blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="kss-nav__menu-item kss-nav-has-children">
|
||||
<a class="kss-nav__menu-link " href="section-typography.html">
|
||||
<span class="kss-nav__name">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div role="main" class="kss-main">
|
||||
|
||||
<div id="kssref-layout-alignment" 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-layout-alignment">
|
||||
Align content
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="kss-modifier__wrapper">
|
||||
<div class="kss-modifier__heading kss-style">
|
||||
Examples
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__default-name kss-style">
|
||||
Default styling
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__example">
|
||||
<div>
|
||||
<img src="../../../static/images/iphone.png" class="size-50 " />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
|
||||
</div>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.alignright
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
Align right.
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<div>
|
||||
<img src="../../../static/images/iphone.png" class="size-50 alignright" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
|
||||
</div>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.alignleft
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
Align left.
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<div>
|
||||
<img src="../../../static/images/iphone.png" class="size-50 alignleft" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
|
||||
</div>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
<div class="kss-modifier__name kss-style">
|
||||
.aligncenter
|
||||
</div>
|
||||
<div class="kss-modifier__description kss-style">
|
||||
Align center.
|
||||
</div>
|
||||
<div class="kss-modifier__example">
|
||||
<div>
|
||||
<img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
|
||||
</div>
|
||||
<div class="kss-modifier__example-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="kss-markup kss-style">
|
||||
<summary>
|
||||
Markup
|
||||
</summary>
|
||||
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
|
||||
<img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
|
||||
</div></code></pre>
|
||||
</details>
|
||||
|
||||
<div class="kss-source kss-style">
|
||||
Source: <code>_base.scss</code>, line 143
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user