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

contents:


    page sections

    Page sections help break up pages and give content some much needed breathing space.

    heads up!

    Due to our styleguide layout, all examples are contained in a content area. Page sections should generally be used to cover the whole page width for maximum effect.

    example

    hello Cat Stevens

    Check out our latest snacks!

    code

    <div class="page-section page-section--alternate">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 page-section__content">
                    <h2>hello Cat Stevens</h2>
                    <p class="lead">Check out our latest snacks!</p>
                </div>
            </div>
        </div>
    </div>

    types

    colour modifiers

    Page sections have a white background by default but you can use these classes to modify that.

    transparent

    A transparent page section is useful for allowing the background of the page to be visible.

    Modifer: .page-section--transparent


    brand

    Brand colour sections should only be used to frame the page at top and bottom and never within a page.

    Modifer: .page-section--brand

    .link-inverse

    alternate

    Alternate page sections are perfect for breaking up longer sections of a page by alternating between white sections.

    Modifer: .page-section--alternate


    hint

    The grey colour used in "hint" sections will only be visible on high quality screens and devices and therefore should only be used as a progressive enhancement on those devices. When it's important for page sections to be visible, hint is not appropriate.

    Modifer: .page-section--hint


    background images

    Modifer: .page-section--image


    Modifer: .page-section--brand .page-section--image

    .link-inverse

    size modifiers

    Default padding size is 3em.

    Bleed: 0 .page-section--bleed


    Extra Small: .75em .page-section--xs


    Small: 1.5em .page-section--sm


    Large: 6em .page-section--lg