Grid

In order to create a grid start with creating a flix-grid wrapper class for you columns. Grid column classes follow the flix-col-{$columns}-{$breakpoint} naming pattern.

Important: Ensure that flix-grid is not a direct child of body and wrapped into flix-grid-container element in this case, this is required to guarantee proper behavior of negative margins.

flix-grid-container element is not required for grid to work but very handy if you need to sort out issues with negative margins.

Normal responsive grid

<div class="flix-grid">
    <div class="flix-col-6">
        <div class="flix-box flix-space-2-bottom">
            flix-col-6
        </div>
    </div>
    <div class="flix-col-6">
        <div class="flix-box flix-space-2-bottom">
            flix-col-6
        </div>
    </div>
</div>

Grid with gutter size 4

The grid currently only supports two gutter sizes: 2 and 4.

The numbers are relative to the spacing modifiers, so for base spacing 6 we have gutter values of 12px and 24px, respectively.

<div class="flix-grid flix-grid--gutter-4">
    <div class="flix-col-6">
        <div class="flix-box flix-space-2-bottom">
            flix-col-6
        </div>
    </div>
    <div class="flix-col-6">
        <div class="flix-box flix-space-2-bottom">
            flix-col-6
        </div>
    </div>
</div>

Grid wrapping behaviour

Breakpoints are defined in a following way:

• zero (this one is omitted since it's valid for all the sizes, so basically flix-col-1 equals to flix-col-1-zero );
• xs: 390px;
• sm: 600px;
• md: 768px;
• lg: 1024px;
• xl: 1200px;

<div class="flix-grid">
  <div class="flix-col-6 flix-col-4-sm">
    <div class="flix-box flix-space-2-bottom">
      flix-col-6<br/>
      flix-col-4-sm
    </div>
  </div>
  <div class="flix-col-6 flix-col-4-sm">
    <div class="flix-box flix-space-2-bottom">
      flix-col-6<br/>
      flix-col-4-sm
    </div>
  </div>
  <div class="flix-col-6 flix-col-4-sm">
    <div class="flix-box flix-space-2-bottom">
      flix-col-6<br/>
      flix-col-4-sm
    </div>
  </div>
  <div class="flix-col-6">
    <div class="flix-box flix-space-2-bottom">
      flix-col-6
    </div>
  </div>
  <div class="flix-col-12 flix-col-6-sm">
    <div class="flix-box flix-space-2-bottom">
      flix-col-12 flix-col-6-sm
    </div>
  </div>
</div>

Flexible grid

If you want a flexible grid so the columns allocate the space of the container automatically, just use flix-col classes for your columns.

<div class="flix-grid">
    <div class="flix-col">
        <div class="flix-box flix-space-2-bottom">
            flix-col
        </div>
    </div>
    <div class="flix-col">
        <div class="flix-box flix-space-2-bottom">
            flix-col
        </div>
    </div>
</div>
<h4 class="flix-h4">Push classes</h4>
<div class="flix-grid">
    <div class="flix-push-6 flix-col-6">
        <div class="flix-box flix-space-2-bottom">
            flix-push-6 flix-col-6
        </div>
    </div>
</div>

Inline columns

Sometimes you want the column to adapt to the width of its children, for example if you want to combine icon and a text somewhere. In order to disable column element automatic sizing you should apply flix-col--inline modifier to it.

Push classes

Similar to columns, push utility classes follow the flix-push-{$columns}-{$breakpoint} naming pattern.

Alignment utility classes

We offer a simple set of flexbox base alignment classes that proof themselves useful in many cases.

You can use the align--{direction} modifier to control vertical alignment of columns, this matches flexbox's align-items rule:

• flix-grid--align-top aligns grid columns to the bottom;
• flix-grid--align-bottom aligns grid columns to the top;
• flix-grid--align-center aligns grid columns to the center;

You can use the justify--{direction} modifier to control horizontal alignment of columns (distribution), this matches flexbox's justify-content rule:

• flix-grid--justify-left distributes columns from left to right;
• flix-grid--justify-right distributes columns from right to left;
• flix-grid--justify-center centers the columns;
• flix-grid--justify-space-between distributes columns from center, basically spreading them, to the sides of the container;

SASS mixins

If you are using the SASS version of Honeycomb library in your project there are some useful mixins that can make your life better. Those allow you to avoid additional grid related HTML markup in your components and pages.

All mixins accept a parameter {number} $gutter-size that can be either 2 or 4. If anything other value is passed, the default gutter (2) will be used.

grid-container() mixin

grid-container() mixin ensures that the grid negative margins are reset. Use this whenever you encounter problems with the flix-grid width.

grid-row() mixin

grid-row() mixin adds grid row behaviour to your element.

grid-col() mixin

grid-col() mixin should be used for a direct children of the grid row element and gives it behaviour of the grid column.

Besides $gutter-size, This mixin accepts the $size parameter besides the $gutter-size.

• @param {number} $size - column size in columns from 1 to 12

Suppose you want to create a general page layout for your page that includes sidebar and a content are. Sidebar has 2 columns in size, content area occupies 10 columns, here is how your .scss may look like in this case:

.site-body {
  @include grid-container();
}

.page {
  @include grid-row();

  &__sidebar {
    @include grid-col(2);
  }

  &__content {
      @include grid-col(10);
  }
}

Note the usage of grid-container() mixin, this is required for the root element of your page.

You can make it even more complex with Honeycomb breakpoint mixin, let's say we want column to stack on each other on smaller screens:

.site-body {
  @include grid-container();
}

.page {
  @include grid-row();

  &__sidebar {
    @include grid-col(12);
    padding-bottom: cssvar(spacing-2);

    @include on-bp(md) {
      @include grid-col(2);
    }
  }

  &__content {
    @include grid-col(12);

    @include on-bp(md) {
      @include grid-col(10);
    }
  }
}

Using both parameters at the same time require you to pass the parameter name or know the exact order of the params declaration, e.g.:

&__sidebar {
  @include grid-col($size: 12, $gutter-size: 4);
  padding-bottom: cssvar(spacing-2);

  @include on-bp(md) {
    @include grid-col($size: 2, $gutter-size: 4);
  }
}