Spacing rules

We use several predefined spacing values through all of our components and layouts. Those values are illustrated bellow and need to be preserved to ensure consistency among all FlixBus products.

• 3px - (--flix-spacing-half)
• 6px - (--flix-spacing-1)
• 12px - (--flix-spacing-2)
• 18px - (--flix-spacing-3)
• 24px - (--flix-spacing-4)
• 36px - (--flix-spacing-6)
• 48px - (--flix-spacing-8)
• 72px - (--flix-spacing-12)

Using spacing variables

As a best practice we strongly advice against hard-coding the spacing values, you should reuse predefined spacing variables whenever possible.

This makes your component work properly with different Honeycomb themes, which is important as some of them can have different spacing rules applied and hardcoded numbers in custom components can create layout problems when used alongside Honeycomb components.

For development the variables can be pulled as CSS custom properties from our theme files.

Here is the portion of CSS representing the theme spacing variables, you can see they follow the same naming and also there are more options available for development. This is to better cover corner-cases and fine adjustments where needed:

:root {
  /** other theme variables above... */
  --flix-spacing-half: 3px;
  --flix-spacing-1: 6px;
  --flix-spacing-2: 12px;
  --flix-spacing-3: 18px;
  --flix-spacing-4: 24px;
  --flix-spacing-5: 30px;
  --flix-spacing-6: 36px;
  --flix-spacing-7: 42px;
  --flix-spacing-8: 48px;
  --flix-spacing-9: 54px;
  --flix-spacing-10: 60px;
  --flix-spacing-11: 66px;
  --flix-spacing-12: 72px;
  /** more theme variables bellow... */
}

Consider using variables as much as possible when you're adding custom styles to components.

// including honeycomb tools and theme variables
@import '@flixbus/honeycomb/assets/scss/honeycomb-tools';
@import '@flixbus/honeycomb/assets/scss/honeycomb-themes';

.my-awesome-box-component {
  margin-bottom: cssvar(spacing-2);
  padding: cssvar(spacing-2);
}

Note that when using SASS you can use cssvar() function that takes care of prefixing the variables. This is equal to the following CSS code:

.my-awesome-box-component {
  margin-bottom: var(--flix-spacing-2);
  padding: 0 var(--flix-spacing-2);
}

For hardcoded numbers like 5px try to apply the nearest spacing variable e.g. spacing-1. This is a best practice we apply to Honeycomb components which allows us for centralized spacing control.