Using Fixed Flexbox Layout

Prequisites

The guide assumes that the grid is fixed flexbox and uses 12 columns for each breakpoint. Learn more about configuring your grid here.

styles/assets/configuration/layout/_grid.scss

$grid-type: 'flex';
$grid-fluid: false;
$grid-layouts: (
  'xs': (
    'container': 100%,
    'columns': 12,
    'gap': 15px,
    'margin': 15px,
  ),
  'sm': (
    'container': 540px,
  ),
  'md': (
    'container': 720px,
  ),
  'lg': (
    'container': 960px,
  ),
  'xl': (
    'container': 1140px,
  ),
  'xxl': (
    'container': 1560px,
  ),
);

Introduction

The fixed flexbox layout extends the Bootstrap approach to create and position elements within the html or in our case the twig files. The only differences from the Boostrap approach is that you're able to customise the number of columns and other grid attributes per project. Also, the generated CSS will use CSS 3' calc function to calculate the width of the columns for better nested layouts support.

Defining container

The container class is used to create a container for the grid. It will explicitly extend styles generated by Loonar.

Components/ExampleComponent/index.twig

<section class="m-example-component">
  <div class="container">
  </div>
</section>

Defining rows

The row class is used to create a grid row within your container. A row is nothing else as a row in a spreadsheet document.

Components/ExampleComponent/index.twig

<section class="m-example-component">
  <div class="container">
    <div class="row">
    </div>
  </div>
</section>

Defining columns

The col-{n} class is tells Loonar that the element(s) within that class will take as many columns as specified after the - (hyphen) suffix. It is a good practice to always begin with col-12, thus do not skip classes when defining your grid.

Components/ExampleComponent/index.twig

<section class="m-example-component">
  <div class="container">
    <div class="row">
      <div class="col-12">
        Element 1
      </div>
      <div class="col-12">
        Element 2
      </div>
    </div>
  </div>
</section>

Changing layout per breakpoint

The col-{breakpoint-name}-{n} class is tells Loonar that the element(s) within that class will take as many columns as specified after the - (hyphen) suffix, but will only apply when certain breakpoint is reached.

Components/ExampleComponent/index.twig

<!-- ✅ DO! -->
<section class="m-example-component">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6">
        Element 1
      </div>
      <div class="col-12 col-md-6">
        Element 2
      </div>
    </div>
  </div>
</section>

<!-- ⛔️ DON'T go over the total number of columns! It'll break the grid! -->
<section class="m-example-component">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6">
        Element 1
      </div>
      <div class="col-12 col-md-7">
        Element 2
      </div>
    </div>
  </div>
</section>

Pushing layout elements

The offset-{n} and offset-{breakpoint-name}-{n} classes are used to push elements to the right by n number of columns. You'll be using this frequently to provide a space between elements.

Components/ExampleComponent/index.twig

<section class="m-example-component">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-5">
        Element 1
      </div>
      <div class="col-12 col-md-6 offset-md-1">
        Element 2
      </div>
    </div>
  </div>
</section>

Changing the order of layout elements

The order-{n} and order-{breakpoint-name}-{n} classes are used change the order in which the elements appear on the screen. It is useful, if when your grid is not mobile anymore, and Element 2 should be on top of Element 1.

Components/ExampleComponent/index.twig

<section class="m-example-component">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-5">
        Element 1
      </div>
      <div class="col-12 col-md-6 offset-md-1 order-md-1">
        Element 2
      </div>
    </div>
  </div>
</section>