Flex Grid

Frontbx uses a powerful 12 column grid system for building layouts to fit any screen or size.

• Introduction
• Responsive breakpoints
• Rows
  • Responsive rows
  • Fluid Rows
• Columns
  • Row columns
  • Child columns
  • Using both
• Responsive columns
  • Responsive row columns
  • Responsive child columns
  • Responsive parent child
• Column Gaps
  • Responsive column gaps
• Row gaps
  • Responsive row gaps
• Gutters
  • Responsive Gutters
• Poles
  • Responsive poles
• Alignment
  • Responsive alignment
• Order
  • Responsive order
• CSS customization

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Before CSS flex was introduced the common way of doing things was through a 12 column grid system.

However with flex, the way grids and columns are structured is different. There are pros and cons to both, but once you become accustomed to using flex it is essentially just a another way to skin a cat.

One issue with flex and a grid system is that it isn't really designed for mobile-first (semantically speaking). i.e it defaults to packing in as many columns that natively fit into a space - which normally isn't what you want on mobile-first.

In Frontbx, the Flex Grid is designed to mobile-first. Meaning all children of a row will default to full-width unless overridden at a breakpoint. This makes it far easier to design grid layouts with less markup and less styling.

Here is a breakdown of how it works:

• Use rows (.flex-row) to wrap columns.
• .col should be applied to native elements or wrapped if you don't want their styling effected.
• Apply row spacing, gutters and breakpoint changes to the parent flex-row using modifier classes.
• Grid columns are created by specifying the number of columns you want on the parent flex-row.

Responsive breakpoints

Because Frontbx is mobile first, all screen-size specific grid classes will be applied to the breakpoint and above. For example .col-md-6 will apply to medium screen sizes and above, but not below. The grid system includes all the necessary screen-size specific classes.

The grid system uses both CSS Variables and Sass variables so customization can be made both pre and post compilation.

Customization of breakpoints via Sass can be made by overriding the config found in the scss/_config.scss file:

scss/_config.scss

$breakpoint-xs: 0 !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;

$breakpoints:
(
    'xs': $breakpoint-xs,
    'sm': $breakpoint-sm,
    'md': $breakpoint-md,
    'lg': $breakpoint-lg,
    'xl': $breakpoint-xl,

) !default;

Or via CSS variables on the :root

:root
{
    --fbx-breakpoint-xs: 0;
    --fbx-breakpoint-sm: 576px;
    --fbx-breakpoint-md: 768px;
    --fbx-breakpoint-lg: 992px;
    --fbx-breakpoint-xl: 1200px;
}

Rows

Rows are used to as the main wrapper element to contain columns. They will span full-width unless they're in a nested grid.

<div class="flex-row"></div>

Responsive rows

Frontbx's grid system comes with a mobile-first fully responsive set of helpers to display rows according to screen size. You can use these helpers as modifiers on .flex-row to hide or show the row at different breakpoints.

The table below outlines the available options.

The example below shows two rows. The first that displays on mobile (<md breakpoint) and a second that displays on desktop (>md breakpoint).

<div class="flex-row xs-flex sm-flex">
...
</div>
<div class="flex-row md-flex lg-flex xl-flex">
...
</div>

Fluid rows

.flex-row-fluid acts how you would expect native flex to behave. It distributes content evenly allowing each .col to shrink or grow as necessary to column-demo available space.

With .flex-row-fluid you can set an individual .col width too - other columns automatically will adjust as necessary.

<div class="flex-row-fluid">
    <div class="col"></div>
    <div class="col col-6"></div>
    <div class="col"></div>
</div>

Columns

Frontbx's flex grid system is incredibly flexible, so there are multiple ways to specify column widths depending on your needs.

1. On the parent .flex-row
   Suitable when your columns are all evenly sized. Individual child .col width can be specified, while siblings retain specified width.
2. On child parent .col elements
   Suitable when your columns need specific sizing and you don't want them to grow or shrink
3. Combination
   Suitable when you have multiple columns at one size but want a few exceptions.
4. Fluid .flex-row-fluid
   Defaults to evenly distributing sizes and spacing. Can be used with any combination of the above.

1. Row Columns

Setting column width via the .flex-row is easy to setup via modifier classes. Simply add .flex-cols-* with your desired column sizings:

This example shows setting even column widths via the parent .flex-row:

<div class="flex-row">
    <div class="col"></div>
</div>
<div class="flex-row flex-cols-3">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

2. Child Columns

The core base class of Frontbx layouts is the .col. The table below outlines the classes and formats made available when implementing layouts using child columns.

Here we set the width via the child .col elements:

<div class="flex-row">
    <div class="col col-12"></div>
</div>
<div class="flex-row">
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
</div>

3. Using both

This design pattern uses a combination of both the parent .flex-row and it's children. The base column-width is defined on the parent .flex-row, with any individual adjustments made on individual columns. Remaining columns will remain their size defined by the parent:

<div class="flex-row flex-cols-3">
    <div class="col col-6"></div>
    <div class="col col-6"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="flex-row flex-cols-6">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col col-4"></div>
    <div class="col col-4"></div>
    <div class="col col-4"></div>
</div>

Responsive Columns

The flex grid system comes with a mobile-first fully responsive set of helpers to size column layouts according to screen size.

Because flex by default spaces children evenly, Frontbx has made all flex columns full-width at mobile size. You then overwrite their widths either individually or via the parent .flex-row at breakpoints:

Responsive row columns

Setting responsive column width via the .flex-row is easy to setup via modifier classes. Simply add .flex-cols-[breakpoint]-[size] with your desired column sizings.

The table below outlines the available options.

This example shows setting even column widths at .col-6 on mobile and .col-3' at breakpoint lg and above via parent .flex-row:

<div class="flex-row flex-cols-3 flex-cols-lg-6">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Responsive child columns

Setting responsive column width via the child .col elements is easy to setup via modifier classes. Simply add .col-[breakpoint]-[size] with your desired column sizings.

This example shows setting even column widths at .col-6 on mobile and .col-4' at breakpoint md and above via child .col elements:

<div class="flex-row">
    <div class="col-6 col-md-4"></div>
    <div class="col-6 col-md-4"></div>
    <div class="col-6 col-md-4"></div>
    <div class="col-6 col-md-12"></div>
</div>

Responsive parent child

This example shows setting even column widths at .col-6 on mobile and .col-4' at breakpoint lg and above via parent .flex-row with one column set to .col-12 at breakpoint lg and above:

<div class="flex-row flex-cols-6 flex-cols-lg-4">
    <div class="col col-lg-12"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Column Gaps

Column gaps define the spacing between columns in a row and can be set via the parent .flex-row with modifier classes. By default there are no column gaps in a .flex-row unless specified.

<div class="flex-row flex-cols-6 col-gaps-lg">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Responsive column gaps

Frontbx's grid system comes with mobile-first fully responsive set of helpers to size gutters according to screen size. The table below outlines the available options.

The example below shows column gaps set to xs on mobile and lg on breakpoint >=md:

<div class="flex-row flex-cols-6 col-gaps-xs">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Row Gaps

Row gaps define the spacing between rows. With Frontbx' flex grid, you set this via the parent .flex-row.

<div class="lex-row flex-cols-6 row-gaps-md">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Responsive row gaps

Frontbx's grid system comes with mobile-first fully responsive set of helpers to size row gaps according to screen size. The table below outlines the available options.

The example below shows row gaps set to xs on mobile and lg on breakpoint >=md:

<div class="lex-row flex-cols-6 row-gaps-md">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Gutters

Gutters can be used to push columns away from each other.

<div class="flex-row">
    <div class="col col-6 gutter-xs gutter-r"></div>
    <div class="col col-6 gutter-xs gutter-l"></div>
</div>

<div class="flex-row align-cols-center-x">
    <div class="col col-md-4 gutter-xs gutter-r"></div>
    <div class="col col-md-4 gutter-xs gutter-l"></div>
</div>
<div class="flex-row">
    <div class="col col-md-4 auto-gutter gutter-r"></div>
    <div class="col col-md-4"></div>
</div>
<div class="flex-row">
    <div class="col col-md-4 auto-gutter"></div>
    <div class="col col-md-4 auto-gutter"></div>
</div>

Responsive gutters

Frontbx's grid system comes with mobile-first fully responsive set of helpers to size gutters according to screen size. The table below outlines the available options.

<div class="flex-row">
    <div class="col col-6 gutter-xs gutter-r gutter-md-lg gutter-lg-r">
        ...
    </div>
    <div class="col col-6 gutter-xs gutter-l gutter-md-lg gutter-lg-l">
        ...
    </div>
</div>

Poles

Poles are essentially vertical gutters. .pole-n applies a padding-top value while .pole-s applies a padding-bottom value.

Poles can be used to space consecutive .flex-row element or .col elements that serve as containers.

The table below outlines the classes and formats made available for poles.

<div class="flex-row ">
    <div class="col col-6 pole-xs"></div>
    <div class="col col-6 pole-xs"></div>
    <div class="col col-12"></div>
</div>

Responsive poles

Frontbx's grid system comes with mobile-first fully responsive set of helpers to size gutters according to screen size. The table below outlines the available options.

In the example below, the first col the poles are sized differently and different breakpoints:

<div class="flex-row">
    <div class="col col-12 pole-xxs pole-lg-xs"></div>
    <div class="col col-12 pole-xxs pole-lg-xs"></div>
</div>

Alignment

Alignment can be thought of in two ways.

1. The positioning of available free-space within a grid.
2. The positioning of items within a grid.

With Frontbx's flex grid, we define alignment by option two as this just makes more sense and is simpler. With Frontbx's flex grid, you set this via the parent .flex-row using the .align-cols-[position] modifier classes.

The table below outlines the available alignment options:

Axis alignments

Spacing alignments

<div class="flex-row flex-cols-3 align-cols-center-x">
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="flex-row flex-cols-3 align-cols-center-y">
    <div class="col"></div>
    <div class="col"></div>
</div>

Responsive Alignment

All alignment classes are available through breakpoint specific targeting with .align-cols-[breakpoint]-[position] modifier classes. The table below outlines the available alignment options:

* For the sake of brevity, breakponts are xs sm md lg amd xl

Axis alignments

Spacing alignments

<div class="flex-row flex-cols-2 align-cols-md-center-x">
    <div class="col"></div>
    <div class="col"></div>
</div>

<div class="flex-row flex-cols-6 align-cols-md-center-y">
    <div class="col"></div>
    <div class="col"></div>
</div>

Order

Use .order-[num] classes to re-arrange content within a grid.

<div class="flex-row flex-cols-4 col-gaps-xs row-gaps-xs">
        <div class="col"></div>
        <div class="col order-5"></div>
        <div class="col order-1"></div>
    </div>

Responsive order

Responsive order can be used through .order-[breakpoint]-[num] classes to re-arrange content at breakpoints and up.

<div class="flex-row flex-cols-4 col-gaps-xs row-gaps-xs">
        <div class="col"></div>
        <div class="col order-md-5"></div>
        <div class="col order-md-1"></div>
    </div>

CSS Customization

The grid system uses a combination of both local CSS variables and Sass variables for enhanced component customization and styling. The base values are used by the UI to create all the sizing. Values for the CSS variables are set via Sass, so pre-compilation customization is still supported too.

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss

$breakpoints:
(
    'xs':                       $breakpoint-xs,
    'sm':                       $breakpoint-sm,
    'md':                       $breakpoint-md,
    'lg':                       $breakpoint-lg,
    'xl':                       $breakpoint-xl,
) !default;

// Grid gutters
$grid-gutters:
(
    'xxs':                      0.5rem,
    'xs':                       1rem,
    'sm':                       2.0rem,
    'md':                       2.5rem,
    'lg':                       3.0rem,
    'xl':                       3.5rem,
) !default;

// Grid poles
$grid-poles:
(
    'xxs':                      0.5rem,
    'xs':                       1rem,
    'sm':                       3.0rem,
    'md':                       6.0rem,
    'lg':                       8.0rem,
    'xl':                       10.0rem,
) !default;

scss/grid/_base.scss

/* Row */
.flex-row,
.flex-row-fluid
{
    --fbx-flex-wrap: wrap;
    --fbx-flex-direction: row;
    --fbx-flex-col-gaps: 0px;
    --fbx-flex-row-gaps: 0px;
}

/* Columns */
.col
{
    --fbx-col-flex: 0 0 100%;
    --fbx-col-width: 100%;
    --fbx-gutter-l: initial;
    --fbx-gutter-r: initial;
    --fbx-pole-n: initial;
    --fbx-pole-s: initial;
}