Skip to main contentSkip to site searchSkip to component search
Honeycomb

Layout

There are 2 things Honeycomb offers helping you build layouts for your pages:

  • flix-main-wrapper and flix-page-container helper elements;
  • all the power of Grid component.

Main wrapper

The flix-main-wrapper takes care of setting a proper background color for your page as well as some basic styles for root/body element. Normally we recommend applying it to the <body> HTML element or a direct parent of it.

You can apply flix-main-wrapper--full modifier to it to make the component occupy the whole viewport no matter how much content it has inside.

This is specifically useful for dark themes where having the proper background is crucial.

Page container

The flix-page-container does 2 things:

  • sets min and max widths
  • adds side paddings acting as a grid-container element

For layouts with a fixed header you can apply the flix-page-container--has-fixed-header variation and the component will provide the necessary spacing on top to compensate for header placement.

If your header does not have a navigation, use the flix-page-container--has-fixed-header-no-nav instead.

An example setup for any page can look like this:

<!DOCTYPE html>
<!-- adding a theme container -->
<html class="flix-theme-dark">
<!-- applying proper background with main-wrapper element -->
<body class="flix-main-wrapper">
  <!-- Your app with all the Honeycomb component you use needs to be here -->
  <header class="flix-header"></header>
  <main class="flix-page-container flix-page-container--has-fixed-header"></main>
</body>
</html>

Check the Themes guide for details on how to implement the theme container and choose between light and dark themes according to user preference.

Creating layouts

As a main thing in creating different layout types we recommend using the provided Grid component.

This enables you to create 1, 2, 3 or any column sized layouts with a responsive behaviour.

Please refer to examples and Grid component's documentation to get into details.

Here is a layout example forcing the "dark" theme:

Honeycomb Logo

Here is an example of a one-column waiting/error page

Note the usage of a theming container that wraps the whole thing and applies a `dark` theme to this example only. 

<div class="flix-theme-dark">
    <div class="flix-main-wrapper">
        <header class="flix-header flix-header--unfixed">
            <div class="flix-header__inner">
                <div class="flix-header-brand flix-header-brand--square">
                    <a class="flix-header-brand__link" href="/">
                        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
                    </a>
                </div>
            </div>
        </header>
        <main class="flix-page-container">
            <div class="flix-grid flix-grid--justify-center">
                <div class="flix-col-12 flix-col-8-sm flix-col-6-xl flix-has-text-centered">
                    <div class="flix-spinner flix-space-4-top flix-space-2-bottom"></div>
                    <h1 class="flix-h1">Here is an example of a one-column waiting/error page</h1>
                    <p class="flix-text">
                        Note the usage of a theming container that wraps the whole thing and applies a `dark` theme to this example only.
                    </p>
                </div>
            </div>
        </main>
    </div>
</div>

And another one with "kamil" theme:

Kâmil Koç Logo

Here is an example of a common two-column page layout

Note the usage of Grid component that defines the layout and allows you fully customize the width of the columns as well as applying flexbox alignment options. 

<div class="flix-theme-kamil flix-space-4-top">
    <div class="flix-main-wrapper">
        <header class="flix-header flix-header--unfixed">
            <div class="flix-header__inner">
                <div class="flix-header-brand flix-header-brand--tall">
                    <a class="flix-header-brand__link" href="/">
                        <img class="flix-header-brand__img" width="78" height="36" src="/img/logos/svg/kamil-white.svg" alt="Kâmil Koç Logo"/>
                    </a>
                </div>
            </div>
        </header>
        <main class="flix-page-container flix-space-2-top">
            <div class="flix-grid flix-grid--justify-center">
                <div class="flix-col-12 flix-col-2-md">
                    <ul class="flix-nav-side">
                        <li class="flix-nav-side__item">
                            <a class="flix-nav-side__link" href="#">Link 1</a>
                        </li>
                        <li class="flix-nav-side__item">
                            <a class="flix-nav-side__link" href="#">Link 2</a>
                        </li>
                        <li class="flix-nav-side__item">
                            <a class="flix-nav-side__link" aria-current="page" href="#">Link 3</a>
                        </li>
                    </ul>
                </div>
                <div class="flix-col-12 flix-col-10-md">
                    <h3 class="flix-h3 flix-h3--section-header">Here is an example of a common two-column page layout</h3>
                    <p class="flix-text">
                        Note the usage of Grid component that defines the layout and allows you fully customize the width of the columns as well as applying flexbox alignment options.
                    </p>
                </div>
            </div>
        </main>
    </div>
</div>