Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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:

column-[number]--[breakpoint]
column-4--hand
column-auto--wall

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:

<div class="row">
    <div class="column-12--hand
                column-8--lap
                column-6--desk
                column-4--wall">
        <div class="box">Responsive</div>
    </div>
</div>

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.

<div class="row">
    <div class="column-auto--hand">
        <div class="box">auto</div>
    </div>
    <div class="column-auto--hand">
        <div class="box">auto</div>
    </div>
    <div class="column-auto--hand">
        <div class="box">auto</div>
    </div>
</div>

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

Alignment

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

    <div class="row start"></div>

    <div class="row center"></div>

    <div class="row end"></div>

as well as vertically:

    <div class="row top"></div>

    <div class="row middle"></div>

    <div class="row bottom"></div>

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.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/flexboxgrid.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

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:

<div class="row">
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
    <div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
</div>

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.

<div class="row">
    <div class="column-6--hand column-3--lap column-2--desk column-auto--wall"></div>
    <div class="column-6--hand column-3--lap column-4--desk column-auto--wall"></div>
    <div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
    <div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
    <div class="column-6--hand column-6--lap column-5--desk column-auto--wall"></div>
    <div class="column-6--hand column-6--lap column-7--desk column-12--wall"></div>
</div>

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.

(function(){
    var playerId = "envato";
    $.jribbble.getShotsByPlayerId(playerId, function(data){
        var shots = data.shots;
        var h = '';
        $(shots).each(function(i, shot){
            h += '<div class="column-6--hand column-4--lap column-3--desk column-2--wall">';
            h += '<a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '"></a>';
            h += '</div>';
        });
        $('.dribbble-shots').html(h);
    });
}());

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:

<!doctype html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/flexboxgrid.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">
        <h1>My Dribbble Shots</h1>
        <div class="row center dribbble-shots">
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

Note that we've also included a Google Font. 

Minimal Styling

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

body {
    font-family: 'Maven Pro', sans-serif;
    background-color: #f1faff;
}
h1 {
    font-weight: 400;
}
*[class^=column] {
    /*max-height: 100px;*/
    overflow: hidden;
    margin-bottom: 12px;
}
*[class^=column] img {
    width: 100%;
}

.container {
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
}

a {
    display: block;
    opacity: 0.9;
}

a:hover {
    opacity: 1;
}

Your final product should look similar to this:

Conclusion

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.

Advertisement