Watson Developer Cloud Component Library

DEPRECATED: this repo is no longer actively maintained. It can still be used as reference, but may contain outdated or unpatched code.

The Watson Platform Component Library is a Sass library that translates Watson design language into UI components to help develop web UI.

Demo: https://watson-developer-cloud.github.io/ui-components/

Install

$ npm install watson-ui-components

Usage

All needed CSS, images, and javascript are found in /dist.

In Sass, you just need to import the sass file:

@import 'watson-ui-components/dist/_watson-ui-components.scss';

Make sure node_modules is a loaded path so that sass can find the route above.

How to Contribute

Install Dependencies

npm install
gulp

CSS Primarily Written in BEM format

• Side Effects in CSS
• BEM 101
• A New Front-End Methodology: BEM
• BEM: Technology for creating web applications

You will need to make sure the icon-fonts are referenced properly. The path of the icon-fonts must be relative to the path of the compiled css file.

You will also need to make sure to load the paths of your node_modules directory into your Sass configurations, so that the library can reference its npm dependencies properly.

Directory Structure

.
└─ dist
 ├── _watson-ui-components.scss   // Compiled Sass
 ├── watson-ui-components.css     // Compiled css
 └── watson-ui-components.min.css

Credits

This project could not have been made possible without the hard work from the team that worked on the previous Watson Design Guide. Many concepts and Sass techniques were borrowed from their project, while others were modified.