The graze front end framework and style guide.

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

View Versioned Releases.

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">

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

• Common

• Accordion
• Alerts
• Breadcrumb
• Buttons
• Features
• Forms
• Health-badges
• Navigation
• Off-screen-menu
• Page-sections
• Pagination
• Panels
• Progress
• Ribbons
• Sashes
• Stickers
• Tables
• Tooltips

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>

Requires Jquery which can be loaded via CDN or locally.

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

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

To view the style guide locally:

~$ npm install
~$ gulp build
~$ 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.

To watch LESS for changes and recompile the CSS:

~$ gulp dev

To compile the JavaScript:

~$ gulp build:js

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/.

In order to release you'll need npm@^3.0, you can get the latest by running npm install -g npm@latest.

Follow these simple steps to deploy a versioned release:

1. Run npm version -m ":rocket: Release %s." on the master branch with a semver as it's argument (e.g. npm version -m ":rocket: Release %s." 1.0.0)
2. A new release/ branch, and tag, will be published to GitHub, open a PR to merge the branch into master
3. The Travis CI build for the tag will publish the resources to s3 and trigger Heroku to deploy the style guide
4. Update the release notes on GitHub, not forgetting the html snippets printed out in the build