Pistachio the front end framework and pattern library for graze.com
Pistachio the front end framework and pattern library for graze.com
contents:
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.
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.
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.
our colour palette is modern and exciting whilst reflecting the ‘good’ angle of our brand goal.
This is only a short overview and for further info or advice feel free to contact creative@graze.com
We use LESS to build our CSS
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.
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:
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:
Browsers are the most hostile software development environment imaginable.
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.
/**
* 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);
Visible with compatible 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:
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:
Included devices (earlier devices may be supported as long as they are running iOS version 5.0 or higher)
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: