174 lines
7.7 KiB
HTML
174 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hugo Zen Style Guide</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/styles.css">
|
|
<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
|
|
<link rel="stylesheet" href="../static/css/style-guide/kss-only.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">Hugo Zen Style Guide</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-sass.html">
|
|
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-base.html">
|
|
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-layouts.html">
|
|
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html">
|
|
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-navigation.html">
|
|
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<article role="main" class="kss-main">
|
|
|
|
|
|
<div id="kssref-components-inline-sibling" 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-components-inline-sibling">
|
|
<span class="kss-title__ref">
|
|
4.8
|
|
<span class="kss-title__permalink-hash">
|
|
components.inline-sibling
|
|
</span>
|
|
</span>
|
|
Inline sibling
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-inline-sibling" data-kss-guides="true">
|
|
<span class="kss-toolbar__tooltip">Toggle example guides</span>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-inline-sibling" data-kss-markup="true">
|
|
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
|
|
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
|
|
<div class="kss-description">
|
|
<p>An element that needs to appear inline with the content that follows.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<h4 class="inline-sibling ">A Heading</h4>
|
|
<p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/inline-sibling/inline-sibling.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><h4 class="inline-sibling {{modifier_class}}">A Heading</h4>
|
|
<p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/inline-sibling/_inline-sibling.scss</code>, line 1
|
|
</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>
|