It's an exciting time for the graze web team as we're expanding into new territories such as a dedicated support site and a more traditional e-commerce site. Our subscription site is also constantly being iterated and refined to improve the user experience.
We decided to dedicate some time to build a new front end framework and a web style guide to firm up some generally agreed upon but never properly documented front end web practices for use across all of our sites and to establish a baseline for all graze web sites going forwards.
Early on in its development somebody suggested the name "pistachio" and it ended up sticking. The original reasons for this choice of name are lost in the mists of time but everybody agrees it seems appropriate now.
With CSS specificity graphs like this, spikes are bad news, and the general trend should be towards higher specificity later in the stylesheet.
We're now at the point that Pistachio is in use across two of our three sites with the last site about to undergo refactoring and we're happy to share it with the world so feel free to point your browsers at pistachio.graze.com and get in touch if you have any feedback or opinions of any kind.
Here are some of the core principles we've decided to adhere to when building pistachio:
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
CDN and Versioning
Pistachio is available on the CloudFront CDN, with CORS support enabled. We've also set up versioned releases so we can use a known "safe" version of pistachio and only update to a different version when we're comfortable everything is working correctly.
The intention here is that our front end framework should provide a solid baseline on which to iterate. It doesn't contain every possible front end web component you can imagine but provides a platform on which to build.
Every standard html element has a default style and our style guide provides opinionated directions on their appropriate use.
Certain components we've identified as regularly being used across our sites have been standardised to ensure no matter which graze website a user visits, they should see and interact with roughly the same familiar functionality. Examples of this include dropdown menus, pagination, and forms.
Modern front end practices
We're using flexbox in pistachio as well as advocating the use of html5 form attributes. Where possible, we're going to be taking advantage of emerging technology as long as it fits with our progressive enhancement approach.
The benefits of having a dedicated front end framework are many.
- we can change the look and feel across all our websites at once by releasing a new version of pistachio
- we can concentrate on delivering the highest levels of performance and accessiblity on our front end by focusing our efforts in one place
- we have an established style guide with which to educate new members of the team and any third parties that we work with
by Lee Jordan