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

contents:


    utilities

    A collection of utility classes to aid layout, responsiveness, and accessibility

    spacing utilities

    We've put a lot of effort into making sure all of our various elements and components have sensible spacing but there will always be situations in which it's prudent to add or remove vertical spacing.

    .margin-reset

    .margin-top

    .margin-bottom

    text alignment

    .text-left
    .text-center
    .text-right

    responsive text alignment

    Align text differently at different breakpoints. The breakpoint in the class name describes the breakpoint above which the text alignment is applied. Used in combination with a default text alignment utility class.

    .text-left-xs
    .text-left-sm
    .text-left-md
    .text-left-lg

    alignment

    .center-block
    .pull-left
    .pull-right

    responsive alignment

    Align elements differently at different breakpoints. The breakpoint in the class name describes the breakpoint above which the alignment is applied.

    .pull-right-xs
    .pull-right-sm
    .pull-right-md
    .pull-right-lg

    responsive visiblity

    Use combinations of these to change visiblity of elements across different breakpoints.

    hidden

    .hidden-xxs

    .hidden-xs

    .hidden-sm

    .hidden-md

    .hidden-lg

    visible

    Be sure to use the correct class based on the display attribute of the element you are making visible. for example, applying visible-sm-block to an inline element will cause it to be displayed as a block element and potentially break your layout.

    .visible-xxs-block

    .visible-xs-block

    .visible-sm-block

    .visible-md-block

    .visible-lg-block


    .visible-xxs-inline

    .visible-xs-inline

    .visible-sm-inline

    .visible-md-inline

    .visible-lg-inline


    .visible-xxs-inline-block

    .visible-xs-inline-block

    .visible-sm-inline-block

    .visible-md-inline-block

    .visible-lg-inline-block

    accessibility utilities

    text for assistive devices

    Where appropriate you can place explanatory text with the .sr-only class which is only visible to assitive devices such as screen readers. You should consider doing this if the meaning of your functionality may be ambiguous without further explanation.

    you're currently on page 1
    <span class="sr-only">you're currently on page </span>1

    hiding elements

    When an element is visually disabled and unusable it's a good idea to also apply the aria-hidden property to explicitly hide it in assistive devices to avoid confusion.

    <a class="pagination__list__item pagination__list__item--disabled" href="#" tabindex="-1" rel="prev" aria-label="Previous">
        <span aria-hidden="true">
            <i class="fa fa-chevron-left"></i>
        </span>
    </a>