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: 13.5.0

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": "13.5.0"
}

Installing using the CDN

Honeycomb has own CDN support for CSS.

Please note that it's advisable to specify the version tag when using Honeycomb in your system. Use latest master only when in development mode or prototyping purposes, deploy with the tagged one to production.

<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb.min.css"/>

<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb.min.css"/>

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:

Use our CDN link:

<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin=""/>
<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/13.5.0/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin=""/>

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-themes.css provides easy access to all the CSS theme variables;
honeycomb-theme-{theme_name}.css - holds theme variables for the respective theme;
honeycomb-theme-{theme_name}-full.css - theme variables for the respective theme plus its dark variation;
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
            ├── theme-flix.scss
            ├── theme-flix-dark.scss
            ├── theme-high-contrast.scss
            ├── theme-kamil.scss
            ├── ....
            └── theme-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
//=================================
@import '@flixbus/honeycomb/dist/scss/common/all'; // base styles and configs are required
@import '@flixbus/honeycomb/dist/scss/honeycomb-themes'; // here you can also use individual theme files

// Importing component styles
//=================================
@import '@flixbus/honeycomb/dist/scss/components/button';
@import '@flixbus/honeycomb/dist/scss/components/checkbox';
@import '@flixbus/honeycomb/dist/scss/components/fieldset';
@import '@flixbus/honeycomb/dist/scss/components/grid';
@import '@flixbus/honeycomb/dist/scss/components/header';
@import '@flixbus/honeycomb/dist/scss/components/header-brand';
@import '@flixbus/honeycomb/dist/scss/components/header-burger-menu';
@import '@flixbus/honeycomb/dist/scss/components/header-nav';
@import '@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, pay attention that you can also include individual theme files to even more fine-grained customization.

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:

https://honeycomb-icons.hive.flixbus.com/{LIBRARY-VERSION}/flix-icons/svg/{icon-name}.svg
e.g. https://honeycomb-icons.hive.flixbus.com/5.7.0/flix-icons/svg/account.svg

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.