Content

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
    
<h1 class="base--h1">Header 1</h1>

<h2 class="base--h2">Header 2</h2>

<h3 class="base--h3">Header 3</h3>

<h4 class="base--h4">Header 4</h4>

<h5 class="base--h5">Header 5</h5>

<h6 class="base--h6">Header 6</h6>
    
    

Paragraph

Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.

Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.

    
<p class="base--p">Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.</p>
<p class="base--p base--p_light">Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.</p>
    
    

Link, Emphasized, Strong

Hyperlink emphasized text Strong Text
    
<a href="#" class="base--a">Hyperlink</a>

<em class="base--em">emphasized text</em>

<strong class="base--strong">Strong Text</strong>
    
    

Typography Settings

      
$TypographySettings: (
  'sans serif': ('Helvetica Neue', Helvetica, 'Open Sans', Arial, 'Lucida Grande', 'Roboto', sans-serif),
  'monospace': (source-code-pro, Menlo, Consolas, monospace),
  'weight bold': 700,
  'weight normal': 400,
  'weight light': 200,
  'rhythm': 2rem
);
      
    

Colors

Colors Settings

      
$ColorScheme: (
  'primary color': color('purple', 50),
  'secondary color': color('teal', 50),
  'background color': color('white', 10),
  'text color': color('gray', 80),
  'white': color('white', 10),
  'black': color('gray', 100)
);
      
    

set-text-color Function

The set-text-color function can find a contrasting text color given a background color.

        
.element-with-dark-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 20);
  color: set-text-color(color('purple', 20));
  }

  .element-with-light-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 80);
  color: set-text-color(color('purple', 80));
}
        
      
Dark text, light background
Light text, dark background

color Function

The color function can pull a color from the IBM Design Color palette given a color name and tone.

        
.lots-of-colors {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('white', 40);

  span:nth-of-type(1) {
    color: color('green', 50);
  }

  span:nth-of-type(2) {
    color: color('blue', 40);
  }

  span:nth-of-type(3) {
    color: color('yellow', 30);
  }
}
        
      
green 50 blue 40 yellow 30

get Function

The get function can look up a key in any global setting (Breakpoints, Typography, etc.) defined in the Sass library.

        
.get-example {
  display: block;
  padding: get('rhythm') / 2;
  background-color: get('background color');
  color: get('primary color');

  @include breakpoint(get('medium')) {
    @include grid(6);

    &:nth-of-type(2) {
      margin-right: 0rem;
    }
  }
}
        
      
Get
Get

Container

Containers define main body layouts and contain responsive grid elements.

      
<div class="_container">
  <div class="row">
    <!-- responsive grid elements -->
  </div>
</div>
      
    

In this library, there are containers of different widths.

      
<!-- max-width of 768px -->
<div class="_container"></div>
<!-- max-width of 1024px -->
<div class="_container _container_large"></div>
<!-- max-width of 1200px -->
<div class="_container _container_x-large"></div>
<!-- max-width of 1280px -->
<div class="_container _container_xx-large"></div>
      
    

Grid Mixin

For layouts designed with responsive grids, you can use the grid mixin.

        
.column-1 {
  @include grid(6);
  background-color: color('purple', 50);
  height: 3rem;
}

.column-2 {
  @include grid(3);
  background-color: color('teal', 50);
  height: 3rem;
  margin-top: 0rem;
}

.column-3 {
  @include grid(3, $has-right-gutter: false);
  background-color: color('gray', 50);
  height: 3rem;
  margin-top: 0rem;
}
        
      

Divisions Mixin

For layouts made with basic divisions, you can use the divisions mixin.

        
.left-division {
  @include divisions(2);
  background-color: color('purple', 30);
  height: 7rem;
}

.right-division {
  @include divisions(2);
  margin-top: 0rem;
  background-color: color('teal', 30);
  height: 7rem;
}
        
      

Divisions is also useful for ui like grid-view list items that don't align with a responsive grid layout.

        
.grid-item {
  @include divisions(5);
  background-color: color('purple', 50);
  height: 3rem;
  margin-top: 0rem;

  &:nth-of-type(2n) {
    background-color: color('teal', 50);
  }
}
        
      

Breakpoints

Below is a basic usage of defining responsive breakpoints using the Breakpoints-Sass mixin.

first item
second item
        
.breakpoint-example-1 {
  display: block;
  background-color: color('purple', 50);

  @include breakpoint(get('large')) {
    @include grid(6);
  }
  }

  .breakpoint-example-2 {
  display: block;
  background-color: color('teal', 50);

  @include breakpoint(get('large')) {
    @include grid(6);
  }
}
        
      

Breakpoint Settings

      
$BreakpointSettings: (
  'xx-small': 320px,
  'x-small': 360px,
  'small': 640px,
  'medium': 768px,
  'large': 1024px,
  'x-large': 1200px,
  'xx-large': 1280px
);
      
    

Typography Settings

      
$TypographySettings: (
  'sans serif': ('Helvetica Neue', Helvetica, 'Open Sans', Arial, 'Lucida Grande', 'Roboto', sans-serif),
  'monospace': (source-code-pro, Menlo, Consolas, monospace),
  'weight bold': 700,
  'weight normal': 400,
  'weight light': 200,
  'rhythm': 2rem
);
      
    

Colors Settings

      
$ColorScheme: (
  'primary color': color('purple', 50),
  'secondary color': color('teal', 50),
  'background color': color('white', 10),
  'text color': color('gray', 80),
  'white': color('white', 10),
  'black': color('gray', 100)
);
      
    

set-text-color Function

The set-text-color function can find a contrasting text color given a background color.

Dark text, light background
Light text, dark background
        
.element-with-dark-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 20);
  color: set-text-color(color('purple', 20));
  }

  .element-with-light-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 80);
  color: set-text-color(color('purple', 80));
}
        
      

color Function

The color function can pull a color from the IBM Design Color palette given a color name and tone.

green 50 blue 40 yellow 30
        
.lots-of-colors {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('white', 40);

  span:nth-of-type(1) {
    color: color('green', 50);
  }

  span:nth-of-type(2) {
    color: color('blue', 40);
  }

  span:nth-of-type(3) {
    color: color('yellow', 30);
  }
}
        
      

get Function

The get function can look up a key in any global setting (Breakpoints, Typography, etc.) defined in the Sass library.

Get
Get
        
.get-example {
  display: block;
  padding: get('rhythm') / 2;
  background-color: get('background color');
  color: get('primary color');

  @include breakpoint(get('medium')) {
    @include grid(6);

    &:nth-of-type(2) {
      margin-right: 0rem;
    }
  }
}