Introducing your new favorite framework: Gumby

As web developers, it’s usual to have a favorite framework that we use for virtually every project. There are certainly plenty to choose from. Today I’d like to try and persuade you to switch to one of mine.

Gumby is a flexible framework developed with Sass that comes with a whole bunch of extensions and JavaScript helpers. It’s been growing in popularity for some time and for good reasons.

The grid

The first thing to check out when considering a framework is the grid system being used by the framework.

This is usually a deal breaker if it doesn’t suit our design, but Gumby has a trick up its sleeve: when it comes to Gumby, we have a standard 12 column responsive grid, however Gumby also enables a hybrid grid; this means we can switch to a different grid whenever we choose to. So for example, to switch from the default 12, to a 16 column grid mid-page, we’d simply use:

12 columns

14 columns

Pushing and pulling

We also have the flexibility to move columns around. We can push columns to the right, or pull them to the left.

When we push columns to the right, we create extra space. For example, if you created a grid with two columns, one 6 units wide and one 4 units wide, you could ensure the second column was flush up against the right hand side of the page by pushing the column 2 units with the class push_two.

6 columns

4 columns

As well as pushing columns, we can pull them. Pulling a column is used in combination with pushing to rearrange the order of columns.

Let’s imagine that instead of our four-unit column being flush to the right, we want to reverse the order and have it flush to the left. Firstly, we’ll need to push our first column by 6 units, and then pull the second column by 6, leaving a gap of 2:

6 columns

4 columns

The UI

Of course, a nice UI is always a big plus point when we’re working with a framework, especially at the prototyping stage.

Gumby gives us a good selection of UI components to choose from.


Let’s start off by looking at Gumby’s buttons. To create a simple button we’ll type:

This will generate a medium sized button, blue by default, that uses the flat style most designers will prefer to start with.

If we choose to, we can also add a number of different classes that will create different rounded styles, they are: oval, rounded, pill left, and pill right.


We also have some badges, labels and alerts we can use that come with same set of colors to fit right into our design:

  • 1
  • Warning
  • You missed something


Forms are always a tricky aspect of a site to style. Happily, Gumby really excells at styling forms. For example, to create a Gumby styled input, you wrap the input in a div with the class field:

You can also choose from different sizes of input such as xnarrow, narrow, wide, xwide, and xxwide, to adjust the input accordingly.


Effective navigation is UX 101, and again Gumby comes up trumps with a flexible and responsive solution.

Whilst it’s not the simplest code you’ll ever see, it’s far from the most complex and the added layer of difficulty pays off with the extra functionality.

The nav offers us a trigger anchor tag that will be activated when reaching mobile and when clicked will open the unordered list that contains our entire navigation so that it works great on mobile without us having to do any JavaScript whatsoever.

We can also choose between styles, by adding the pretty class to the navbar div we get a different style with more gradients and effects. We can also pin our navigation to the top with ease by just adding the attribute


to the navbar div.


There are plenty of cases where tooltips are necessary for usability, not everything is understood at first glance so adding these is a major help and Gumby makes adding these tooltips to an element a really simple process:

These tooltips are built using only CSS and by default and they come with the pretty Gumby style instead of the metro one.


Believe or not this is just the beginning of the Gumby framework , this framework is without a doubt a very complete one, in this lesson we talked about the UI Kit and Grid but there is still much more to go around and the really interesting parts haven’t even started , in the next couple of tutorials we’ll take the process further and look at more of what Gumby has to offer.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress