Layout

Honeycomb comes with an elegant layout scaffolding framework to quickly lay out your UI in a modern, standards-compliant way. Create the entire application layout with just 45 lines of CSS!

App layout

Honeycomb has a modern CSS-based framework to quickly create a cross-browser, standards-compliant application layout. The system is extremely markup light and leverages some cool CSS grid tech.

To scaffold the application, simply add .hc-app to the <html> element and .hc-app-body on the <body> element. Add the Header of your choice with class .hc-app-header, and then a sibling <main> element with class .hc-app-main.

Create an <aside> element inside of this main content section with class .hc-app-side to contain the Left Navigation (and secondary navigation, if used). Finally, create another content element with class .hc-app-content as the main application content section.


.hc-app // html element
  ╰── .hc-app-body // body element that creates 2 grid rows
        ├── .hc-app-header // application header and controls
        ╰── .hc-app-main // main application pane that creates 2 grid columns
              ├── .hc-app-side // wrapper element for the left navigation(s)
              │     ├── .hc-app-nav // left navigation element
              │     ├── .hc-app-nav // secondary navigation element if used
              │── .hc-app-content // wrapper element for all main content
              │     ├── .hc-app-content-wrapper // optional wrapper when used with content footer
              │     ├── .hc-app-content-footer // content footer with advanced positioning
              ╰── .hc-drawer // optional right drawer

For visual purposes, the elements will arrange like the following basic diagram:

html.hc-app > body.hc-app-body

.hc-app-header

.hc-app-main

.hc-app-side

.hc-app-nav

.hc-app-content

You can see a live demo of this app layout structure on the Layout demo page.

Accessibility requirements

In order to maintain WCAG 2.1 compliance, certain attributes are also required on these landmark elements layout out the app structure. Please see Header and Navigation to make sure you’re using the appropriate elements and ARIA roles/labels.

Make sure you’re using the <main>, <header>, and <aside> elements as documented. The primary content section, .hc-app-content, should also have role="region" and aria-label="Content" to both signify that it’s a landmark and provide some semantic information.

Technical details

The layout is handled primarily by CSS grid template rows, grid template columns, and position: sticky.

The <body.hc-app-body> element is a grid with two named rows: header at 4rem height and main at 1fr (filling the remainder). The .hc-app-main content wrapper is a grid with two named columns: side at auto width and content at 1fr. Both the header and nav use position: sticky to keep them fixed while not having to use the fixed position and its downsides of removing those elements from the document flow.

One of the advantages here is that when the nav bar (or secondary nav bar) collapse, there is no additional width or margin handling needed for the content section—everything Just Works™.

The only special handling here is that the content and side sections have their heights calculated as calc(100% - 4rem) to account for the header.

Left navigation options

By default, the Left Nav displays in its full width at all breakpoints, with collapsibility handling in connection to the content section (if added).

Two helper classes added to .hc-app-side will alter this default behavior:

.hc-app-side--desktop: the Left Nav is hidden entirely on small screens up to the lg breakpoint, at which point it shows in its full width.
.hc-app-side--desktop--nav-collapsed: same as above but instead of hiding entirely, the left nav collapses to its small size on screens up to lg.

Importantly, in this forced-collapsed state on small screens, toggling expand/collapse is not currently supported. The Nav will be fixed in its small form until lg, at which point normal behavior will resume. Any toggle added to the navigation will hide automatically to accomodate this limitation.

Tab bar (coming soon)

In a future release prior to v1, adding .hc-app-side--tabbar will automatically display the Left Nav as a set of bottom-fixed tabs in a familiar mobile OS style. This is currently a work in progress.

You can optionally include a footer to the main content section. This footer will automatically stick to the bottom of the viewport when the content is not tall enough to push it there, and then otherwise flow with the content.

There is a slight structural change to enable this: all content inside of .hc-app-content must be wrapped in .hc-app-content-wrapper. A sibling to this later element is the .hc-app-content-footer element, where the footer content will go. There is a live example of this on the Layout demo.

Z-index stack

The following z-index values are used for certain components and foundational elements. Reference these if you need to manually layer something on the z-axis.

1: Anything that just needs to sit above content.
10: Header
20: Components that need to sit above the header, like Drawer on mobile screens
40: Dropdown and Popup
50: Tooltip and Toast
100: Modal, using the <dialog> element

Breakpoints

Honeycomb uses the same set of media query breakpoints that stock Tailwind defines, with an added xs breakpoint at the general mobile portrait max:

Code	Breakpoint	Screen
`xs`	`480px`	Mobile phones in portrait; below this is for mobile screens
`sm`	`640px`	Mobile phones in landscape
`md`	`768px`	Tablets in portrait
`lg`	`1024px`	Tablets in landscape
`xl`	`1280px`	Desktop screens
`2xl`	`1536px`	External displays and wide screens

Honeycomb Design System