Basic principles

The Flexible box layout mode, or flexbox, introduces some very interesting features that we've used in Ink. Most of them are relative to the grid system but as you probably know, or will find out, that means they affect many other components in the framework.

These new features include:

• Control over an elements vertical and horizontal alignment.
• Control over the content vertical and horizontal alignment.
• Reordering elements in your layouts independently of their order in the markup.
• Reversing element flow, i.e. back to front and bottom to top.
• Automatic width distribution i.e. grids without having to declare widths.

On this page we'll cover all the places where flexbox feature enhancement exists and how to take advantage of them.

Be aware that the Flexible box layout mode is still at the Candidate Recommendation stage of the specification and even though the W3C encourages browser makers to implement it, it is subject to change before the final version of the specification.

How to use

Ink-flex.css is the file that contains the new flexbox features, so the first step is to link it on your document head:

Code

<!-- pretty version for development -->
<link rel="stylesheet" href="https://cdn.ink.sapo.pt/3.1.10/css/ink-flex.css">
<!-- minified version for production -->
<link rel="stylesheet" href="https://cdn.ink.sapo.pt/3.1.10/css/ink-flex.min.css">

In the example above we're calling the css from our cdn but if you want to host the files yourself, just put them wherever you like and set the propper url.

ink-flex.css or ink-flex.min.css don't contain css for browsers without flexbox support, so if you still want or need to have a fallback for older browsers we have a ink-legacy.css file that contains all the non-flexbox code where all the rules have html.no-flexbox, html.no-flexboxlegacy as part of the selector:

Code

...
html.no-flexbox .ink-grid,
html.no-flexboxlegacy .ink-grid {
  width: auto;
  max-width: 1440px;
  margin: 0 auto;
}
...

We can now use the included modernizr.js to detect if the browser does not support flexbox and load the lecagy stylesheet if needed:

Code

    ...
    <script type="text/javascript" src="https://cdn.ink.sapo.pt/3.1.10/js/modernizr.js"></script>
    <script type="text/javascript">
        Modernizr.load({
          test: Modernizr.flexbox,
          nope : 'https://cdn.ink.sapo.pt/3.1.10/css/ink-legacy.min.css',
        });
    </script>
  </body>
</html>

Include the code above right before closing body tag. Modernizr will detect if the browser supports flexbox, and if it doesn't it will write the no-flexbox and / or no-flexboxlegacy css classes on the html element and load the legacy css file.

This approach has a major drawback. Older browsers will have to load an additional css file, but we prefer to "penalize" browsers that don't support flexbox rather than the ones that do. There are other ways to implement this, but they have their own drawbacks, so we'll let you choose the one that fits your needs the best.

• : This class must be used for the flexbox features to work.
• : This class has breakpoint dependent variants, e.g. large-class-name.
• : This class defines flexbox features.

Flex grid

• Css classes:
• ink-flex
• push-top
• push-middle
• push-bottom
• push-left
• push-center
• push-right
• order-#
• reverse
• vertical

Aligning grid columns

If you're not familiar with our grid system, we advise you to read its documentation before going ahead.

When using our flexbox style sheet the column-group element is, by default, a flex container so, you don't need to use the ink-flex css class, in this case:

Code

<div class="ink-grid">
  <div class="column-group push-center">
    <div class="all-50">
      50%
    </div>
  </div>
</div>

Unlike the "default" grid system, and because of the way flexbox works, positioning classes are applied to the column-group, rather that the columns themselves.

Demo

You can also define breakpoint dependent grid column alignment:

Code

<div class="ink-grid">
  <div class="column-group xlarge-push-left large-push-center medium-push-right small-push-center tiny-push-left">
    <div class="all-50">
      50%
    </div>
  </div>
</div>

Demo

You can combine horizontal and vertical alignment classes to center a grid column in both the x and y axis:

Code

<div class="ink-grid">
  <div class="column-group push-center push-middle">
    <div class="all-50">
      50%
    </div>
  </div>
</div>

Demo

Reordering grid columns

Flexbox allows us to redefine the order that grid columns are displayed, regardless of their order in the markup.

Code

<div class="ink-grid">
  <div class="column-group horizontal-gutters">
    <div class="all-33 order-3">
      column 1
    </div>
    <div class="all-33 order-1">
      column 2
    </div>
    <div class="all-33 order-2">
      column 3
    </div>
  </div>
</div>

The only drawback is that if you want to reorder grid columns, you'll have to set the order for all within the column-group. This is so because setting the order property takes the element out of the normal flexbox flow so, setting the order for just one would result in having that element to be the first and the rest would just be show by their order in the markup.

Demo

Once again you can reorder items based, on the breakpoint:

Code

<div class="ink-grid">
  <div class="column-group horizontal-gutters">
    <div class="all-33 tiny-order-3 small-order-2 medium-order-1 large-1 xlarge-order-3">
      <div class="column">column 1</div>
    </div>
    <div class="all-33 tiny-order-1 small-order-3 medium-order-3 large-2 xlarge-order-1">
      <div class="column">column 2</div>
    </div>
    <div class="all-33 tiny-order-2 small-order-1 medium-order-2 large-3 xlarge-order-2">
      <div class="column">column 3</div>
    </div>
  </div>
</div>

Demo

Reversing order and changing element flow

With flex box you can reverse the order of elements inside a column-group without having to specify the order for all columns. Also you can set if elements flow along either the x or y axis of the column-group. In the example below, adding the reverse css class to the column-group will reverse the order of its column along the x axis:

Code

<div class="ink-grid">
  <div class="column-group horizontal-gutters reverse">
    <div class="all-33">
      <div class="column">column 1</div>
    </div>
    <div class="all-33">
      <div class="column">column 2</div>
    </div>
    <div class="all-33">
      <div class="column">column 3</div>
    </div>
  </div>
</div>

Demo

Adding the vertical css class to the column-group will make its child columns flow along the y axis. Basically each column will be in a single "line" regardless of their width. Combined with the reverse css class elements will flow vertically in reverse order:

<div class="ink-grid">
  <div class="column-group vertical-gutters vertical">
    <div class="all-100">
      <div class="column">column 1</div>
    </div>
    <div class="all-100">
      <div class="column">column 2</div>
    </div>
    <div class="all-100">
      <div class="column">column 3</div>
    </div>
  </div>
</div>

<div class="ink-grid">
  <div class="column-group vertical-gutters vertical reverse">
    <div class="all-100">
      <div class="column">column 1</div>
    </div>
    <div class="all-100">
      <div class="column">column 2</div>
    </div>
    <div class="all-100">
      <div class="column">column 3</div>
    </div>
  </div>
</div>