Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

RBX UI Components Build Status Dependency Status

Rockabox's UI components, built using AngularJS, PostCSS, SUIT CSS and webpack.

View them at

Getting Started

  1. Install Node.js.

  2. Install global packages (Bower, Grunt, Webpack and Webpack-dev-server):

    npm install -g bower grunt-cli webpack webpack-dev-server
  3. Install dependencies:

    npm install && bower install
  4. Run the dev server:

    npm start
  5. Browse to http://localhost:7000/.

Running Unit Tests

Run with:

grunt unit

Do not run unit tests directly with Karma; the grunt tasks are required to set the timezone correctly for PhantomJS.

Release Process

  1. Ensure all pull requests intended for next version have been merged to master
  2. Determine semantic version number (MAJOR.MINOR.PATCH)
  3. Create release branch (as MAJOR.MINOR.PATCH) from master
  4. Open pull request from release branch to master
  5. Bump version in bower.json and package.json on release branch
  6. Update Changelog on release branch
  7. Approve and merge, but keep release branch
  8. Create release
  9. Delete release branch
  10. 🎉

Guidelines For Making New Components

Use the rb-component Yeoman generator when starting a new component.

Keep the structure and design pattern of new components consistent with those that have come before.

Angular Directive Guidelines

  • Use attributes to pass modifiers and single line contents (titles, labels etc.) into an isolated scope. For an example, look at the header attribute in rb-data-summary-item
  • Use transclusion where the main content of a directive needs to be flexible enough to handle an unknown structure. For an example, see the transclusion in rb-data-summary-item.
  • Follow a wrapper & item pattern for components that need multiple transclusion. For an example see the rb-data-summary and rb-data-summary-item directives.
  • Split large functions (like link functions) into separate Webpack modules to keep things simple. For an example see rb-currency-display-link.js
  • Provide a component demo that shows all combinations of different modifiers and settings.