Skip to content
This repository has been archived by the owner on Oct 17, 2022. It is now read-only.

DEPRECATED: this repo is no longer actively maintained

Notifications You must be signed in to change notification settings

watson-developer-cloud/ui-components

Repository files navigation

Watson Developer Cloud Component Library Build Status

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

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.