Line styles

SKY UX uses various line styles to bound, divide, and highlight content. The lines are designed to maintain visual hierarchy regardless of how complex pages become or how many nested containers they include.

As with other types of formatting or decoration in SKY UX, use lines minimally. Remember that white space and positioning can group or highlight content without extra subdivisions or boundaries.

SKY UX uses 6 line styles that you can apply with a SASS mixin.

  • A light separator to organize and divide blocks of content within a container
  • A dark separator to indicate borders and boundaries for components
  • 4 prescriptive, "isolated" line styles:
    • Navigation selection underline
    • Tab underline
    • Tile crown
    • Row separator

Generic styles

Light separator
Usage

The light separator is a very light gray, single-pixel line that subdivides content within a container. Do not use it at the edge of a container. Only use it when it is adjacent to white space on both sides.

SKY UX uses this style for:

  • Subsection dividers within containers such as tiles
  • Top boundaries for action bars on modals

Code
@include bb-border(light)
Styling
  • 1px solid #e7eaec
  • When this line style subdivides content within a container, use a 15px margin on both ends.
Dark separator
Usage
  • The dark separator is a moderate gray, single-pixel line. This heavier stroke holds up between two different colors, which makes it ideal for borders and boundaries. It also frequently separates active content from passive content. For example, it can separate a toolbar from the content that the toolbar acts on.

    SKY UX uses this style for:

    • Borders on buttons
    • Top and bottom boundaries for toolbars in areas such as tiles and grids
    • Column dividers for header rows in grids
    • Borders for cards
    • Built-in data visualization axes
Code
@include bb-border(dark)
Styling

1px solid #ccc

Isolated styles

Isolated line styles are specific to certain parts of SKY UX and are defined as part of the component that they belong to. They should not proliferate to other SKY UX elements.

Navigation selection underline
Usage

This line style highlights the active navigation item in the navbar. It aligns to the bottom of the navigation item and stretches to its full width.

Code
@include bb-border(nav)
Styling

4px solid #1c84c6

Tab underline
Usage

This line style separates tab controls from their contents. It aligns to the bottom of the tab controls and stretches to the full width of the container.

Code
@include bb-border(tab)
Styling

2px solid #1c84c6

Tile crown
Usage

This line affixes to the top of tiles. It extends above the top of the tile and stretches to its full width.

Code
@include bb-border(tile)
Styling

4px solid #e7eaec

Row separator
Usage

This line separates members of a homogenous set. It separates the rows in grids or repeaters. The dotted style lowers its visual weight, and the moderate gray allows it to work with or without row striping on the list rows. It stretches to the full width of the rows (not the width of the container that holds the rows).

Code
@include bb-border(row)
Styling

1px dotted #ccc