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

contents:

    welcome to pistachio

    contents:

      Welcome to our style guide and pattern library - we call it 'pistachio'. It is intended to help everyone who works with graze.com build a consistent experience for our users.

      If you would like to provide any feedback on this, please email pistachio@graze.com.

      branding

      The graze brand identity embodies our goal of making good exciting, with a look and feel that is modern, vibrant and playful and a tone of voice that is confident, positive, witty and conversational.

      typefaces

      sofia pro

      We use sofia pro light for our main typeface with different weight variations <h1> <h2> <h3> <h4> are bold and inline links use regular.

      There is further guidance on our typography page.

      colour palette

      our colour palette is modern and exciting whilst reflecting the ‘good’ angle of our brand goal.

      further info

      This is only a short overview and for further info or advice feel free to contact creative@graze.com

      web design/ux principles

      • Clarity. Use clear messaging to guide the user. All buttons, links, and calls to action should have descriptive text which communicate our personality and tone of voice.
      • Content first. Our content should always be presented in the most appropriate semantic order to ensure the most important stuff is front and center and everything is organised in a suitable hierarchy. This in turn allows us to write lean, semantic HTML5 markup which is manageable and accessible. It also gives us a good baseline for the mobile experience.
      • Use white space to break up sections of the page instead of hard lines. Alternatively, use differently coloured page sections.
      • Use product photography freely. We're proud of our products and like to show them off with high quality photography.
      • Use illustrations freely. Like our typography, our illustrations allow us to be extremely playful and imaginative. They are core to our brand, especially within packaging, and allow us to explore taste in an exciting way.
      • No gimmicks. We stick with what works best and prefer to use conventional patterns rather then re-invent the wheel. We want websites everybody can use without a learning curve.
      • Vertical scrolling is ok. We don't obsess over keeping everything "above the fold". We focus on getting our content in a sensible order of hierachy and are relaxed about people having to scroll.

      CSS guidelines

      LESS css

      We use LESS to build our CSS

      Efficiency and performance

      We use LESS variables and mixins as much as possible to avoid duplicating hand written CSS. We always strive to build the most robust and efficient CSS and JS components that perform well across all our supported browsers without adding too much page weight.

      Block, Element, Modifier

      Our CSS follows a Block, Element, Modifier (BEM) syntax to create clarity and naming consistency across our patterns. BEM is arguably verbose, but it helps prevent common CSS rabbit holes such as:

      • CSS specificity
      • Classname ambiguity
      • global CSS changes

      progressive enhancement

      When an elevator fails, it's useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.

      At graze we believe in the principles of progressive enhancement for reasons of performance, reliability, and accessiblity. It's a widely discussed subject but here are the key points:

      • basic content should be accessible to all web browsers
      • basic functionality should be accessible to all web browsers
      • sparse, semantic markup
      • layout is provided by externally linked CSS
      • enhanced behavior is provided by unobtrusive, externally linked JavaScript

      feature detection

      Browsers are the most hostile software development environment imaginable.

      Douglas Crockford

      Cutting the Mustard

      In order to create enhanced experiences for users with modern browsers, we need to be able to tell whether we have the support for some baseline features. Our approach is taken from FT Labs Origami core/enhanced check and implements a small piece of inline JS which switches a class in the <html> tag.

      Javascript:

      /** * Info * --- * This file should not be pulled in to a page via an HTTP request (src=".../") * to make the check more performant and prevent layout issues if the script is * ever blocked */ (function(document, window) { var cutsTheMustard = ('querySelector'
in document && 'localStorage' in window && 'addEventListener' in window); if (cutsTheMustard) { document.documentElement.className = document.documentElement.className.replace(/\bexperience-core\b/g, 'experience-enhanced'); } })(document, window);

      CSS:

      .experience-enhanced .if-js

      Visible with compatible JS

      .experience-core .if-js

      Visible without compatible JS

      (not visible in browsers that do not cut the mustard)

      When building enhanced JavaScript functionality, you should only apply this enhanced functionality when the .experience-enhanced class is present in the <html> tag. Browsers that are not present in this list do not cut the mustard and should not recieve JavaScript enhancement:

      • IE 9
      • Firefox 3.5
      • Opera 10.5
      • Safari 4
      • iPhone and iPad iOS 1
      • Android phone and tablets 2.1
      • Blackberry OS 6
      • Opera Mobile 11.5
      • Chrome (all)
      • Mobile Firefox (all)

      Browser support list

      The cuts the mustard test gives us a sensible baseline below which javascript enhancement is not provided. Further to this, based on analysis of our users, these are the browsers we fully support for all functionality and where we spend most of our development effort:

      Windows 7 and Windows 10

      • Firefox (latest version)
      • Chrome (latest version)
      • Internet Explorer 9/10/11
      • Edge

      OSX

      • Safari version 8 and higher
      • Firefox (latest version)
      • Chrome (latest version)

      iOS version 5.0 and higher

      • Safari

      Included devices (earlier devices may be supported as long as they are running iOS version 5.0 or higher)

      • iPhone 4s and higher
      • iPad 3rd generation and higher
      • iPad air (all)
      • iPad Mini (all)
      • iPad Pro (all)

      A useful reference list

      Android version 4.1 (Jelly Bean) and higher

      • Stock android browser
      • Chrome

      Any browsers that fall outside of this list are considered not to be supported. The only exception to this is core business functionality which is supported in *all* browsers and includes:

      • Placing an order
      • Providing payment details