These are the colors used in the mr.Watson UI :smiley:
Do not use these colors directly. Instead use the UI color variables.
New colors can be added as Sass variables in app/base/_variables.scss
Green
Grey
White
Sec Blue
Sec Red
These are the UI colors and their Sass variable names.
If you would like to know a color's Hex value, click on the color.
Just don't use the Hex value in production because they change with the mr.Watson color palette
$body-background-color
$block-background-color
$border-color
$border-color--accent
$button-color--neutral
$button-color--neutral--accent
$button-color--happy
$button-color--happy--accent
$button-color--strict
$button-color--strict--accent
$button-color--angry
$button-color--angry--accent
$button-color__text
$button-color--neutral__text
$text-color
$text-color--accent
$header-color
$header-color--accent
$link-color
Most of the icons come in two styles: solid and naked.
The icon will automatically use the same color as the type in the element would. To customize the color you can use the 'color': property.
Possible options are:
$(ui.component.icon.render({
'icons': [{
'icon': 'icon-solid-bell',
'color: 'green'
}, {
'icon': 'icon-naked-bell'
}]
}));
//↓ Renders ↓
Mr.Watson uses the Sass version of Bootstrap's grid. Note we only use Bootstrap's grid. Other bootstrap classes won't work.
Rules of engagement:
More info:
getbootstrap.com/css/#grid getbootstrap.com/examples/grid
<div class="container">
<div class="row">
<div class="hidden-xs hidden-sm hidden-md col-lg-3">
<!--green-->
</div>
<div class="col-xs-12 col-lg-9">
<div class="row">
<div class="col-xs-6">
<!--blue-->
</div>
<div class="col-xs-6">
<!--red-->
</div>
</div>
</div>
</div>
</div>
↓ Creates a grid like this ↓
Mr.Watson uses a 2 column grid with a full-width header on top
The right side column can be divided in two columns. The example below demonstrates the layout mr.Watson currently uses.
The left column 'hidden-xs hidden-sm hidden-md col-lg-3' is for navigation and disappears on small devices or screen-widths.
The middle column 'col-md-9' is for main content.
The (optional) right column 'col-md-3' is for widgets and disappears on small devices or screen-widths.
Apps can use the 9 columns on the right in the same fashion the platform does. They can either take up the entire 9 columns. I.e. for placing the App Bar Component which houses the app's filter views and action buttons.
The optional right column is used for in-app navigation.
App Bar or full-width app content
App content
The (optional) right column (col-md-3) for in-app nav
1/4 grid for small content blocks
1/4 grid for small content blocks
1/4 grid for small content blocks
1/4 grid for small content blocks
Right now the only font used is Source Sans Pro.
If a new font is to be added please do this in the /styles/main.scss file via the @import method.
For buttons we use $button-font Sass variable. (Currently Source Sans Pro, but with 1 px letter spacing)
For navigation we use the same font but set to $font-size--small
For regular type in <p> we use the $font-family Sass variable. (Currently Source Sans Pro)
This is a paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, cumque quis possimus dicta illo qui, quaerat deleniti distinctio. Mollitia deleniti praesentium molestias provident facilis facere minus aut quam, ex repellendus. This is what a link looks like in a paragraph