agaric/patternlibrary
10
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
patternlibrary/styleguide/section-layout.html

258 lines
10 KiB
HTML
Raw Permalink Normal View History

initial import
2018-06-21 01:38:13 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Agaric</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">
Commit generated styleguide
2018-08-20 22:27:23 +00:00
<link rel="stylesheet" href="../agaric/css/agaric.css">
initial import
2018-06-21 01:38:13 +00:00
</head>
<body id="kss-node" >
<!-- kss-sidebar -->
<div class="kss-sidebar">
<header class="kss-sidebar__header">
<a class="kss-link" href="index.html">
<h1 class="kss-doc-title">Agaric</h1>
</a>
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-componenet.html">
<!-- <span class="kss-nav__ref">1</span> -->
Componenet</a>
<!-- Design links stright to item tempplate -->
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<!-- <span class="kss-nav__ref">2</span> -->
Base</a>
<!-- Design links stright to item tempplate -->
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<!-- <span class="kss-nav__ref">3</span> -->
Layout</a>
<!-- Design links stright to item tempplate -->
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-columns">
<!-- <span class="kss-nav__ref">3.1</span> -->
Columns
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html#kssref-layout-flow">
<!-- <span class="kss-nav__ref">3.2</span> -->
Flow Layout
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-component.html">
<!-- <span class="kss-nav__ref">4</span> -->
Component</a>
<!-- Design links stright to item tempplate -->
</li>
</ul>
</nav>
</div>
<!-- kss-main -->
<div class="kss-main-wrap">
<article role="main" class="kss-main">
<!-- Section -->
<div id="" class="kss-section kss-section--depth-1 ">
<a name="kssref-layout"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#layout">Info</a>
<h1 class="kss-title">
<a class="kss-link" href="#kssref-layout">3
Layout
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Styling that determines the position of content on the page.</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="layout" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#layout">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric.scss</code>, line
Commit updated styleguide (only line number references changed)
2019-01-29 02:41:58 +00:00
36
initial import
2018-06-21 01:38:13 +00:00
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-layout-columns"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#layout-columns">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-layout-columns">3.1
Columns
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Extends Bulma Columns</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-equal-height</code>
</div>
<div class="kss-parameters__description">
equal height child lements
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-centered-vert</code>
</div>
<div class="kss-parameters__description">
vertical center child content
</div>
</li>
</ul>
<!-- Example -->
<div id="layout-columns" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#layout-columns">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_layout.columns.scss</code>, line
1
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-layout-flow"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#layout-flow">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-layout-flow">3.2
Flow Layout
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Flow layouts are intended for use with the Drupal Paragraphs module</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.flow-thirds</code>
</div>
<div class="kss-parameters__description">
add to parent element, use three columns
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.flow_middle</code>
</div>
<div class="kss-parameters__description">
center column (default)
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.flow_left</code>
</div>
<div class="kss-parameters__description">
float to left column
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.flow_right</code>
</div>
<div class="kss-parameters__description">
float to right column
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.flow_full</code>
</div>
<div class="kss-parameters__description">
full-width column
</div>
</li>
</ul>
<!-- Example -->
<div id="layout-flow" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#layout-flow">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_layout.flow.scss</code>, line
1
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
</article>
</div>
Commit generated styleguide
2018-08-20 22:27:23 +00:00
<script src="../agaric/js/jquery-3.2.1.min.js"></script>
initial import
2018-06-21 01:38:13 +00:00
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script>
$(document).ready(function() {
$(".kss-code-toggle").on("click tap", function(e) {
e.preventDefault();
var url = $(this).attr('href')
var objRef = url.substring(url.indexOf('#') + 1);
$("#" + objRef).toggleClass('active');
});
});
</script>
</body>
</html>
Reference in a new issue Copy permalink