Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. HTML & CSS

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

Read Time:5 minsLanguages:

Building with a grid has become an everyday requirement for front-end developers. Not only do grids provide a sense of rhythm and consistency in design, but when a well-known grid structure is used it provides a simple collective design language for cross–team work.

Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed portfolio page. Let's get started!

Get Started With the Flexboxgrid CSS

The first step to getting started with Flexboxgrid is to grab the CSS. For development, use the unminified version.

Next, let's talk a bit about how Flexboxgrid works. The documentation is fully encompassed on the homepage at Flexboxgrid.com, but we'll go over the high points.

Responsive Columns

Flexboxgrid is built to support four primary breakpoints, arbitrarily named to avoid pixel-specific breakpoint maintenance problems. These breakpoints are handlapdesk, and wall, named after what are seen as hand, lap, desk and wall viewport widths (ie: where a device is likely to find itself). The column classes themselves are structured like this:

Flexboxgrid is a twelve column grid, and uses percentage-based columns in combination with the power of flexbox for a rock-solid grid.

Note: browser support for flexbox is still incomplete; Flexboxgrid should not be relied upon for projects that require full cross-browser implementation.

An Example Row

Taking directly from the documentation, markup for an example row using Flexboxgrid looks something like this:

Auto Columns

There is an "auto" column width available at each breakpoint. This does something different than a traditional width: auto rule. Flexbox will automatically fill the row appropriately with even-sized columns regardless of how many are placed in the row.

For instance, in the above example, the columns will take up one-third each.


There's a lot more that can be done with Flexboxgrid, including alignment of a row's columns horizontally:

as well as vertically:

Flexboxgrid also takes advantage of Flexbox's easy reordering techniques and dynamic spacing options, but for now we'll move forward with creating our Dribbble grid!

A Dribbble Grid

We'll start with a simple empty HTML document, including jQuery and Normalize. Feel free to use something like HTML5 Boilerplate with tools like Modernizr, but for this project we'll stay focused on the JavaScript, HTML, and CSS you need to write yourself.

From here, we'll build out the structure of the HTML we want to use, and then we'll hook everything up with the Dribbble API.

Our Grid Markup

First, let's say we want to set up a grid that starts at a minimum of two blocks per horizontal row, and moves up to six blocks per row at the wall breakpoint. Here is how we would accomplish that:

column-6--hand dictates that at the hand breakpoint (for devices held in the hand) each block will fill six of the twelve columns. We'll therefore be able to fit two Dribbble thumbnails on one row of our layout at this point.

At the lap breakpoint, column-4--lap dictates that each block will be four columns wide, hence we'll be able to fit three across one row.

More Dynamic Markup

Let's say we want to make the grid a bit more dynamic. Here's an example of a grid row using auto width and variable widths.

Note: in the wall breakpoint, we actually have a grid with five across; this wouldn't normally be possible with a twelve column grid system without custom classes added, as twelve isn't divisible by five. However, with Flexbox, the column widths can easily be calculated automatically.

Bringing in Jribbble

Now that we have a grid structure in place, let's write the code necessary to bring in our Dribbble content. We'll be using the jQuery plugin Jribbble. You can grab the source from GitHub. Jribbble will make it extremely easy to pull in shots from Dribbble.

Include Jribbble in a separate JS file, or in the top of your script.js. Below Jribbble, this code will bring in your desired Dribbble shots.

We first wrap our code in an immediately invoked function expression, which makes sure we protect our JavaScript scope. Next, we set our player ID, and subsequently we use Jribbble to bring in our shots. Once we have our shots, we build the html by iterating over each shot, and fill an element with the class dribbble-shots with that html.

Our HTML structure should look like this:

Note that we've also included a Google Font. 

Minimal Styling

Next, we'll provide some minimal styling in style.css:

Your final product should look similar to this:


Flexboxgrid offers a very flexible grid solution that allows for some very interesting control over the spacing, sizing, display, and even the ordering of elements. When combined with compelling content, Flexboxgrid allows you to easily do what was previously much more complicated with your grid.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.