kengai

The bonsai.io app UI guide.

kengai

Kengai is a simple styleguide npm package created for the product and design team at bonsai.io.

It was built following CSS trick's handy Build a Style Guide Straight from Sass blog post.

Firing the project up locally

  1. Setup: run bin/setup.

This installs node packages like kss-node, reload, and onchange. It also sets up some handy ruby rack static serving if you use puma-dev for seeing your site locally at kengai.test.

  1. Build site: Run bin/build. Watch for changes: bin/watch.

This generates the static html in public/ from changes and input in sass/. It watches the sass/ directory for any changes and builds on the fly. 🦅

  1. Hot reload from the directory itself (instead of using puma-dev): Run bin/reload.

This uses npm reload to navigate into the public directory, watch for changes, and refresh your browser. It's awesome.