HTML & CSS
Article
By George Martsoukos

How 3 Modern Tools are Using Flexbox Grids

By George Martsoukos
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

There are plenty of valuable resources (articles, tutorials, and online tools) discussing the flexbox layout module. Flexbox has gained so much traction that more and more grids and frameworks are supporting this powerful layout feature.

In this article, we’ll examine how 3 tools are incorporating flexbox-based grids and I’ll show you some demos that will illustrate the features.

Note: This article expects that you have some knowledge of flexbox.

Flexbox Grid

Flexbox Grid is a grid system built on top of flexbox. If you’re familiar with Bootstrap, this grid uses the same predefined grid classes and media query breakpoints. The following table summarizes how the grid works:

Screens Viewport Size Container Width Class Prefix
Extra small screens <30em (768px) auto .col-xs-*
Small screens ≥48em (768px) 46rem (736px) .col-sm-*
Medium screens ≥62em (992px) 61rem (976px) .col-md-*
Large screens ≥75em (1200px) 71rem (1136px) .col-lg-*

To get started with Flexbox Grid, you have to install and include the required CSS file (i.e. flexboxgrid.css) in your projects. More information about this process is available on the project’s GitHub page.

Let’s now create a responsive navigation menu based on this grid. Here’s what we’re going to build:

Flexbox grid example

First, we define the ul element as a flex container by assigning the row class to it. Then we use the col-xs-2 class to specify the width of the flex items. This class ensures that the list items will have a maximum width equal to 16.667% for all devices. Finally, we horizontally and vertically center our items by adding the center-xs and middle-xs classes to the flex wrapper.

Below is the required HTML:

<nav>
  <ul class="row center-xs middle-xs">
    <li class="col-xs-2">
      <a href="#">Home</a>
    </li>
    <li class="col-xs-2">
      <a href="#">About</a>
    </li>
    <!-- more list items here... -->
  </ul>
</nav>

And here are some CSS styles to enhance the appearance of our menu:

.row {
  height: 80px;
}

ul a:before  { 
  font-family: FontAwesome;
  font-size: 22px;
}

ul li:nth-child(1) a:before {
  content: '\f015';
}

@media screen and (max-width: 800px) {
  ul a {
    font-size: 0;
  }

  ul a:before {
    font-size: 32px;
  }
}

Note: To keep things simple, I’ve only included some of the rules from the corresponding CSS file.

See the Pen A flexible menu based on the Flexbox Grid framework. by SitePoint (@SitePoint) on CodePen.

At this point we have a new requirement. We have to add our logo to the main menu. The following screenshot shows what we want to create:

Flexbox grid example with logo

To make that work, we’ll add a bit of extra markup.

Here’s the new version of our HTML:

<div class="row center-xs middle-xs">
  <div class="col-sm-2 col-xs-4">
    <h1>
      <a href="#">My Logo</a>
    </h1>
  </div>
  <div class="col-sm-8 col-sm-offset-2 col-xs-12">
    <nav>
      <ul>
        <li class="col-xs">
          <a href="#">Home</a>
        </li>
        <!-- more list items here... -->
      </ul>
    </nav>
  </div>
</div><!-- end of .row ... -->

Let’s explain the code above:

  • We define a div element as the outer flex wrapper of our logo and menu. We assign different grid classes to the flex items depending on the viewport size. For example, on small devices and up (≥768px) the logo will have a maximum width equal to 16.667%, while the menu will occupy 66.667% of the parent’s width.
  • We choose to move our menu 16.667% to the right by giving it a class of col-sm-offset-2.
  • Finally, notice the col-xs class we set on our list items. If you remember the previous example, we had used the col-xs-2 class. In this case though, we apply the col-xs class because we give items the option to grow and cover the entire parent’s width.

See the Pen A flexible menu, with logo, based on the Flexbox Grid framework. by SitePoint (@SitePoint) on CodePen.

UIkit Framework

UIkit is a modern front-end framework similar to Bootstrap and Foundation. It comes with a number of different components, which you might find useful depending on your needs. For the purposes of this article, we’ll combine the Flex, Slideshow, and Dotnav components, so as to build a responsive slideshow.

As usual, to use this plugin in your projects, make sure to download and install the required files. Also keep in mind that the additional components aren’t included in the core framework, so if you want to use any of those components, you have to add them to your projects as well.

The image below shows what our slideshow will look like:

UIkit flexbox example

To build it, we’ll take advantage of the basic code for the Slideshow component that UIkit provides us:

<div data-uk-slideshow>
  <ul class="uk-slideshow uk-slideshow-fullscreen">
    <li>
      <img src="https://download.unsplash.com/photo-1414446483597-8d8f792bfe39">
      <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">
        <div class="caption"> 
          <h3>Example 1</h3>
          <!-- more content here -->
        </div>
      </div>
    </li>
    <!-- more list items here --->
  </ul><!-- end of slideshows list --->
  <ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center">
    <li data-uk-slideshow-item="0">
      <a href="#"></a>
    </li>
    <li data-uk-slideshow-item="1">
      <a href="#"></a>
    </li>
    <li data-uk-slideshow-item="2">
      <a href="#"></a>
    </li>
    <li data-uk-slideshow-item="3">
      <a href="#"></a>
    </li>
  </ul><!-- end of dotnavs list --->
</div>

Notice the uk-flex-center class that we applied to the second ul element. This horizontally centers the slideshow navigation. In addition, we can modify the flex behavior by removing this class and adding another one (e.g. the uk-flex-column class).

See the Pen UIkit slideshow with flexbox by SitePoint (@SitePoint) on CodePen.

At this point, we’ll use the power of flexbox to modify the previous version of our slideshow. In fact, we’ll change the position of the div.caption element. As you can see in the screenshot below, the goal is to horizontally and vertically center it:

UIkit flexbox example 2

To achieve this, all we have to do is assign some additional helper classes to the immediate parent (flex wrapper) of the div.caption element (flex item). Here’s the HTML that we have to update:

<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade 
            uk-flex uk-flex-center uk-flex-middle">
  <div class="caption">
    <h3>UIkit Framework</h3>
    <!-- more content here -->
  </div>
</div>

See the Pen UIkit slideshow with flexbox and alternate caption layout. by SitePoint (@SitePoint) on CodePen.

--ADVERTISEMENT--

sass-flex-mixin

Brian Franco has developed a set of useful Sass mixins that we can use to build flexible layouts. In order to work with them, you have to grab a copy of the required SCSS file (the flexbox.scss partial) from the GitHub repo then incorporate it in your SCSS project.

At this point, let’s see those mixins in action by trying to replicate the layout of the following screenshot:

Flexbox mixin example

To do this, we start by setting the section element as our flex container and we lay out the flex items vertically (as columns). Next, each of the columns receives a different value for the justify-content property. The last step is to take advantage of CSS pseudo-elements in order to create some extra “flex items”.

Here’s our HTML:

<section>
  <div class="box box1" data-content="Box2">
    <h3>Box1</h3>
  </div>
  <div class="box box2" data-content="Box4">
    <h3>Box3</h3>
  </div>
  <div class="box box3">
    <h3>Box5</h3>
  </div>
</section>

And the SCSS styles:

section {
  @include flexbox;
  @include flex-direction(column);

  .box {
    width: 20%;
    height: 100px;
    position: relative;

    &:after {
      display: block;
      position: absolute;
      top: 50%;
      right: -100%;
      width: 100%;
      height: 100%;
    }
  }

  .box1 { 
    @include align-self(flex-start);

    &:after {
      content: attr(data-content);
    }
  }

  .box2 {  
    @include align-self(center);

    &:after {
      content: attr(data-content);
    }
  }

  .box3 { 
    @include align-self(flex-end);
  }

  @media screen and (max-width: 500px) {
    .box {
      width: 100%;
    }

    &:after {
      top: 100%;
      right: 0;
    }
  }

}

Note: To keep things simple, I’ve only included some of the rules from the corresponding SCSS file and I’ve omitted the compiled CSS.

See the Pen A flexbox layout with Brian Franco’s sass-flex-mixin by SitePoint (@SitePoint) on CodePen.

More Flexy Grids

Beyond the three tools that we analyzed above, there are other flexbox-based grids and frameworks, some of which are shown below:

Conclusion

I hope this summary has helped you see how some modern tools are using flexbox. As a next step, I recommend experimenting with the following exercises:

  • Incorporate a flexbox grid into your favorite framework, if it doesn’t support the flexbox layout method.
  • Make the examples presented above more fancy by adding CSS transitions, CSS animations or by modifying the flex behavior.

If you’ve used any modern frameworks that incorporate flexbox, let us know in the comments.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?