Go to rebrand

ConsumerAffairs style guide


Our ConsumerAffairs Style Guide is a set of standards to ensure a consistent design and identity. Additionally, from a development point of view it serves to improve the speed and ease of code deployment that can be shared and reused across different repos of the CA eco-system.

This Style Guide consolidates the front-end code while comprehensively document the visual language, such as color palettes, fonts and component behavior.

The goals are:

  1. We can maintain a consistency of app styles and identity.
  2. We can reuse code instead of reinventing the wheel.
  3. We can see all of our components in one place.
  4. We can see documentation and live examples.

How can I use it on a new repo?

The Styleguide is a node module, and it could be installed on your repo using:

npm install @consumeraffairs/ca-styleguide --save-dev

After having your module installed, you'll need to create into your build process (gulp or grunt) a relocate functionallity which moves the CSS, JS and icon files to a folder that can be used inside of your enviroment.

Where is the repo?

Right here, go ahead and follow the installation instructions:

Github repo

How to add changes?

Just follow our regular Engineering workflow, but you have to take into account the following:

  • The styleguide components are used across different repos and pages. Make sure to make changes reponsibly, making them compatible between versions or make sure to apply the needed markup changes on every place where it was implemented.
  • When you create a PR, make sure to document the changes on this page and all the features should be tested on the styleguide itself. This styleguide is documentation and a testing enviroment for changes before reaching production.

I'm facing problems, who can help me?

Just ask on the #engineering-frontend channel, on Slack, we are all willing to help our fellows.

Did you find a bug? oh...Go and report it on the #qa-team or #engineering channel on Slack, a QA engineer will check it and create a bug ticket for it.