A properly structured layout enforces an optimal, consistent experience across applications.

Layout

.main-container:

The .main-container is a vertical flexbox which wraps the following components:

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

.content-container:

The .content-container is a horizontal flexbox which wraps the following components:
App Level Alert

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.

<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 and Content Area
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
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
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
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
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
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.

Buttons align left in content area

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

Buttons do not align right in content area

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.

24px Baseline

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.