Pistachio

The graze front end framework and style guide.

Versioned Releases

Pistachio is available on the CloudFront CDN, with CORS support enabled.

View Versioned Releases.

CSS

Development Release

A development release is available, uncached, and redeployed on every push to the master branch. Not recommended for use in live websites, use the latest versioned release instead.

<link href="https://pistachio-cdn.graze.com/dev/css/pistachio.css" rel="stylesheet">

Modular CSS

For versioned releases of modules modify the url like so: https://pistachio-cdn.graze.com/<version>/css/<module>.css

Core CSS only

• Common

Optional Modules

• Accordion
• Alerts
• Breadcrumb
• Buttons
• Forms
• Navigation
• Off-screen-menu
• Page-sections
• Pagination
• Panels
• Progress
• Stickers
• Tables

JavaScript

Development Release

A development release is available, uncached, and redeployed on every push to the master branch. Not recommended for use in live websites, use the latest versioned release instead.

<script src="https://pistachio-cdn.graze.com/dev/js/pistachio.js"></script>

Dependencies

Requires Jquery which can be loaded via CDN or locally.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Development

Getting Started

~$ git clone https://github.com/graze/pistachio.git
~$ npm install -g gulp
~$ cd pistachio

Local Style Guide

To view the style guide locally:

~$ npm install
~$ npm start

Docs should now be visible on http://localhost:4000/.

Make sure to regularly run npm update to keep your dependencies up to date.

The style guide is a simple express app. More information about the express app can be found in the site README.

LESS Compilation

To watch LESS for changes and recompile the CSS:

~$ gulp dev

JavaScript Compilation

To compile the JavaScript:

~$ gulp build:js

Deploying

The projects documentation and style guide is deployed to Heroku on every push to the master branch and is visible at http://pistachio.graze.com/.

Follow these simple steps to deploy a new version:

1. Update version within package.json
2. Commit the changes to a new branch (with a good commit message)
3. Push the new branch (git push)
4. Open a pull request and get it merged
5. Tag the change (git tag v0.0.x )
6. Push the tag (git push --tags)
7. Travis CI will publish the new version to CloudFront
8. Update the release notes on GitHub