1689 lines
94 KiB
HTML
1689 lines
94 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" >
|
|
|
|
<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-forms.html">
|
|
<span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-layouts.html">
|
|
<span class="kss-nav__ref">4</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">5</span><span class="kss-nav__name">Components</span>
|
|
</a>
|
|
<ul class="kss-nav__menu-child">
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
|
|
<span class="kss-nav__ref ">5.1</span
|
|
><span class="kss-nav__name">Box</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
|
|
<span class="kss-nav__ref ">5.2</span
|
|
><span class="kss-nav__name">Clearfix</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
|
|
<span class="kss-nav__ref ">5.3</span
|
|
><span class="kss-nav__name">Divider</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
|
|
<span class="kss-nav__ref ">5.4</span
|
|
><span class="kss-nav__name">Branding header</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
|
|
<span class="kss-nav__ref ">5.5</span
|
|
><span class="kss-nav__name">Hidden</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
|
|
<span class="kss-nav__ref ">5.6</span
|
|
><span class="kss-nav__name">Highlight mark</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
|
|
<span class="kss-nav__ref ">5.7</span
|
|
><span class="kss-nav__name">Inline links</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
|
|
<span class="kss-nav__ref ">5.8</span
|
|
><span class="kss-nav__name">Inline sibling</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
|
|
<span class="kss-nav__ref ">5.9</span
|
|
><span class="kss-nav__name">Do not print</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
|
|
<span class="kss-nav__ref ">5.10</span
|
|
><span class="kss-nav__name">Responsive video</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
|
|
<span class="kss-nav__ref ">5.11</span
|
|
><span class="kss-nav__name">Visually hidden</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
|
|
<span class="kss-nav__ref ">5.12</span
|
|
><span class="kss-nav__name">Watermark</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
|
|
<span class="kss-nav__ref ">5.13</span
|
|
><span class="kss-nav__name">Wireframe</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-navigation.html">
|
|
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<article role="main" class="kss-main">
|
|
|
|
|
|
<div id="kssref-components" class="kss-section kss-section--depth-1 ">
|
|
<div class="kss-style">
|
|
<h1 class="kss-title kss-title--level-1">
|
|
<a class="kss-title__permalink" href="#kssref-components">
|
|
<span class="kss-title__ref">
|
|
5
|
|
<span class="kss-title__permalink-hash">
|
|
components
|
|
</span>
|
|
</span>
|
|
Components
|
|
</a>
|
|
</h1>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Design components are reusable designs that can be applied using just the CSS
|
|
class names specified in the component.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>styles.scss</code>, line 41
|
|
</div>
|
|
</div>
|
|
<section id="kssref-components-box" 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-components-box">
|
|
<span class="kss-title__ref">
|
|
5.1
|
|
<span class="kss-title__permalink-hash">
|
|
components.box
|
|
</span>
|
|
</span>
|
|
Box
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-box" data-kss-fullscreen="kssref-components-box">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-box.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-box" 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-box" 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>A simple box style.</p>
|
|
<p>A Drupal block is often styled as a box. However, this design component is
|
|
not applied to any blocks by default; it is used as an example of how to
|
|
build and document a CSS component.</p>
|
|
<p>"box" is the name of our component, so we define a <code>.box</code> class that we can
|
|
apply to any HTML element that needs the box styling. We also provide a
|
|
<code>%box</code> placeholder selector so that we can easily extend the basic box
|
|
component with <code>@extend %box;</code>.</p>
|
|
<p>Take a look at the source code for this component for more information about
|
|
building a good component.</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">
|
|
<div class="box ">
|
|
<h2 class="box__title">Box title</h2>
|
|
<div class="box__content">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__name kss-style">
|
|
:hover
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
The hover/focus styling.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="box pseudo-class-hover">
|
|
<h2 class="box__title">Box title</h2>
|
|
<div class="box__content">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
<div class="kss-modifier__name kss-style">
|
|
.box--highlight
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
The "highlight" box variant.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="box box--highlight">
|
|
<h2 class="box__title">Box title</h2>
|
|
<div class="box__content">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/box/box.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="box {{modifier_class}}">
|
|
<h2 class="box__title">{{title}}</h2>
|
|
<div class="box__content">
|
|
{{content}}
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/box/_box.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-clearfix" 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-components-clearfix">
|
|
<span class="kss-title__ref">
|
|
5.2
|
|
<span class="kss-title__permalink-hash">
|
|
components.clearfix
|
|
</span>
|
|
</span>
|
|
Clearfix
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-clearfix" data-kss-fullscreen="kssref-components-clearfix">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-clearfix.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-clearfix" 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-clearfix" 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>Allows the bottom of an element to extend to the bottom of all floated child
|
|
elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="clearfix">
|
|
<div style="float: left; height: 50px; width: 50%;">A floated item.</div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/clearfix/clearfix.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="clearfix">
|
|
<div style="float: left; height: 50px; width: 50%;">A floated item.</div>
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/clearfix/_clearfix.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-divider" 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-components-divider">
|
|
<span class="kss-title__ref">
|
|
5.3
|
|
<span class="kss-title__permalink-hash">
|
|
components.divider
|
|
</span>
|
|
</span>
|
|
Divider
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-divider" data-kss-fullscreen="kssref-components-divider">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-divider.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-divider" 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-divider" 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>Can be used as an <code><hr></code>, an empty <code><div></code> or as a container.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="divider "></div>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
|
|
<div class="divider ">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
|
|
<hr class="divider ">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/divider/divider.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="divider {{modifier_class}}"></div>
|
|
|
|
<p>{{content}}</p>
|
|
|
|
<div class="divider {{modifier_class}}">
|
|
<p>{{content}}</p>
|
|
</div>
|
|
|
|
<hr class="divider {{modifier_class}}">
|
|
|
|
<p>{{content}}</p>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/divider/_divider.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-header" 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-components-header">
|
|
<span class="kss-title__ref">
|
|
5.4
|
|
<span class="kss-title__permalink-hash">
|
|
components.header
|
|
</span>
|
|
</span>
|
|
Branding header
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-header" data-kss-fullscreen="kssref-components-header">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-header.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-header" 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-header" 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>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<header class="header " role="banner">
|
|
<a href="/" title="Home" rel="home" class="header__logo">
|
|
<img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
|
|
</a>
|
|
|
|
<div class="header__name-and-slogan">
|
|
<h1 class="header__site-name">
|
|
<a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
|
|
</h1>
|
|
<div class="header__site-slogan">Slogan</div>
|
|
</div>
|
|
|
|
<nav class="header__secondary-menu" role="navigation">
|
|
<h2 class="visually-hidden">User menu</h2>
|
|
<ul class="links inline clearfix">
|
|
<li class="menu-2 first"><a href="/user">My account</a></li>
|
|
<li class="menu-15 last"><a href="/user/logout">Log out</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="header__region">
|
|
[Header region]
|
|
</div>
|
|
</header>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/header/header.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><header class="header {{modifier_class}}" role="banner">
|
|
<a href="/" title="Home" rel="home" class="header__logo">
|
|
<img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
|
|
</a>
|
|
|
|
<div class="header__name-and-slogan">
|
|
<h1 class="header__site-name">
|
|
<a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
|
|
</h1>
|
|
<div class="header__site-slogan">Slogan</div>
|
|
</div>
|
|
|
|
<nav class="header__secondary-menu" role="navigation">
|
|
<h2 class="visually-hidden">User menu</h2>
|
|
<ul class="links inline clearfix">
|
|
<li class="menu-2 first"><a href="/user">My account</a></li>
|
|
<li class="menu-15 last"><a href="/user/logout">Log out</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="header__region">
|
|
[Header region]
|
|
</div>
|
|
</header>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/header/_header.scss</code>, line 5
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-hidden" 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-components-hidden">
|
|
<span class="kss-title__ref">
|
|
5.5
|
|
<span class="kss-title__permalink-hash">
|
|
components.hidden
|
|
</span>
|
|
</span>
|
|
Hidden
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-hidden" data-kss-fullscreen="kssref-components-hidden">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-hidden.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-hidden" 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-hidden" 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>Hide elements from all users. Compare to the visually-hidden component.</p>
|
|
<p>Used for elements which should not be immediately displayed to any user. An
|
|
example would be a collapsible fieldset that will be expanded with a click
|
|
from a user.</p>
|
|
<p>For anything you want to hide on page load when JavaScript is enabled, use
|
|
the <code>.js-hidden</code> class.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="hidden ">
|
|
This content is hidden.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/hidden/hidden.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="hidden {{modifier_class}}">
|
|
This content is hidden.
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/hidden/_hidden.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-highlight-mark" 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-components-highlight-mark">
|
|
<span class="kss-title__ref">
|
|
5.6
|
|
<span class="kss-title__permalink-hash">
|
|
components.highlight-mark
|
|
</span>
|
|
</span>
|
|
Highlight mark
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-highlight-mark" data-kss-fullscreen="kssref-components-highlight-mark">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-highlight-mark.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-highlight-mark" 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-highlight-mark" 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>The "new" or "updated" marker. This is a very thin component. A front-end
|
|
developer may choose to delete this component and just style the <code><mark></code>
|
|
element directly.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<mark class="highlight-mark">New</mark>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/highlight-mark/highlight-mark.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><mark class="highlight-mark">New</mark>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/highlight-mark/_highlight-mark.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-inline-links" 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-components-inline-links">
|
|
<span class="kss-title__ref">
|
|
5.7
|
|
<span class="kss-title__permalink-hash">
|
|
components.inline-links
|
|
</span>
|
|
</span>
|
|
Inline links
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-inline-links" data-kss-fullscreen="kssref-components-inline-links">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-inline-links.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-inline-links" 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-links" 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>A list of links that are inline with each other.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<ul class="inline-links ">
|
|
<li class="inline-links__item"><a href="#">Read more</a></li>
|
|
<li class="inline-links__item"><a href="#">Comment</a></li>
|
|
</ul>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/inline-links/inline-links.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="inline-links {{modifier_class}}">
|
|
<li class="inline-links__item"><a href="#">Read more</a></li>
|
|
<li class="inline-links__item"><a href="#">Comment</a></li>
|
|
</ul>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/inline-links/_inline-links.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-inline-sibling" 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-components-inline-sibling">
|
|
<span class="kss-title__ref">
|
|
5.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-fullscreen="kssref-components-inline-sibling">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-inline-sibling.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<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>
|
|
</section>
|
|
<section id="kssref-components-print-none" 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-components-print-none">
|
|
<span class="kss-title__ref">
|
|
5.9
|
|
<span class="kss-title__permalink-hash">
|
|
components.print-none
|
|
</span>
|
|
</span>
|
|
Do not print
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-print-none" data-kss-fullscreen="kssref-components-print-none">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-print-none.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-print-none" 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-print-none" 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>Removes an element from the print version of the web site.</p>
|
|
<p>By importing these CSS rules in a file marked as media "all", we allow these
|
|
print rules to be aggregated with other stylesheets, for improved front-end
|
|
performance.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<p class="print-none">
|
|
This item will not be printed.
|
|
</p>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/print-none/print-none.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><p class="print-none">
|
|
This item will not be printed.
|
|
</p>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/print-none/_print-none.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-responsive-video" 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-components-responsive-video">
|
|
<span class="kss-title__ref">
|
|
5.10
|
|
<span class="kss-title__permalink-hash">
|
|
components.responsive-video
|
|
</span>
|
|
</span>
|
|
Responsive video
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-responsive-video" data-kss-fullscreen="kssref-components-responsive-video">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-responsive-video.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-responsive-video" 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-responsive-video" 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>Using a wrapper div, embedded videos can be made responsive so that their
|
|
intrinsic aspect ratio is preserved at any screen width. The
|
|
<code>responsive-video__embed</code> class is optional if the embed is an <code>iframe</code>.</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">
|
|
<div class="responsive-video ">
|
|
<iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__name kss-style">
|
|
.responsive-video--4-3
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
A video with a 4:3 aspect ratio instead of the default 16:9 one.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="responsive-video responsive-video--4-3">
|
|
<iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/responsive-video/responsive-video.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="responsive-video {{modifier_class}}">
|
|
<iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/responsive-video/_responsive-video.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-visually-hidden" 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-components-visually-hidden">
|
|
<span class="kss-title__ref">
|
|
5.11
|
|
<span class="kss-title__permalink-hash">
|
|
components.visually-hidden
|
|
</span>
|
|
</span>
|
|
Visually hidden
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-visually-hidden" data-kss-fullscreen="kssref-components-visually-hidden">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-visually-hidden.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-visually-hidden" 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-visually-hidden" 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>Make an element visually hidden, but accessible to screen readers, etc.</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">
|
|
<div class="visually-hidden ">
|
|
This text will be read by screen readers, but will be visually hidden.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__name kss-style">
|
|
.visually-hidden--off
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
Turns off the visually-hidden effect.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="visually-hidden visually-hidden--off">
|
|
This text will be read by screen readers, but will be visually hidden.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
<div class="kss-modifier__name kss-style">
|
|
.visually-hidden--focusable
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
Makes an element visually hidden by default, but visible when receiving focus.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="visually-hidden visually-hidden--focusable">
|
|
This text will be read by screen readers, but will be visually hidden.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
<div class="kss-modifier__name kss-style">
|
|
.visually-hidden--focusable:focus
|
|
</div>
|
|
<div class="kss-modifier__description kss-style">
|
|
A focused, and visible, element.
|
|
</div>
|
|
<div class="kss-modifier__example">
|
|
<div class="visually-hidden visually-hidden--focusable pseudo-class-focus">
|
|
This text will be read by screen readers, but will be visually hidden.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/visually-hidden/visually-hidden.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="visually-hidden {{modifier_class}}">
|
|
{{content}}
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/visually-hidden/_visually-hidden.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-watermark" 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-components-watermark">
|
|
<span class="kss-title__ref">
|
|
5.12
|
|
<span class="kss-title__permalink-hash">
|
|
components.watermark
|
|
</span>
|
|
</span>
|
|
Watermark
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-watermark" data-kss-fullscreen="kssref-components-watermark">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-watermark.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-watermark" 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-watermark" 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>Make the element appear beneath sibling elements, like a watermark.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div>
|
|
<mark class="watermark ">Unpublished</mark>
|
|
|
|
<div>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/watermark/watermark.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
|
|
<mark class="watermark {{modifier_class}}">{{content}}</mark>
|
|
|
|
{% if sibling %}
|
|
<div>{{ sibling }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/watermark/_watermark.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-components-wireframe" 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-components-wireframe">
|
|
<span class="kss-title__ref">
|
|
5.13
|
|
<span class="kss-title__permalink-hash">
|
|
components.wireframe
|
|
</span>
|
|
</span>
|
|
Wireframe
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-components-wireframe" data-kss-fullscreen="kssref-components-wireframe">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" 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="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" 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="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-components-wireframe.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</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 x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-components-wireframe" 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-wireframe" 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>Add wireframes around main layout elements. <a href="http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain">Wireframes</a>
|
|
are useful when prototyping a website.</p>
|
|
<p>This design is not applied to the site unless you set the following Sass
|
|
variable: <code>$with-wireframes: true;</code></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
<div class="wireframe">
|
|
An item inside a wireframe.
|
|
</div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<details class="kss-markup kss-style">
|
|
<summary>
|
|
Markup: <code>components/wireframe/wireframe.twig</code>
|
|
</summary>
|
|
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="wireframe">
|
|
{{content}}
|
|
</div>
|
|
</code></pre>
|
|
</details>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>components/wireframe/_wireframe.scss</code>, line 3
|
|
</div>
|
|
</section>
|
|
</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>
|