Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

Page layouts

Grid system

SKY UX layouts use Bootstrap's responsive, mobile-first, fluid grid system that scales up to 12 columns as the size of devices or viewports increases. Our grid columns have 15px in padding on both sides to create 30px gutters between columns and 15px gutters at the edges of the grid. The columns are fluid, but the gutters remain constant.

This grid system allows for a variety of page layouts but still conforms to our design and coding standards.

Responsive design

We rely the column drop pattern to create responsive designs. This pattern utilizes a multi-column layout and the full width of the screen. The column drop pattern displays columns horizontally at full width and then stacks columns vertically when the screen width becomes too narrow for the content. When and how to stack columns at different breakpoints will vary depending on the content of the design.

Page layout templates

SKY UX is a flexible system that allows for a variety of page layouts to solve workflow needs while maintaining a consistent feel across an application.

The following sections describe the standard page layouts for designing with SKY UX. These layouts show how to package components to suit a variety of user needs, but the system can accommodate alternate layout designs as necessary.

Work center

The work center layout provides a tile-based page that surfaces time-sensitive information and allows users to quickly navigate to the most recent information within an application. It can contain a page summary to highlight the most important information, a tabbed layout to support different tasks, and a carousel to feature high-priority items.

Work center page wireframe

List page

The list page layout provides a page that displays a list of related data. Common controls allow users to select the columns to display, sort the list, filter the list, search, and switch views. List pages can use tabs to display multiple lists or pre-filtered instances of a single list.

List page wireframe

Record page

The record page layout provides a tile-based page that displays a page summary and a main content area. The page summary at the top of the page provides an overview of a record. The main content area usually consists of two columns of tiles (or one column on extra small screens) that display information about the record in logical sections. The content to include in each area depends on the page's use case.

Record page wireframe