<!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 --> </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 --> <ul class="kss-nav__menu-child"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-agaricons"> <!-- <span class="kss-nav__ref">4.1</span> --> Agaricons </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-card-allow-linking-the-entire-object"> <!-- <span class="kss-nav__ref">4.2</span> --> Card </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-carousel"> <!-- <span class="kss-nav__ref">4.3</span> --> Carousel </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-footer"> <!-- <span class="kss-nav__ref">4.4</span> --> Footer </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-iconlist"> <!-- <span class="kss-nav__ref">4.5</span> --> Icon List </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-media"> <!-- <span class="kss-nav__ref">4.6</span> --> Media </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-media-comment"> <!-- <span class="kss-nav__ref">4.6.1</span> --> Comments </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-media-list"> <!-- <span class="kss-nav__ref">4.6.2</span> --> Media List </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-navbar"> <!-- <span class="kss-nav__ref">4.7</span> --> Navbar </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-pagination"> <!-- <span class="kss-nav__ref">4.8</span> --> Pagination </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-related"> <!-- <span class="kss-nav__ref">4.9</span> --> Related </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-tabs"> <!-- <span class="kss-nav__ref">4.10</span> --> Tabs </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-teaser"> <!-- <span class="kss-nav__ref">4.11</span> --> Teaser </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-tile"> <!-- <span class="kss-nav__ref">4.12</span> --> Tile </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-component.html#kssref-component-titlebar"> <!-- <span class="kss-nav__ref">4.13</span> --> Titlebar </a> </li> </ul> </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-component"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component">Info</a> <h1 class="kss-title"> <a class="kss-link" href="#kssref-component">4 Component </a> </> <!-- Description --> <div class="kss-description"> <p>Custom structures.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric.scss</code>, line 49 </div> <!-- Markup --> </div><!-- kss-pattern-code --> </div><!-- kss-pattern --> </> <!-- Section --> <section id="" class="kss-section kss-section--depth-2 "> <a name="kssref-component-agaricons"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-agaricons">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-agaricons">4.1 Agaricons </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma icon classes.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-agaricons" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-agaricons">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.agaricons.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-component-card-allow-linking-the-entire-object"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-card-allow-linking-the-entire-object">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-card-allow-linking-the-entire-object">4.2 Card </a> </> <!-- Description --> <div class="kss-description"> <p>Extension of the Bulma card componnet.</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>.card-project</code> </div> <div class="kss-parameters__description"> for projects, 50% image, text on the right </div> </li> <li class="kss-parameters__item"> <div class="kss-parameters__name"> <code>.card-initiative</code> </div> <div class="kss-parameters__description"> for initiaitives, image on top </div> </li> </ul> <!-- Example --> <div id="component-card-allow-linking-the-entire-object" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-card-allow-linking-the-entire-object">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.card.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-component-carousel"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-carousel">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-carousel">4.3 Carousel </a> </> <!-- Description --> <div class="kss-description"> <p>Extension of <code>slick-theme.scss</code> from <a href="https://kenwheeler.github.io/slick/">Slick Carousel</a>.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-carousel" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-carousel">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.carousel.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-component-footer"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-footer">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-footer">4.4 Footer </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma footer component.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-footer" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-footer">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.footer.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-component-iconlist"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-iconlist">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-iconlist">4.5 Icon List </a> </> <!-- Description --> <div class="kss-description"> <p>Lists with icons to the left. Extends the agaricons component. You can select any icon in <code>_component.agaricons.scss</code></p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-iconlist" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-iconlist">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.iconlist.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-component-media"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-media">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-media">4.6 Media </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma media object.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-media" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-media">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.media.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-component-media-comment"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-media-comment">Info</a> <h3 class="kss-title"> <a class="kss-link" href="#kssref-component-media-comment">4.6.1 Comments </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma media object for use in blog comments.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-media-comment" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-media-comment">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.media.scss</code>, line 14 </div> <!-- Markup --> </div><!-- kss-pattern-code --> </div><!-- kss-pattern --> </> <!-- Section --> <section id="" class="kss-section kss-section--depth-3 "> <a name="kssref-component-media-list"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-media-list">Info</a> <h3 class="kss-title"> <a class="kss-link" href="#kssref-component-media-list">4.6.2 Media List </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma media object for use in blog teaser list.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-media-list" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-media-list">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.media.scss</code>, line 50 </div> <!-- Markup --> </div><!-- kss-pattern-code --> </div><!-- kss-pattern --> </> <!-- Section --> <section id="" class="kss-section kss-section--depth-2 "> <a name="kssref-component-navbar"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-navbar">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-navbar">4.7 Navbar </a> </> <!-- Description --> <div class="kss-description"> <p>Customize Bulma navbar. Uses <a href="http://scrollmagic.io">ScrollMagic</a> to change background colors for optimal legibility against various backgrounds.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-navbar" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-navbar">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.navbar.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-component-pagination"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-pagination">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-pagination">4.8 Pagination </a> </> <!-- Description --> <div class="kss-description"> <p>Extend Bulma pagination.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-pagination" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-pagination">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.pagination.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-component-related"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-related">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-related">4.9 Related </a> </> <!-- Description --> <div class="kss-description"> <p>Block of three related items.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-related" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-related">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.related.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-component-tabs"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-tabs">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-tabs">4.10 Tabs </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma Tabs component.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-tabs" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-tabs">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.tabs.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-component-teaser"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-teaser">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-teaser">4.11 Teaser </a> </> <!-- Description --> <div class="kss-description"> <p>Styles for teasers, typically lists of linked excerpts.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-teaser" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-teaser">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.teaser.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-component-tile"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-tile">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-tile">4.12 Tile </a> </> <!-- Description --> <div class="kss-description"> <p>Extends Bulma Tile component.</p> </div> </div><!-- kss-pattern__header --> <!-- Parameters --> <!-- Example --> <div id="component-tile" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-tile">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.tile.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-component-titlebar"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#component-titlebar">Info</a> <h2 class="kss-title"> <a class="kss-link" href="#kssref-component-titlebar">4.13 Titlebar </a> </> <!-- Description --> <div class="kss-description"> <p>Structure to title a section with the title to the left and links to the right.</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>.titlebar-bigborder</code> </div> <div class="kss-parameters__description"> border at the top </div> </li> <li class="kss-parameters__item"> <div class="kss-parameters__name"> <code>.titlebar-padded</code> </div> <div class="kss-parameters__description"> padding at the bottom </div> </li> </ul> <!-- Example --> <div id="component-titlebar" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#component-titlebar">Close</a> <!-- Source --> <div class="kss-source kss-style"> <b>Source</b><br> <code>agaric/_component.titlebar.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>