Skip to main contentSkip to site searchSkip to component search
Honeycomb
Honeycomb living styleguide

Honeycomb UI kit

Honeycomb is meant to be the single source of truth when it comes to frontend development and SCS integration in FlixTech. It consists of two main parts:

  • CSS framework with "FLIX-styled" set of components
  • Frontend guidelines and best practices we recommend following to achieve smooth cross-team collaboration and multiple system integration.

Authors: Team Hive

Version: 16.0.2

Using React? Checkout our React components!

Important note! To avoid unpredictable behaviour make sure you use specific version of the package from the CDN or NPM (see bellow for more info).

Getting started

The easiest way to get started is by cloning one of the example projects that contain the dependency you want and start coding from them.

Or, if you prefer starting your project from scratch or you are adding honeycomb to an existing project, you can install Honeycomb from either npm or CDN.

For better stability and control pay attention to specifying the version in both scenarios.

Installing with npm

We are using jFrog private npm registry, so in order for everything to work smooth you'll need to setup the registry on your machine.

Then you can simply run the following command to include honeycomb as dependency in your project:

npm install @flixbus/honeycomb --save

or manually include it in your project's package.json:

"dependencies": {
  "@flixbus/honeycomb": "16.0.2"
}

Installing using the CDN

Honeycomb has own CDN support for CSS.

Please pay attention to versioning. It is important to specify the exact version you need when constructing the urls. In this doc we always use the latest version.

<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/themes/flix.min.css">
<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/honeycomb.min.css">
<!-- Starting from ver. 16 themes need to be included separately -->

Requiring themes

Starting from ver. 16 honeycomb.min.css doesn't come with themes included. This gives you the flexibility to include only the theme files your app needs and significantly reduce the resulting bundle size.

For example, if your app needs "flix", "kamil" and "neptune" themes, your CDN links should look like this:

<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/themes/flix.min.css">
<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/themes/kamil.min.css">
<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/themes/neptune.min.css">
<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/16.0.2/css/honeycomb.min.css">
<!-- Note every theme is included separately. Each theme file also includes "dark" mode -->

Each of the files above also includes "dark" mode, but there are more possibilities if you need them. Please read our themes documentation to find more about which theme files are present and how to use them.

Requiring Roboto font

In order for components to look and behave as expected, "Roboto" font needs to be included on the page.

We recommend 2 options:

  1. Use our CDN link:
<link rel="preconnect" href="//honeycomb.flixbus.com/">
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/16.0.2/css/honeycomb-fonts.css" crossorigin>
<link href="//honeycomb.flixbus.com/dist/16.0.2/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin>
  1. Use @fontsource/roboto package.

Second option is beneficial if you want to have a fine grain control over the assets you load.

Make sure you import all our font weights (400, 500 and 700) when using it e.g.:

import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

Other distribution files

Honeycomb offers more css distribution files, all following the url described above, ending with relative name:

  • honeycomb-components.css - has only component styles without theme design tokens;
  • honeycomb-fonts.css provides all the necessary Roboto font face declarations;
  • honeycomb-helpers.css - helpers only;
  • honeycomb-sm.css - all Honeycomb components, but in limited, mobile only version that has styles for sm breakpoint and bellow;
  • honeycomb-custom-colors.css - theme variables with custom color set for color coding, not bound to any theme.

Custom bundles and partials

Since ver. 10.0 Honeycomb exposes individual component partials allowing you to assemble custom CSS bundles and save on the resulting CSS file size. If your app has really tight requirements on the bundle size or page load times, this would be the way to go. Otherwise, we recommend using pre-bundled files to save time on development and code maintenance.

In order to assemble custom bundles you'll need to enable SASS support in your project.

Partials are located in dist/scss folder. It contains all the style partials divided into subdirectories based on their purpose.

dist/
└── scss/
    ├── common
    │       ├── config
    │       ├── utils
    │       └── ...
    ├── components/
    │       ├── accodrion.scss
    │       ├── avatar.scss
    │       ├── ....
    │       └── tooltip.scss
    ├── helpers
    │       ├── a11y.scss
    │       ├── alignment.scss
    │       ├── ....
    │       └── spacing.scss
    └── themes
            ├── flix.scss
            ├── flix-dark.scss
            ├── high-contrast.scss
            ├── kamil.scss
            ├── ....
            └── neptune.scss
  • common folder contains configuration files, SASS mixins and base styles;
  • components folder contains component specific SCSS partials that are named according to component class names but without a flix prefix;
  • helpers folder contains helper classes
  • themes contains themes and theme colors (note that files in here are generated out of design tokens and not meant to be edited directly);

To assemble the CSS bundle, create a new SCSS/SASS file in your project and import all the partials you want to include in your CSS bundle. Here's an example:

// Importing base styles and themes
//=================================
@use '@flixbus/honeycomb/dist/scss/common/all'; // base styles and configs are required
// Configure flix theme with dark mode 👇
@use '@flixbus/honeycomb/dist/scss/themes/flix.scss' with ($modes: ('dark'));
// Same for neptune theme 👇
@use '@flixbus/honeycomb/dist/scss/themes/neptune.scss' with ($modes: ('dark'));

// Importing component styles
//=================================
@use '@flixbus/honeycomb/dist/scss/components/button';
@use '@flixbus/honeycomb/dist/scss/components/checkbox';
@use '@flixbus/honeycomb/dist/scss/components/fieldset';
@use '@flixbus/honeycomb/dist/scss/components/grid';
@use '@flixbus/honeycomb/dist/scss/components/header';
@use '@flixbus/honeycomb/dist/scss/components/header-brand';
@use '@flixbus/honeycomb/dist/scss/components/header-burger-menu';
@use '@flixbus/honeycomb/dist/scss/components/header-nav';
@use '@flixbus/honeycomb/dist/scss/components/input';

Please note that including base styles and configs from the common folder is required for things to work nicely.

When importing component partials pay attention that for some of the components you might need to import dependencies. E.g. Panel and Popup will require you to have Button styles available. We recommend inspecting your HTML markup for component names, like flix-{component_name} CSS classes and matching them with the respective partials.

Additionally, we highly advice to include individual theme files for fine-grained customization and smaller file size. For more information on theme files please check our themes documentation.

Assets

Flags

Starting from ver. 12 flag assets within Honeycomb are deprecated, as a replacement we're offering dedicated flag libraries, please follow these links for more info:

Icons

Icon only endpoints are no longer offered on honeycomb since version 5.0 in favour of the new Honeycomb-Icons library:

All the svg files are available at:

Developer's Guide

To find out how things work inside and which best practices we try to follow, make sure checking our Dev's guide.