600 West

600 West is Sprout Social’s pattern library for marketing. It is the set of components that combine to create a visual identity on the web. It is used by Sprout and Bambu in online marketing, the B2B products, and internal tools to create a unified user experience across web properties and code bases.

Usage

To include 600 West in your repo:

yarn add @sproutsocial/600-west

Add node_modules/@sproutsocial/600-west to your SCSS include paths. Then in a new stylesheet you can:

1. @import "components/themes/<Theme>"; (or create your own) to set variables and overrides that create a new theme of 600 West.
2. @import "components/Base"; to get all the variables, functions, mixins, and a basic reset, like Normalize.css.
3. @import "components/<type>/<Component>/<Component>"; to get a specific Pattern.

Refer to the documentation on Themes for details on how you can override the default 600 West variables before @importing Components to get a custom-themed version of 600 West.

Usage during Development

The best way to develop 600 West alongside another property (e.g. web-site-core, bloom-site) is to use yarn link. This creates a globally installed symlink to 600-west, then symlink from the node_modules directory to the global symlink.

Just run the following:

yarn link                           # set up global symlink in ~/code/600-west
cd ~/path/to/main-project           # go into the dir of your main project
yarn link @sproutsocial/600-west    # link to the local version of 600-west to main-project

To remove a link:

cd ~/path/to/main-project           # go into the dir of your main project
yarn unlink @sproutsocial/600-west  # unlink the package
yarn                                # install version in package.json

Releasing a new version

Use npm version <type> to bump the package version. You can include the version bump in your PR or in a separate one. After merging the version change, create a tag and release in Github. This will trigger Travis CI to build and publish the new version to npm.