Probo Style Guide

6.1 #permalink Header

We want to maintain a consistent header across Probo sites. Make sure your site uses these classes and similar markup.

.header

The wrapper for header styles.

<header class="header">
  <div class="header__wrapper">
    <div class="header__title">
      <a class="header__title-link" href="/">
        <svg viewBox="0 0 592 139" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Probo_Logo_2017" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="XMLID_155_" fill-rule="nonzero">
                    <polygon id="XMLID_165_" fill="#E9D4E2" points="47.4 22.8 63.1 58.5 100.9 33.4 85.7 0"></polygon>
                    <polygon id="XMLID_164_" fill="#E8D3E1" points="128.4 105.7 137.6 62.7 105 85.4 95 130.2"></polygon>
                    <polygon id="XMLID_163_" fill="#F5ECF2" points="88.1 1.2 102.7 33.1 136.8 58.1 122 24.5"></polygon>
                    <polygon id="XMLID_162_" fill="#FBF6F9" points="64.3 59.7 104.2 83.9 137.4 60.7 102 34.7"></polygon>
                    <polygon id="XMLID_161_" fill="#EBD9E6" points="63.3 61.1 53.5 104.8 93.1 130.9 103.2 85.3"></polygon>
                    <polygon id="XMLID_160_" fill="#BA7CA6" points="10.8 109.9 19.3 65.8 10.9 30 0 78.7"></polygon>
                    <polygon id="XMLID_159_" fill="#D8B4CC" points="46 21.6 81.7 0.4 44.2 6.5 14.6 24.9"></polygon>
                    <polygon id="XMLID_158_" fill="#A5548C" points="91.7 131.8 52.6 106.1 13.6 113.6 55.1 138.5"></polygon>
                    <polygon id="XMLID_157_" fill="#D0A6C3" points="61.6 60.8 20.9 66.6 12.1 112.1 51.8 104.4"></polygon>
                    <polygon id="XMLID_156_" fill="#F0E2EB" points="61.5 59 45.7 23.3 12 26.9 20.9 64.8"></polygon>
                </g>
                <g id="Group" transform="translate(181.000000, 28.000000)" fill-rule="nonzero" fill="#ffffff">
                    <path d="M30.6,4 C46.4,4 52.8,15.7 52.8,27.4 C52.8,39.2 46.4,50.7 30.6,50.7 L11,50.7 L11,78.6 L0.8,78.6 L0.8,4 L30.6,4 Z M11,13.5 L11,41.3 L29.9,41.3 C39,41.3 42.7,34.4 42.7,27.4 C42.7,20.6 39.1,13.4 30.5,13.4 L11,13.4 L11,13.5 Z" id="Shape"></path>
                    <path d="M73.7,78.6 L63.8,78.6 L63.8,28.1 L73.7,28.1 L73.7,39.5 C76.3,30.6 81.2,27.1 87.8,27.1 C91.4,27.1 95.2,28.1 96.6,29 L95.1,38.2 C92.4,36.9 89.7,36.5 87.6,36.5 C77.9,36.5 73.7,46.9 73.7,60.3 L73.7,78.6 L73.7,78.6 Z" id="Shape"></path>
                    <path d="M101.9,53.2 C101.9,37.2 113.9,27 128.3,27 C142.7,27 154.8,37.2 154.8,53.2 C154.8,69.2 142.7,79.7 128.3,79.7 C113.9,79.7 101.9,69.2 101.9,53.2 Z M145,53.2 C145,43 137.4,36.6 128.3,36.6 C119.2,36.6 111.6,43 111.6,53.2 C111.6,63.5 119.2,70.2 128.3,70.2 C137.4,70.2 145,63.5 145,53.2 Z" id="Shape"></path>
                    <path d="M177.8,78.6 L168,78.6 L168,0.6 L177.9,0.6 L177.9,35.7 C181.3,30 188.3,27 195.7,27 C209.7,27 221.2,37.2 221.2,53.3 C221.2,69.3 209.4,79.7 195.5,79.7 C188.5,79.7 181.2,76.6 177.9,70.8 L177.9,78.6 L177.8,78.6 Z M194.7,70.1 C203.8,70.1 211,63.2 211,53.2 C211,43.1 203.7,36.6 194.7,36.6 C186.6,36.6 177.9,42.3 177.9,53.2 C177.9,63.9 185.7,70.1 194.7,70.1 Z" id="Shape"></path>
                    <path d="M230.8,53.2 C230.8,37.2 242.8,27 257.2,27 C271.6,27 283.7,37.2 283.7,53.2 C283.7,69.2 271.6,79.7 257.2,79.7 C242.9,79.7 230.8,69.2 230.8,53.2 Z M273.9,53.2 C273.9,43 266.3,36.6 257.2,36.6 C248.1,36.6 240.5,43 240.5,53.2 C240.5,63.5 248.1,70.2 257.2,70.2 C266.4,70.2 273.9,63.5 273.9,53.2 Z" id="Shape"></path>
                    <path d="M303.1,66.2 C307,66.2 310.2,69.1 310.2,73 C310.2,76.9 307,79.7 303.1,79.7 C299.3,79.7 296.1,76.9 296.1,73 C296,69.1 299.3,66.2 303.1,66.2 Z" id="Shape"></path>
                    <path d="M386.4,66.8 C379.8,74.7 369.7,79.7 358.1,79.7 C337,79.7 320.3,62.6 320.3,41.5 C320.3,20.3 337,3.2 358.1,3.2 C369.6,3.2 379.5,8.1 386.1,15.9 L378.5,22.2 C373.4,16.7 366.3,13 358,13 C342.4,13 330.3,25.8 330.3,41.6 C330.3,57.4 342.4,70.1 358,70.1 C366.3,70.1 373.7,66.4 378.7,60.6 L386.4,66.8 Z" id="Shape"></path>
                    <polygon id="Shape" points="410.3 4 410.3 78.6 400.2 78.6 400.2 4"></polygon>
                </g>
            </g>
        </svg>
      </a>
    </div>
    <ul class="header__navigation">
      <li class="header__navigation-item">
        <a href="" class="header__navigation-link">Link 1</a>
      </li>
      <li class="header__navigation-item">
        <a href="" class="header__navigation-link">Link 2</a>
      </li>
      <li class="header__navigation-item">
        <a href="" class="header__navigation-link">Link 3</a>
      </li>
      <li class="header__navigation-item">
        <a href="" target="_blank" class="header__navigation-link login">Login</a>
      </li>
    </ul>
  </div>
</header>

6.2 #permalink Footer

We want to maintain a consistent footer across Probo sites. Make sure your site uses these classes and similar markup.

.footer

The wrapper for footer styles.

<footer class="footer">
  <div class="footer__upper">
    <div class="footer__upper-wrapper">
      <div class="footer__upper-left">Want to try Probo today? <a href="https://app.probo.ci">Get started.</a></div>
      <div>
        <a class="footer__upper-link" href="https://www.facebook.com/proboci" title="Probo on Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
        <a class="footer__upper-link" href="https://github.com/ProboCI/probo" title="Probo on Github" target="_blank"><i class="fa fa-github-alt"></i></a>
        <a class="footer__upper-link" href="https://twitter.com/ProboCI" title="Sweet Probo Tweets" target="_blank"><i class="fa fa-twitter"></i></a>
      </div>
    </div>
  </div>
  <div class="footer__lower">
    <div class="footer__lower-wrapper">
      <div class="footer__copyright">© 2016 Probo.CI</div>
      <ul class="footer__navigation">
        <li class="footer__navigation-item">
          <a href="" class="footer__navigation-link">Link 1</a>
        </li>
        <li class="footer__navigation-item">
          <a href="" class="footer__navigation-link">Link 2</a>
        </li>
        <li class="footer__navigation-item">
          <a href="" class="footer__navigation-link">Link 3</a>
        </li>
        <li class="footer__navigation-item">
          <a href="" target="_blank" class="footer__navigation-link login">Login</a>
        </li>
      </ul>
    </div>
  </div>
</footer>

6.3 #permalink Accordion Navigation

We want consistency between our sidebar menus across Probo sites. Make sure your site uses these classes and similar markup. You will need to add a JavaScript library to provide the accordion effect.

.accordion-nav

The accordion-nav wrapper

Link 1
- search for text search
- Child link 1
- Child link 2
- Child link 3
Link 2
Link 3

<ul class="accordion-nav">
  <li class="accordion-nav__item">
    <a href="/" class="accordion-nav__item-link">Link 1</a>
    <span class="accordion-nav__toggle-children">
        <i class="fa fa-angle-up"></i>
    </span>
    <ul class="accordion-nav__parent">
      <li class="accordion-nav__item search">
        <form action="/search" method="GET">
          <label for="sidebarInput">search for text</label>
          <input type="text" name="query" placeholder="Search the docs" class="accordion-nav__search-input" id="sidebarInput">
          <label for="sidebarSubmit">search</label>
          <button type="submit" class="accordion-nav__search-submit button--blue" id="sidebarSubmit">
            <i class="fa fa-search accordion-nav__search-submit-icon" aria-hidden="true"></i>
          </button>
        </form>
      </li>
      <li class="accordion-nav__child"><a href="/" class="accordion-nav__child-link">Child link 1</a></li>
      <li class="accordion-nav__child"><a href="/" class="accordion-nav__child-link">Child link 2</a>
        <span class="accordion-nav__toggle-children">
            <i class="fa fa-angle-up"></i>
        </span>
        <ul class="accordion-nav__parent">
          <li class="accordion-nav__grandchild"><a href="/" class="accordion-nav__grandchild-link">Grandhild link 1</a></li>
          <li class="accordion-nav__grandchild"><a href="/" class="accordion-nav__grandchild-link">Grandchild link 2</a></li>
          <li class="accordion-nav__grandchild"><a href="/" class="accordion-nav__grandchild-link">Grandchild link 3</a></li>
        </ul>
      </li>
      <li class="accordion-nav__child"><a href="/" class="accordion-nav__child-link">Child link 3</a></li>
    </ul>
  </li>
  <li class="accordion-nav__item"><a href="/" class="accordion-nav__item-link">Link 2</a>
    <span class="accordion-nav__toggle-children">
        <i class="fa fa-angle-down"></i>
    </span>
  </li>
  <li class="accordion-nav__item"><a href="/" class="accordion-nav__item-link">Link 3</a></li>
</ul>

6.4 #permalink Search

Text!

.search__container

The search bar wrapper

Search Result 1

https://docs.probo.ci/result/path

Some text derived from the search result.

Search Result 2

https://docs.probo.ci/result/path

Some text derived from the search result.

Search Result 3

https://docs.probo.ci/result/path

Some text derived from the search result.

<form class="search__container">
  <label for="searchInput">search for text</label>
  <input type="text" name="query" placeholder="Search the docs" class="search__input" id="searchInput">
  <label for="searchSubmit">search</label>
  <input type="submit" value="Search" class="button button--blue search__submit" id="searchSubmit">
</form>

<div class="search__results">
  <div class="search__result">
    <h2 class="h3 search__result-title">
      <a href="/section-6.html#kssref-6-4">Search Result 1</a>
    </h2>
    <div class="search__result-link">https://docs.probo.ci/result/path</div>
    <div class="search__result-text">Some text derived from the search result.</div>
  </div>
  <div class="search__result">
    <h2 class="h3 search__result-title">
      <a href="/section-6.html#kssref-6-4">Search Result 2</a>
    </h2>
    <div class="search__result-link">https://docs.probo.ci/result/path</div>
    <div class="search__result-text">Some text derived from the search result.</div>
  </div>
  <div class="search__result">
    <h2 class="h3 search__result-title">
      <a href="/section-6.html#kssref-6-4">Search Result 3</a>
    </h2>
    <div class="search__result-link">https://docs.probo.ci/result/path</div>
    <div class="search__result-text">Some text derived from the search result.</div>
  </div>
</div>

6.5 #permalink Striped List

Used for lists of information such as Plugin documentation.

.striped-list

The list wrapper

List Item 1

Lorem ipsum dolor sit amet.
List Item 2

Lorem ipsum dolor sit amet.
List Item 3

Lorem ipsum dolor sit amet.

<ul class="striped-list">
  <li class="striped-list__item">
    <h3>List Item 1</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </li>
  <li class="striped-list__item">
    <h3>List Item 2</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </li>
  <li class="striped-list__item">
    <h3>List Item 3</h3>
    <p>Lorem ipsum dolor sit amet.</p>
</ul>