Layout v0.2.0+ HelixUI v0.2.0 or later required

The Layouts component provides information about Helix application anatomy for the purposes of advanced customization.

Layout Templates

It is highly recommended that you use one of the pre-defined layout templates described below.

If you find that the pre-defined templates do not meet your needs, please skip ahead to Prerequisites to review documentation needed to better understand how to customize your application.

All layout templates are optimized for use in single-page applications (SPAs).

Vertical Layout Horizontal Layout

Use a vertical layout if your application content needs to grow along the y-axis.

vertical layout thumbnail

The footer may appear below the bottom of the viewport.

Download Vertical Template   Preview Vertical Layout

Use a horizontal layout if your application content needs to grow across the x-axis.

vertical layout thumbnail

The footer is visible at all times.

Download Horizontal Template   Preview Horizontal Layout

Prerequisites

To get the most out of Layout documentation, developers are expected to:

  1. Review the instructions in the Getting Started guide.
  2. Have a basic understanding of the features and limitations of each of the pre-defined layouts.

Layout Anatomy

Layouts are composed of several different areas. Understanding the purpose for each area should help you locate the best place to add custom containers.

Document Body

Houses all markup for a layout.

html > body

Head

Reserved for cross-product, global navigation.

body > header#head

Foot

Reserved for legal information.

body > footer#foot

App Container

Mount point for single-page applications.

body > #app

Stage

Root element for single-page applications.

#app > div#stage

Nav

Houses hyperlinks to pages within an application.

#stage > nav#nav

Main Content

Houses primary page content.

#stage > main#content

Side Rail

Houses secondary page content.

#stage > aside.hxSiderail

Document Body

The document <body> is the root element for applying CSS needed for any application layout.

Add one of the following CSS classes to the <body> element to begin with pre-defined layout styles.

  • hxVertical for a vertical layout
  • hxHorizontal for a horizontal layout

App Container

The app container serves as the mounting point for your single-page application.

  • It must have an ID of app.
  • It can be any block element.
HTML Angular 2+ 
<div id="app">
  <div id="stage"></div>
</div>
App container markup using vanilla HTML
 
<app-root id="app">
  <div id="stage"></div>
</app-root>
App container markup using Angular

Stage

The stage serves as the root element required by client-side frameworks that use virtual DOM technologies (e.g., hyperscript).

The Stage can be divided into three areas:

  1. Nav (optional)
  2. Main Content
  3. left or right Side Rail (optional)

The stage container must have an ID of stage. 

<div id="stage">
  <!-- (optional) Nav -->
  <nav id="nav">
    <!-- internal application links -->
  </nav>

  <!-- (optional) Left Side Rail -->
  <aside class="hxSiderail">
    <!-- secondary page content -->
  </aside>

  <main id="content">
    <!-- primary page content -->
  </main>

  <!-- (optional) Right Side Rail -->
  <aside class="hxSiderail">
    <!-- secondary page content -->
  </aside>
</div>
Skeleton HTML markup for the stage container

The nav area houses hyperlinks to pages within your application.

  • It must have an ID of nav.
  • Use a <nav> element to provide the best support for accessible user agents.
  • See the Navigation component for content information. 
<nav id="nav">
  <!-- links to pages within application -->
</nav>
HTML markup for the nav area

Main Content

The main content area houses primary page content.

  • It must have an ID of content.
  • Use a <main> element to provide the best support for accessible user agents.
  • Add the role="main" attribute to provide the best legacy support for accessible user agents.

The main content area behaves like a non-wrapping grid row when used in a horizontal layout.

Padding must be applied manually, using Box component styles. 

<main role="main" id="content">
  <!-- primary page content -->
</main>
HTML markup for the main content area

Side Rail

The side rail houses secondary page content.

  • Use an <aside> element to provide the best support for accessible user agents.
  • Add the hxSiderail CSS class to apply visual styling.

Avoid using a side rail in a horizontal layout.

Avoid adding multiple side rails on a single page. 

<aside class="hxSiderail">
  <!-- secondary page content -->
</aside>
HTML markup for a side rail

See Also