patternlibrary/styleguide/section-base.html

1290 lines
56 KiB
HTML

<!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">
<link rel="stylesheet" href="../agaric/css/agaric.css">
</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 -->
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-blockquote">
<!-- <span class="kss-nav__ref">2.1</span> -->
Blockquote
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-elements">
<!-- <span class="kss-nav__ref">2.2</span> -->
Elements
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-elements-byline">
<!-- <span class="kss-nav__ref">2.2.1</span> -->
Byline
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-elements-rule">
<!-- <span class="kss-nav__ref">2.2.2</span> -->
Rule
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-elements-titles">
<!-- <span class="kss-nav__ref">2.2.3</span> -->
Titles
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-form">
<!-- <span class="kss-nav__ref">2.3</span> -->
Form
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography">
<!-- <span class="kss-nav__ref">2.4</span> -->
Typography
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-blockquote">
<!-- <span class="kss-nav__ref">2.4.1</span> -->
Blockquote
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-definitionlist">
<!-- <span class="kss-nav__ref">2.4.2</span> -->
Definition List
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-headings">
<!-- <span class="kss-nav__ref">2.4.3</span> -->
Headings
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-horizontalrule">
<!-- <span class="kss-nav__ref">2.4.4</span> -->
Horizontal Rule
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-link">
<!-- <span class="kss-nav__ref">2.4.5</span> -->
Link
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-orderedlist">
<!-- <span class="kss-nav__ref">2.4.6</span> -->
Ordered List
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-paragraph">
<!-- <span class="kss-nav__ref">2.4.7</span> -->
Paragraph
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-table">
<!-- <span class="kss-nav__ref">2.4.8</span> -->
Table
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-title">
<!-- <span class="kss-nav__ref">2.4.9</span> -->
Title
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-typography-unorderedlist">
<!-- <span class="kss-nav__ref">2.4.10</span> -->
Unordered List
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables">
<!-- <span class="kss-nav__ref">2.5</span> -->
Bulma Variables
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables">
<!-- <span class="kss-nav__ref">2.5</span> -->
Global Variables
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-animation">
<!-- <span class="kss-nav__ref">2.5.1</span> -->
Animation
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-borders">
<!-- <span class="kss-nav__ref">2.5.2</span> -->
Borders
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-breakpoints">
<!-- <span class="kss-nav__ref">2.5.3</span> -->
Breakpoints
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-colors">
<!-- <span class="kss-nav__ref">2.5.4</span> -->
Colors
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-fonts">
<!-- <span class="kss-nav__ref">2.5.5</span> -->
Fonts
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-grid">
<!-- <span class="kss-nav__ref">2.5.6</span> -->
Grid
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-variables-typography">
<!-- <span class="kss-nav__ref">2.5.7</span> -->
Typography
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-figure">
<!-- <span class="kss-nav__ref">2.6</span> -->
Figures and Images
</a>
</li>
</ul>
</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 -->
</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-base"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base">Info</a>
<h1 class="kss-title">
<a class="kss-link" href="#kssref-base">2
Base
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Styling for basic HTML block and inline elements.</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric.scss</code>, line
21
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-base-blockquote"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-blockquote">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-blockquote">2.1
Blockquote
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Intended for use on node pages such as blog posts and case studies.</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-blockquote" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-blockquote">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.blockquote.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-base-elements"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-elements">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-elements">2.2
Elements
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Extend Bulma basic HTML elements in <code>.content</code> blocks. It includes color classes.</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-blue</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-marine</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-berry</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-cinnamon</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-dark</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-grey</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-dandelion</code>
</div>
<div class="kss-parameters__description">
color
</div>
</li>
</ul>
<!-- Example -->
<div id="base-elements" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-elements">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.elements.scss</code>, line
1
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-elements-byline"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-elements-byline">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-elements-byline">2.2.1
Byline
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-elements-byline" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-elements-byline">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.elements.scss</code>, line
113
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-elements-rule"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-elements-rule">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-elements-rule">2.2.2
Rule
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Adds big border</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-elements-rule" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-elements-rule">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.elements.scss</code>, line
82
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-elements-titles"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-elements-titles">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-elements-titles">2.2.3
Titles
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Extends Bulma <code>.title</code> and <code>.subtitle</code> classes</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-compact</code>
</div>
<div class="kss-parameters__description">
remove margins and spacing
</div>
</li>
</ul>
<!-- Example -->
<div id="base-elements-titles" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-elements-titles">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.elements.scss</code>, line
97
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-base-form"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-form">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-form">2.3
Form
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Extends Bulma Form classes.</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-form" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-form">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.form.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-base-typography"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-typography">2.4
Typography
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>...</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-sans</code>
</div>
<div class="kss-parameters__description">
sans serif @font-face {
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name">
<code>.is-mono</code>
</div>
<div class="kss-parameters__description">
monospace font
</div>
</li>
</ul>
<!-- Example -->
<div id="base-typography" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
1
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-blockquote"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-blockquote">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-blockquote">2.4.1
Blockquote
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-blockquote" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-blockquote">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
126
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-definitionlist"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-definitionlist">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-definitionlist">2.4.2
Definition List
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-definitionlist" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-definitionlist">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
141
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-headings"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-headings">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-headings">2.4.3
Headings
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-headings" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-headings">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
67
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-horizontalrule"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-horizontalrule">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-horizontalrule">2.4.4
Horizontal Rule
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-horizontalrule" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-horizontalrule">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
156
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-link"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-link">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-link">2.4.5
Link
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-link" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-link">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
146
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-orderedlist"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-orderedlist">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-orderedlist">2.4.6
Ordered List
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-orderedlist" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-orderedlist">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
131
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-paragraph"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-paragraph">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-paragraph">2.4.7
Paragraph
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-paragraph" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-paragraph">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
121
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-table"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-table">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-table">2.4.8
Table
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-table" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-table">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
151
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-title"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-title">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-title">2.4.9
Title
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-title" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-title">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
21
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-typography-unorderedlist"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-typography-unorderedlist">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-typography-unorderedlist">2.4.10
Unordered List
</a>
</>
<!-- Description -->
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-typography-unorderedlist" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-typography-unorderedlist">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.typography.scss</code>, line
136
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-base-variables"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-variables">2.5
Bulma Variables
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Customize Bulma variables</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.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-base-variables"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-variables">2.5
Global Variables
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Custom overrides of <code>bulma/utilities/initial-variables.sass</code>.</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric.scss</code>, line
3
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-animation"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-animation">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-animation">2.5.1
Animation
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Animation timing</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-animation" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-animation">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
171
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-borders"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-borders">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-borders">2.5.2
Borders
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Border radius</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-borders" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-borders">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
181
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-breakpoints"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-breakpoints">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-breakpoints">2.5.3
Breakpoints
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Set responsive breakpoints</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-breakpoints" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-breakpoints">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
155
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-colors"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-colors">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-colors">2.5.4
Colors
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Assign colors</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-colors" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-colors">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
12
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-fonts"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-fonts">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-fonts">2.5.5
Fonts
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Set fonts</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-fonts" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-fonts">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
91
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-grid"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-grid">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-grid">2.5.6
Grid
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Customize grid dimensions</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-grid" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-grid">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
146
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-3 ">
<a name="kssref-base-variables-typography"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-variables-typography">Info</a>
<h3 class="kss-title">
<a class="kss-link" href="#kssref-base-variables-typography">2.5.7
Typography
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>Customize type sizes and weights</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-variables-typography" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-variables-typography">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_variables.scss</code>, line
121
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
<!-- Section -->
<section id="" class="kss-section kss-section--depth-2 ">
<a name="kssref-base-figure"></a>
<div class="kss-pattern"><!-- kss-pattern -->
<!-- Header -->
<div class="kss-pattern__header"><!-- kss-pattern__header -->
<a class="kss-code-toggle" href="#base-figure">Info</a>
<h2 class="kss-title">
<a class="kss-link" href="#kssref-base-figure">2.6
Figures and Images
</a>
</>
<!-- Description -->
<div class="kss-description">
<p>...</p>
</div>
</div><!-- kss-pattern__header -->
<!-- Parameters -->
<!-- Example -->
<div id="base-figure" class="kss-pattern-code"><!-- kss-pattern-code -->
<a class="kss-code-toggle" href="#base-figure">Close</a>
<!-- Source -->
<div class="kss-source kss-style">
<b>Source</b><br>
<code>agaric/_base.figure.scss</code>, line
1
</div>
<!-- Markup -->
</div><!-- kss-pattern-code -->
</div><!-- kss-pattern -->
</>
</article>
</div>
<script src="../agaric/js/jquery-3.2.1.min.js"></script>
<!-- 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>