HelixUI v0.2.0 or later required
The Layouts component provides information about Helix application anatomy for the purposes of advanced customization.
It is highly recommended that you use one of the pre-defined layout templates mentioned in Layout Templates below.
If you find that the pre-defined templates don't meet your needs, please skip ahead to Prerequisites to review documentation needed to better understand how to customize your application.
Download or preview one of the pre-defined layout templates below.
Use a vertical layout if your application content needs to grow along the y-axis.
Use a horizontal layout if your application content needs to grow across the x-axis.
To get the most out of this documentation, developers are expected to:
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
Reserved for cross-product, global navigation.
body > header#head
Reserved for legal information.
body > footer#foot
- App Container
Mount point for single-page applications.
body > #app
Root element for single-page applications.
#app > div#stage
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
<body> is the root element
for applying CSS needed for any application layout.
Add one of the following CSS classes to the
to begin with pre-defined layout styles.
hxVerticalfor a vertical layout
hxHorizontalfor a horizontal layout
The app container serves as the mounting point for your single-page application.
- It must have an ID of
- It can be any block element.
The stage serves as the root element required by client-side frameworks that use virtual DOM technologies (i.e., hyperscript). It can be divided into three areas:
The stage container must have an ID of
The nav area houses hyperlinks to pages within your application.
It must have an ID of
<nav>element to provide the best support for accessible user agents.
- See the Navigation component for content information.
The main content area houses primary page content.
It must have an ID of
<main>element to provide the best support for accessible user agents.
role="main"attribute to provide the best legacy support for accessible user agents.
The side rail houses secondary page content.
<aside>element to provide the best support for accessible user agents.
hxSiderailCSS class to apply visual styling.