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.

Helper elements

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 making the component occupying 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.

flix-page-container does 2 things:

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

For the layout with a fixed header flix-page-container can also provide the necessary spacing on top to compensate for header placement. This is done by applying flix-page-container--has-fixed-header variation.

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>

Creating layouts

As a main thing in creating different layout types we recommend using a provided Grid component. This enables you creating 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:

Honeycomb 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--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 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>
Made with 🍯 by FlixMobility 2023