Introducing Gumby 2, the web’s most powerful responsive framework.

Author Avatar
Written by Adam Chambers,
• 10 min read

Now more flexible than ever.

Well, its finally here! We are proud to announce today that we are officially unleashing Gumby 2 to the world. Gumby 2 is the most powerful front-end responsive framework to date and we’re extremely excited to be able to give you all the opportunity to play with our new baby. Gumby 2 is available right now, we hope you love it.

There are a bunch of great new features and optimizations built into Gumby 2 that we hope you explore and utilize while creating your applications. The most obvious change, is that the entire framework has been rewritten in SASS, or more specifically the SCSS syntax. Most everything that you need in order to completely customize Gumby for use in your project has become a variable. We also have included a bunch of handy mixins that are at your disposal to make complex annoying stuff into easy fun stuff.

Gumby 2 has been completely re-architected from the ground up. Its got some amazing new features and everything has been upgraded in some way. Interested yet? Here we go.

SASS & Compass

Like I said, the first thing you’ll notice about Gumby 2 is that its been completely rewritten in SASS. This allowed us to turn most everything you’d ever need to change about Gumby into a variable; including the grid itself. We’re also leveraging the power of Compass’s awesome library of mixins to make stuff like CSS3 and vendor prefixes less ‘headachy’. With this new version, you’re no longer limited to a 940px wide grid; nor are you constrained to the limits of 12, or 16 columns. Our design team may, or may-not, have thrown a party in secret after we shared this idea with them late last year. With Gumby 2 responsive CSS framework you can work with a grid of any width that you want, its defined as a variable, with any number of columns you’d like.

What about the Hybrid Grid, you ask? Well, thats still there, and better than ever because now you’re able to define how many columns are in your hybrid grid in addition to the default grid! Other cool stuff thats easy to define is the color scheme for your entire UI, your base font sizes, button radiuses and more! We’ve always been most proud of Gumby’s ability to sit as the backbone of any project. The goal of version 2 was to make that even more true than ever before. We took your feedback (make color changing easier) and ran with the idea. We thought, what if changing everything was easier? The results speak for themselves.

Google WebFonts

We believe that frameworks should help developers and designers make the web more beautiful, without adding extra work to their schedules. Finding, converting, hosting, serving, and browser testing the fonts on your projects are all huge pains in the — neck. When we started building Gumby 2, we were planning on launching with Open Sans included in a ‘fonts’ folder with the rest of the framework files.

You could have continued with your current process which likely involves scouring the web for web safe fonts, researching licenses, or embedding a script from a site like TypeKit or Google WebFonts. That probably would have been fine, but that wouldn’t have made your life any easier. What we decided to do is give you a huge library to pick from, the Google WebFonts Library, right off the bat. If what you need isn’t in there, you always have the option to use one of your older methods — no extra work involved. If the font you need is a part of the Google WebFonts Library, all you have to do is select it while creating your Gumby build and magically all of the typography on your entire website just works right out of the box!

Modular Scale

Modular scale is a beautiful thing. Designers love it, developers love it, Digital Surgeons loves it. We’ve built Gumby 2 to have the best typography of any front-end framework available today. It was our mission to make beautiful type a focal point of our framework because it is something that we are extremely passionate about at DS. If you’re not familiar with modular scale, you can read about it here, here, here, here, and here too. We are leveraging an awesomesauce mixin by Scott Kellum (you should follow him on twitter) which makes beautiful typography something that comes baked into every single website or application you build using the Gumby Framework. It makes rapid prototyping better, it makes finished products better, it make responsive typography easy. It is just a brilliant idea, so we built modular scale deep into the core of the Gumby responsive framework.

New User Interface

Farewell green UI. The green was cool and all, but it wasn’t as project agnostic as a more neutral color palette would have been. We’ve given Gumby a complete fashion makeover in version 2. Gumby now sports a beautifully modern UI with a neutral color palette, amazing typography, your choice of metro or gradated interface treatments, tons of new elements to build with, and a weave.

Gumby 2 gives you two “interflavors” to choose from while building out your applications user interface. If your app has a flat UI, the .metro flavor will work wonders to speed up your workflow. The buttons and elements in metro are all “flat”, without any gradients and have squared corners by default. If your design is smooth and full of beautiful gradients, we’ve got a flavor for that too! We thought that giving you two flavors of Gumby to choose from, or mix and match together, would give you a solid foundation from which to bootstrap your responsive application. We’re all about cutting out extra work from anyone’s workday. We’ve done our best to make building front-end with Gumby the easiest, quickest, sexiest, and most fun experience possible.

Another effort eliminating work speeder-upper we’ve put together is our amazing Gumby Framework Customize Tool! Custom Gumby builds tailored to your project on a per-project basis! Do you even need any more reasons to go out and give Gumby a download?

A Cert-Entypo Beauty (see what i did there?)

Haven’t you heard? Icons are fonts now! We love a good glyph, so we love the Entypo iconset by Daniel Bruce about 260+ times. Which is why we’ve included every single one inside of Gumby 2. Not only are all of the icons there at your disposal, but they’re incredibly easy to implement into your projects. Give them a spin, and let us know what you think.

Supercharge your UI with Gumby JS

Gumby 2 JavaScript has been completely re-designed from the ground up. We have major improvements to all functionality as well as a ton of brand new features. Gone are the days of a single object housing all of Gumby’s magic, we’ve now abstracted each UI module into a separate file, hooking into the global Gumby object in order to keep everything namespaced and provide helpful debugging features.

The JavaScript is still designed to work in the background, bringing the UI kit to life without the need to write any extra code. However we have extended this philosophy by providing optional parameters, specified in html attributes, as well as dispatching and listening for custom events to allow programmatic interaction with the modules.

Every parameter of a UI module can be specified as an html attribute, using one of three formats. The valid HTML5 data-*, gumby-* or no prefix at all, each is fully supported so take your pick!

Toggles & Switches

Toggles were born in Gumby 1 but boy are they growing up fast! Gumby 2 Toggles boast new features, more advanced functionality and now have a baby brother in the form of Switches!

The aim of Toggles and Switches is to remove the need for pointless, boilerplate JavaScript needed for every CSS driven UI, adding and removing classes based on user interaction. The anatomy is simple yet powerful. Two CSS selectors can be specified using a gumby-trigger attribute. A class of .active will be applied to the first and removed from the second, Switches will perform this action once whereas Toggles will repeat the action, toggling the classes back and forth.

Although this may sound simple, powerful user interfaces can be built using a combination of Toggles and Switches.


Skiplinks allow you to smoothly scroll the window or any element to a specific location. Specify a CSS selector, px value or just ‘top’ to easily scroll to that point on the page.

There are three optional attributes that can be used to modify this functionality, gumby-easing, gumby-duration and gumby-offset. Gumby uses jQuery and the easing and duration parameters are passed directly to $.animate() so why not include an easing plugin and get creative.

Fixed Positions

Fixing headers, sidebars and other UI elements, relative to the users scroll, is a common and painful requirement. Gumby 2 makes this easy yet flexible. Using the gumby-fixed attribute, with CSS selectors and px values, elements can be fixed and released at various points on the screen with ease. Check out the sidebar on the Gumby documentation pages.

Retina Images

Since Apple introduced the retina display we’ve had to change the way we design and build for the web, serving up responsive images for different device resolutions. Gumby 2 is here to help. If you include a high resolution image in the same directory as your regular image with the suffix @2x, applying the gumby-retina attribute will ensure the higher resolution image is served up on retina displays.

Custom Events

One of the major updates we’ve made to the Gumby UI kit is the introduction of custom events. Each UI module now listens for events that you can use to programmatically interact with modules as well as triggering events based on the users interactions. All events are namespaced with ‘gumby’ and jQuery’s trigger() and on() methods make binding and listening easy. Grab content from your server when a tab is changed, trigger style changes when your sidebar becomes fixed, give the user some feedback when a checkbox is checked, the possibilities are endless.

Now download it and go make awesome!

Go grab Gumby 2, follow us on twitter @gumbycss, and let us know what you think! We’d love to see the awesome stuff you are building with it, so please submit to our showcase once you’ve rolled out your next masterpiece. We’re super excited about having the opportunity to bring this awesome framework to you; rest assured that this is only the beginning of awesomeness yet to come! Thank you all so much for your support and contributions to the Gumby GitHub community, keep it up!