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

contents:


    mixins

    There are various useful LESS mixins that can be used to extend pistachio and add some bespoke css. Please note that ~'' is the equivalent of null in LESS syntax.

    font-size

    Applies a font size in rem and the same size in px for older browsers.

    Syntax

    .font-size(@size);

    Example 1

    .font-size(1.4);

    Result:

                font-size: 20.8px;
                font-size: 1.3rem;
                

    position

    Applies positioning properties

    Syntax

    .position(@position, @top, @right, @bottom, @left);

    Example 1

    .position(absolute, 50px, ~'', ~'', 50px);

    Result:

                position: absolute;
                top: 10px;
                left: 50px;
                

    Example 2

    .position(absolute, ~'', auto, auto, ~'');

    Result:

                position: absolute;
                left: auto;
                right: auto;
                

    at least

    A quantity selector which applies styles based on the number of child elements.

    Syntax

    .at-least(@quantity, @countTarget, @rules, @selectTarget: ~'');

    Example 1

    Hide .progress__step when there are three or more.

    .at-least(3, ~'.progress__step', { display: none; });

    Result:

                .progress__step:nth-last-child(n + 4),
                .progress__step:nth-last-child(n + 4) ~ .progress__step {
                    display: none;
                }
                

    Example 2

    When there are three or more .progress__step, show the sibling .progress__step-count.

    .at-least(3, ~'.progress__step', { display: block; }, ~'.progress__step-count');

    Result:

                .progress__step:nth-last-child(n + 4) ~ .progress__step-count} {
                    display: block;
                }