Helpers

Honeycomb provides set of helper classes for applying a common customizations for existing components easily.

Such helpers include following categories:

Visibility helpers

These helpers allow you to hide elements on a certain breakpoints.

• flix-hidden;
• flix-hidden-zero;
• flix-hidden-xs;
• flix-hidden-sm;
• flix-hidden-md;
• flix-hidden-lg;
• flix-hidden-xl;

<div class="flix-box flix-hidden-zero">flix-hidden-zero</div>
<div class="flix-box flix-hidden-xs">flix-hidden-xs</div>
<div class="flix-box flix-hidden-sm">flix-hidden-sm</div>
<div class="flix-box flix-hidden-md">flix-hidden-md</div>
<div class="flix-box flix-hidden-lg">flix-hidden-lg</div>
<div class="flix-box flix-hidden-xl">flix-hidden-xl</div>

Text alignment helpers

They allow you aligning text and inline-block elements within the text containers.

• flix-has-text-centered;
• flix-has-text-left;
• flix-has-text-right;

<div class="flix-box flix-has-text-centered">flix-has-text-centered</div>
<div class="flix-box flix-has-text-left">flix-has-text-left</div>
<div class="flix-box flix-has-text-right">flix-has-text-right</div>

Spacing helpers

Space adding helpers:

• flix-space-{spacing}-top;
• flix-space-{spacing}-bottom;
• flix-space-{spacing}-left;
• flix-space-{spacing}-right;

{spacing} refers to one of available spacing options: half, 1, 2, 3, 4 etc. (see Spacing rules section for more details).

<div class="flix-box flix-space-4-bottom">flix-space-4-bottom</div>
<div class="flix-box flix-space-6-bottom">flix-space-6-bottom</div>
<div class="flix-box flix-space-8-bottom">flix-space-8-bottom</div>

Space resetting helpers:

These helpers reset margins on elements.

• flix-space-flush-top;
• flix-space-flush-bottom;
• flix-space-flush-left;
• flix-space-flush-right;

Accessibility helpers

To visually hide elements but still make them readable by screen readers:

• flix-sr-only;

If the element is focusable and should be made visible when interacted with the keyboard:

• flix-sr-only-focusable;

Try tabbing through the following list of links:

<div><a class="flix-link" href="visible-link">Visible Link</a></div>
<div><a class="flix-link flix-sr-only" href="screen-reader-only-link">Screen Reader Only Link</a></div>
<div><a class="flix-link flix-sr-only-focusable" href="focus-only-link">Focus Only Link</a></div>