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: 7.3.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": "7.3.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/7.3.0/css/honeycomb.min.css"/>


<link rel="stylesheet" href="//honeycomb.flixbus.com/dist/7.3.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/7.3.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/7.3.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/7.3.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/7.3.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 both 400 and 700 font weights when using it e.g.:

import "@fontsource/roboto/400.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-themes.css provides easy access to all the CSS theme variables
honeycomb-sm.css all of Honeycomb components, but in limited, mobile only version that has styles for sm breakpoint and bellow;
honeycomb-flags.min.css provides all the flag in this world as base64 encoded pngs of 24*24 size, classes are structured as follows .flix-flag--{country-code}
honeycomb-fonts.css provides all the necessary Roboto font face declarations.

Assets

Honeycomb makes several assets accessible at the same path either over cdn or via its npm package:

Flags

Since version 3.1.0 honeycomb offers a fully furnished flag-icon pack available over CDN as well as in the npm package.

The following path structure is valid for both distributions (but version number is not needed when using an npm package):

Under dist/7.3.0/img/flags/svg/{country-code}.svg and dist/7.3.0/img/flags/svg/{country-code}.min.svg you will find all the flag of the world as svg and their compressed version.
Under dist/7.3.0/img/flags/png/{country-code}.png you will find all the flag of the world as optimised png images.

You can also access smaller sizes at dist/7.3.0/img/flags/png/{country-code}-{size}.png, available sizes are: 24, 48, 72, 96. Please pay attention that the actual sizes are made to be "retina" screens compatible, the recommended UI sizes are 12px, 24px, 36px and 48px

Examples:

Italian flag 24px png: https://honeycomb.flixbus.com/dist/7.3.0/img/flags/png/it-24.png
German flag 96px png: https://honeycomb.flixbus.com/dist/7.3.0/img/flags/png/de-96.png
Ukrainian flag as compressed svg: https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/ua.min.svg

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/5.0.1/flix-icons/svg/{icon-name}.svg
e.g. https://honeycomb-icons.hive.flixbus.com/5.0.1/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.