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

contents:


    typography

    We use three fonts; a heading font, body font and cursive font. Our typographic elements have set margins to ensure consistency. Most modules such as page section will remove top margin from the first child element and bottom margin from the last child element to ensure consistent spacing.

    headings

    Headings should always be lowercase and this is enforced via CSS. Headings can have commas, but not full stops. An exception is made when a person's name or brand is mentioned. Enforced lowercase can be removed by using the class .name.

    page heading

    25.2px / graze Pro

    <h1>...</h1>


    subpage heading

    21px / graze Pro

    <h2>...</h2>


    section heading

    19.6px / Helvetica Neue

    <h3>...</h3>


    sub section heading

    16.8px / Helvetica Neue

    <h4>...</h4>


    sub sub section heading

    15.4px / Helvetica Neue

    <h5>...</h5>

    heading with meta text

    Sometimes you want supplementary or "meta" text next to a heading. The .heading-with-meta class will assist with this.

    your basket

    (12 items)

    <h1 class="heading-with-meta">your basket</h1>
    <p class="meta">(12 items)</p>

    paragraphs and additional styles

    Lead paragraph, often used for an opening summary.

    <p class="lead">...</p>

    Strong for bold copy or form labels.

    <p><strong>...</strong></p>

    This is our standard paragraph and base font size.

    <p>...</p>

    Muted or less important text.

    <p class="muted">...</p>

    Additional guidance information relating to nearby content.

    <p class="meta"><span class="fa fa-question-circle"></span> ...</p>

    Blockquote with optional footer.

    Lee Jordan
    <blockquote>
        <p>
            Blockquote with optional footer.
        </p>
        <footer>
            Lee Jordan
        </footer>
    </blockquote>

    Lead blockquote with optional footer.

    Lee Jordan
    <blockquote class="lead">
        <p>
            Lead blockquote with optional footer.
        </p>
        <footer>
            Lee Jordan
        </footer>
    </blockquote>

    cursive for captions and voice

    <p class="voice">...</p>

    Small for legal copy, disclaimers and copyright information.

    <p><small>...</small></p>

    REFERRAL CODE / URL

    <p class="monospaced">...</p>

    notes

    Our base font size is 16px by default and 14px when the viewport is below 768px wide.

    Paragraphs should have a maximum width of 555px to ensure an optimum line length of around 75 characters.

    Avoid center aligned paragraphs.

    heading text image replacement

    We prefer this method for using typographical images (preferably svgs) as a heading element.

    flapjacks are here!

    <h3><img src="/images/banners/flapjack-banner.svg" class="img-responsive" alt="flapjacks are here!"></h3>

    content example

    conveniently

    Intrinsicly exploit virtual infomediaries vis-a-vis equity invested processes. Interactively iterate error free.

    integrate cross functional

    Synergistically disseminate optimal expertise whereas state of the art strategic theme areas. Monotonectally mesh out-of-the-box imperatives before 24/7 potentialities. Rapidiously productize team building portals with seamless innovation. Conveniently. Efficiently provide access to synergistic.

    Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway.

    Lee Jordan

    Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.