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


    grid system

    There are two grids available in pistachio. The bootstrap floated grid and the reflex flexbox grid. Standard layouts should by default use the bootstrap grid and where flexbox is required for advanced layout such as same height columns the reflex grid is appropriate.


    Both grids use the same breakpoints.

                // Extra small screen / phone
                @screen-xs-min:         480px;
                // Small screen / tablet
                @screen-sm-min:         768px;
                // Medium screen / desktop
                @screen-md-min:         992px;
                // Large screen / wide desktop
                @screen-lg-min:         1200px;
                // Larger screen / wider desktop
                @screen-xlg-min:        1600px;

    bootstrap grid

    See Bootstrap 3 Docs for example usage and more info.

    n.b. In bootstrap defaults the .col-xs-[n] class is the smallest breakpoint which is activated at < 768px and allows for columns that never collapse to a single column. We have relegated this behaviour to .col-xxs-[n] to give us collapsing columns using .col-xs-[n] for screen sizes at < 480px.

    flexbox grid

    See Reflex Docs for example usage and more info.