Pistachio the front end framework and pattern library for graze.com

contents:


    navigation

    These are our core navigation components that should be use to direct a user around a website or collection of subpages. When multiple rows of navigation elements are adjacent to each other, use page sections to visually distinguish them from each other.

    default nav

    Our default in-page nav is a horizontal nav with pill styling. The .nav__item--active class can optionally be used to highlight the current context. By default our navs are inline-block but can be made block by using the nav--block modifier.

    <nav>
        <ul class="nav">
            <li>
                <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                    about us
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our food
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our packaging
                </a>
            </li>
        </ul>
    </nav>

    nav with heading

    Use the .nav-heading element to align a non-navigational element with the rest of the .nav__items.

    <nav role="navigation">
        <h4 class="nav-heading">
            heading:
        </h4>
        <ul class="nav">
            <li>
                <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                    about us
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our food
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our packaging
                </a>
            </li>
        </ul>
    </nav>

    nav with buttons

    Buttons will also align with nav elements.

    <nav>
        <ul class="nav nav--block">
            <li>
                <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                    about us
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our food
                </a>
            </li>
            <li>
                <a class="nav__item" href="#0">
                    our packaging
                </a>
            </li>
            <li class="pull-right-sm">
                <button class="button button--primary button--continue">get started</button>
            </li>
        </ul>
    </nav>

    side navigation

    Our side navigation is a varation of the nav where .nav__items are aligned vertically using the .nav--vertical modifier. Some mobile appropriate CSS is applied below 768px viewport width.

    <nav role="navigation">
        <h4 class="nav-heading">
            heading:
        </h4>
        <ul class="nav nav--vertical">
            <li>
                <a class="nav__item" tabindex="-1" href="#">
                    about us
                </a>
            </li>
            <li>
                <a class="nav__item nav__item--active" href="#">
                    our food
                </a>
            </li>
    
            <li>
                <a class="nav__item" href="#">
                    our packaging
                </a>
            </li>
    
            <li>
                <a class="nav__item" href="#">
                    press pack
                </a>
            </li>
    
            <li>
                <a class="nav__item" href="#">
                    join the team
                </a>
            </li>
        </ul>
    </nav>

    tabbed nav

    Use the .nav--tabs modifier to generate a nav that uses tabs and should always be used over a full viewport width page-section with the same classes as in the example below.

    <div class="page-section page-section--alternate page-section--bleed">
        <nav>
            <ul class="nav nav--tabs">
                <li>
                    <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                        about us
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our food
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our packaging
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    small tabbed nav

    Use the .nav--tabs--sm modifier to generate a tabbed nav with less padding.

    <div class="page-section page-section--alternate page-section--bleed">
        <nav>
            <ul class="nav nav--tabs nav--tabs--sm">
                <li>
                    <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                        about us
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our food
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our packaging
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    inverse tabbed nav

    Use the .nav--tabs--inverse modifier to generate a tabbed nav that works on dark backgrounds. This should typically only be used on a brand colour page section at the very top of a page as part of top level navigation as in this layout example.

    <div class="page-section page-section--brand page-section--bleed">
        <nav>
            <ul class="nav nav--tabs nav--tabs--inverse">
                <li>
                    <a class="nav__item nav__item--active" tabindex="-1" href="#0">
                        about us
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our food
                    </a>
                </li>
                <li>
                    <a class="nav__item" href="#0">
                        our packaging
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    Dropdown menus

    Dropdown menus require pistachio.js support and the presence of the data-p-module="dropDown" attribute along with the classes and markup order as shown here.

    In addition to the basic show/hide functionality, the Dropdown JavaScript also applies the following:

    • aria attributes to improve accessiblity
    • Keyboard controls - when focused a dropdown element will activate on enter key press

    If JavaScript is unavailable for some reason, the dropdown will still work with css only as far as the browser support allows.

    A navigation item or a button can be a dropdown list. This should never replace a select element in a form, but is suitable for small collections of links in a navigation element.

    left alignment

    <ul class="nav">
        <li>
            <ul class="nav nav--dropdown nav--dropdown-inline" data-p-module="dropDown">
                <li class="nav__dropdown">
                    <a id="category1" class="nav__dropdown__item" href="#0">
                        switch country
                    </a>
                    <ul class="nav__dropdown__menu">
                        <li>
                            <a href="#0">
                                United Kingdom
                            </a>
                        </li>
                        <li>
                            <a href="#0">
                                United states of America
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a class="nav__item" href="#0">
                about us
            </a>
        </li>
        <li>
            <a class="nav__item" href="#0">
                our food
            </a>
        </li>
    </ul>

    right alignment

    <ul class="nav">
        <li>
            <a class="nav__item" href="#0">
                about us
            </a>
        </li>
        <li>
            <a class="nav__item" href="#0">
                our food
            </a>
        </li>
        <li>
            <ul class="nav nav--dropdown nav--dropdown-inline" data-p-module="dropDown">
                <li class="nav__dropdown">
                    <a id="category1" class="nav__dropdown__item" href="#0">
                        switch country
                    </a>
                    <ul class="nav__dropdown__menu nav__dropdown__menu--right">
                        <li>
                            <a href="#0">
                                United Kingdom
                            </a>
                        </li>
                        <li>
                            <a href="#0">
                                United states of America
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    as a button

    <ul class="nav nav--dropdown nav--dropdown-inline" data-p-module="dropDown">
        <li class="nav__dropdown">
            <button class="button button--dropdown">
                switch country
            </button>
            <ul class="nav__dropdown__menu">
                <li>
                    <a href="#0">
                        United Kingdom
                    </a>
                </li>
                <li>
                    <a href="#0">
                        United states of America
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    full width

    For dropdown menus with a lot of content, you can use the full width of the page with some optional layout classes. Check the dropdown menu example page for a markup example.

    A navigation item or a button can be a dropdown list. This should never replace a select element in a form, but is suitable for small collections of links in a navigation element.

    Offscreen menu

    To create an off-screen menu see the following off-screen menu example. To specify breakpoints at which the tabs will switch to the offscreen menu functionality use the data-dropdown-offscreen="xxs,xs" attribute. In addition to offscreen functionality, the offscreen menu provides specific styling for active states of .nav__dropdown__item--active and .nav__item--active.

    tabbed nav with content

    Tabbed content requires pistachio.js support and the presence of the data-p-module="tabs" attribute along with the classes and markup order as shown below. In addition to the basic show/hide functionality, the tabbed content JavaScript also applies the following:

    • HTML5 and aria attributes to improve accessiblity
    • Keyboard controls - when focused a tab will activate it's section on enter key press
    • The ability to specify breakpoints at which the tabs will switch to an accordion via the data-tabs-stacked="xxs,xs" attribute.

    If JavaScript is unavailable for some reason, the tabs will still work with css only but will not switch to accordions at the specified breakpoints.

    Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources.

    Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.

    Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.

    Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

    <div class="page-section page-section--hint">
        <div class="tabbed-content" data-p-module="tabs" data-tabs-stacked="xxs,xs">
            <nav role="navigation">
                <ul class="tabbed-content__nav nav nav--tabs nav--block">
                    <li>
                        <a class="nav__item" href="#description">
                            description
                        </a>
                    </li>
                    <li>
                        <a class="nav__item" href="#nutrition">
                            nutrition
                        </a>
                    </li>
                    <li>
                        <a class="nav__item" href="#ingredients">
                            ingredients
                        </a>
                    </li>
                </ul>
            </nav>
    
            <section class="tabbed-content__section-wrap">
                <section id="description" class="tabbed-content__section">
                    <div class="row">
                        <div class="col-xs-4">
                            <img src="/images/feature/square-fudge.jpg" class="img-responsive">
                        </div>
                        <div class="col-xs-8">
                            <p>Collaboratively <a href="#0">administrate</a> turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable
                                internal or "organic" sources.</p>
                        </div>
                    </div>
                </section>
    
                <section id="nutrition" class="tabbed-content__section">
                    <div class="row">
                        <div class="col-xs-8">
                            <p>Objectively <a href="#0">innovate</a> empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis
                                cutting-edge deliverables.</p>
    
                            <p>Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals
                                after maintainable products.</p>
                        </div>
                        <div class="col-xs-4">
                            <img src="/images/feature/square-blackboard.jpg" class="img-responsive">
                        </div>
                    </div>
                </section>
    
                <section id="ingredients" class="tabbed-content__section">
                    <div class="row">
                        <div class="col-xs-4">
                            <img src="/images/feature/square-ppnuts.jpg" class="img-responsive">
                        </div>
                        <div class="col-xs-8">
                            <p>Efficiently <a href="#0">unleash</a> cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
                        </div>
                    </div>
                </section>
            </section>
        </div>
    </div>