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 3 generalized line styles that you can apply with a SASS mixin.

Line 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 #e2e3e4
  • 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 #cdcfd2
Row separator
Usage
This line style 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 #cdcfd2

Corners

In general, the component should handle the style of corners. If you need to directly specify the corners of an element, the rule of thumb is to use rounded corners for interactive elements and square corners for containers.

Usage
Rounded corners are primarily for interactive elements such as buttons to distinguish them from non-interactive elements.
Code
border-radius: 3px
Styling
border-radius: 3px

Shadows

In general, the component should handle the use of shadows. Interface designs should be flat aside from these components and use other techniques to create visual separation.

Usage
Shadows provide visual offsets for elements such as dropdowns that float over other elements.
Code
@include shadow()
Styling
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)