Playbook Design System

Playbook is the first design system built for both Rails & React interfaces. Inspired by Velocity, Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.

Requirements

• Docker 17.09 or later
• Docker Compose 1.17.1 or later

Getting started

1. Run make it
2. Install overcommit hooks bin/overcommit
3. open http://localhost:8089

To clean up this project from your local machine, run make stop, which will drop all containers and networks associated with this project. To purge all resources, do make clean, which also removes images and volumes for a blank slate.

Making changes to the Gemfile:

* Stop the `make start` process * Run `make bundle` to (un-)install gems and update the `Gemfile.lock` * Re-start the server with `make start` To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`

Additional resources

Upgrading between versions

See docs/upgrade-guide

Releases

• Playbook Releases

Development Environment

• Common Errors & Solutions

Reset.css

Playbook provides it's own reset.css boilerplate for optional use in your application. You can either:

1. Import the dist/reset.css from the playbook_ui gem into your Rails view: @import "reset.css" (note: your path may vary depending on your application's asset paths)
2. Import or include the file via the npm package: import 'reset.css' (note: your path may vary depending on your application's node-sass includePaths)

This asset aims to provide a commonly styles base for supported browsers.

Building Playbook Kits

• Generating a Kit
• Rails Kit
• Rails Kit Helpers
• Using a Kit within a Kit
• Understanding Rails Kit HTML Wrapper
• Kit Stylesheet

Testing Playbook Kits Locally

Testing React Kits locally

1. Inside of your Playbook repository, run yarn link.
2. Inside of the directory you want to test with playbook, run yarn link playbook-ui.
3. Run yarn hmr in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
4. Test all the things!
5. When finished, inside of the directory you want to test with playbook, run yarn unlink playbook-ui.
6. Inside of your Playbook repository, run yarn unlink.

Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.