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.

Buttons

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

Primary

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.

Indicators

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

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.

Navigation

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.

    

      
      

        
     
      

        
First Option
        

          Second Option
          

            

              
First Dropdown Option
              
Second Dropdown Option
            
          
        
      
    

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

gumby-fixed="top"

to the navbar div.

Tooltips

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.

Conclusion

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.