bridget 💡

BridgeU’s style guide, based on Bootstrap. You can see the up to date live version here.

This package is basically a wrapper around Bootstrap with our own spin. We even started with a full import instead of picking the components we’ll be using. This style guide is heavily under development, so please bare with us and a fast changing codebase. You can read more about our thinking process behind it on our wiki.

To-do

• Write a few base stories as a start
• Set a page-wide decorator for better-looking Storybook pages
• Export package for production
• Export our Storybook as a static app
• Check addons and see if there is anything helpful there
  • https://github.com/storybooks/storybook/blob/next/addons/storysource
  • https://github.com/storybooks/storybook/tree/master/addons/info

Features

• 📖 Previewable
• 🔁 Live reloading
• 📦 Exportable

Install

Run the following commands on your computer:

1. git clone git@github.com:BridgeU/bridget.git
2. cd bridget
3. npm install
4. npm run watch

Your browser will open on http://localhost:9001, where a local server is running, keeping that page up to date. If you change any of the files at /src, that page will update in a couple of seconds, allowing you to preview your changes in almost real time.

Export

Running npm run build will update dist/ with our JavaScript and CSS, which we should do every time we commit changes. This folder will contain the files we’ll import from other projects and allow us to reuse this style guide.

Deploying App

Running npm run build-app will create a /public folder with the compiled whole application (if needed and once it's built, it can be run by npm run static-app).

Resources

Useful reading material about design systems and whatnot.

• How design systems use Storybook