Application Layout

Layout

.main-container:

Note: Although Clarity does not have a footer component, a custom footer can be added in the main-container.

.content-container:

<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
    </nav>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

Basic Structure

Two constants of an app built in Clarity are the header and content area. These are the blocks upon which you build your app model.

Header

The header is for branding and app-level elements such as navigation, search, and account settings.

Content Area

The content area is where users focus their attention most of the time, gathering information and performing tasks–it is the canvas for your application. As the largest portion of your app, the content area is always visible.

Layout

Your layout should reflect the information or workflow of the selected navigation. When laying out the content, keep the following in mind:

• The flow of content–how to create a hierarchy and layout that draws attention to the areas of importance
• The importance of designing to the grid
• How to aid users in completing their tasks
• How to handle large amounts of data
• Responsive design (if that is part of your product’s goals)

Common Layout Patterns

Content can consist of any of the Clarity components, or no components and just information. Following are common layout patterns and recommended usage. For information on navigation components, header, subnav, and sidenav, see Navigation.

Cards

Cards are for presenting high-level information and guiding users to related actions and details. Cards might include a combination of text, images, and data visualizations.

Benefits of using cards include:

• Ability to see data in a collection
• Facilitates scanning of information
• Works well across platforms

Tables and Datagrids

Tables and datagrids are for good for managing large amounts of data. These layouts work well when users need to compare data and perform batch operations.

A table is a static view. A datagrid provides users flexibility in viewing the data, including filtering and sorting.

Complex tables and datagrids work best on larger screens.

Forms

Forms are for collecting data from users. Forms are comprised of other components, including labels, input fields, labels, checkboxes, radio buttons, and text.

A benefit of a form is that users can see what information they must provide. Conversely, too many fields can discourage the user.

Inline forms are better than modals in cases where you don't want to block users from performing other actions.

Tabs

Tabs appear in a single, non-scrollable row, at the top of the content area. They are good for breaking content into separate, related views.

Tabs are not appropriate if users need to compare data across views.

White Space and Typography

White space and typography are important elements in conveying hierarchy. These elements direct users to what they should view next and make the content and data easier to parse. They also helps bring consistency to an app.

Button Placement

In the content area, buttons are left-aligned, with the primary button in the leftmost position. This placement supports the F-pattern layout.

Do. Left-alignment puts buttons closest to the content.

Don't. On the right, buttons might appear separate from content.

Using Vertical Rhythm for Layout

Vertical rhythm is the repetition of spatial relationships in a design. A consistent rhythm gives elements a uniform and balanced placement in a design. The more consistent the design, the easier it is for users to read and understand.

The Clarity Baseline is 24px

All elements in Clarity are built in terms of 24px:

• The height of all components and text elements is in multiples of 24px.
• The vertical white space between elements is also in multiples of 24px.

Repeat 24px in Your Layout

Calculate the vertical margins and padding between elements using the Clarity baseline. A multiple of 24px can be a whole or half-ratio. Common numbers include: 6px, 12px, 18px, 24px, 30px, 36px, 42px, 48px, 54px, 60px, 66px, 72px.

Changing vertical rhythm with rem

Clarity uses rem units for its whitespace and sizing. If the 24px vertical baseline is too large or too small for your needs, you can edit this globally across a Clarity application by changing the font-size style of the html element, as in the example below.

html {
    /* the following line of CSS would change Clarity to a 20px vertical rhythm with a 5px grid */
    font-size: 20px;
}

Note that the declaration on the html selector needs to happen after the Clarity CSS has been loaded. Also note that the "grid" for Clarity layouts and components is equal to one-fourth of the baseline. So instead of a 6px grid, the example above will put your application on a 5px grid.