Streamlining The Front End Development Process With The Gumby Framework

Last month Digital Surgeons launched the latest version of their responsive front-end system, the Gumby Framework. Gumby 2 is a complete re-imagination of its version 1 counterpart. It adds a ton of new features and has been rewritten in Sass to allow for easier customization and maintainability. Many of its new features are incredibly helpful in streamlining the front-end development process.

The original version of Gumby was born out of the frustrations that it’s developers encountered while attempting to migrate to a responsive web design process. Gumby 2 is no different; it solves quite a few problems in very elegant ways that make building websites with it a joy. In addition to the obvious benefits of being built with Sass & Compass, Gumby 2 also has many other features such as using variables, and an extensive library of useful mixins. Gumby 2 was created to function as a pain reliever, an aspirin of sorts, for front-end developers.

Google WebFonts

Gumby 2 integrates with Google WebFonts which makes embedding custom fonts into your application prototypes and websites a cinch. You don’t have to worry about syntax changes, licensing, converting, hosting, serving, or even much in the way of the cross-browser compatibility of your custom fonts because Google handles all of that.

Using custom web fonts on your web projects is super easy; no more fiddling with Font Squirrel or any other form of font conversion — its as simple as dropping in a link, or using their customize tool to create a custom build. It’s an amazing time-saver.

Customizable UI Kit

Gumby 2 is a complete front-end framework, meaning that it includes a UI Kit with which you can use predefined classes to build out various UI elements rapidly. You can use the UI kit to build out buttons, forms, tabs, and navigation elements very quickly. This means that you can rapidly prototype your application using default UI elements. Gumby’s UI Kit offers a trendy, flat-designed UI as well as a gradated one.

As the developer, you can pick the style which best suits your application, which is something that other frameworks do not currently offer. Other things that you can do quickly with Gumby’s JavaScript library are things like fixed positions with offsets, skip links, drawers, and many other custom elements thanks to something called Toggles & Switches.

Symbol Fonts

One of the newest trends in web performance optimization is the “Symbol Font” or “Icon Font”. What symbol fonts allow you to do is implement all of your iconography in a lightweight, resolution independent (scalable) manner — embedding a font and instantiating them by referencing the private use area of Unicode they are mapped to. Gone are the days of giant sprite-sheets containing all of your application’s iconography. Symbol fonts are faster and more efficient.

Gumby 2 includes the open symbol font, Entypo by Daniel Bruce. Entypo has over 250 beautiful pictograms, suitable for any application. They’re all built into Gumby, which does all of the hard work for you, using any one of them is as simple as adding the appropriate class where you want the icon to appear.

Responsive Images

As more and more users flock to their mobile devices, and as more and more high density displays appear on those mobile devices, the crappier the web looks. Ok, I’m exaggerating there a bit, but if you tell me you’ve never visited a website on your phone and seen a pixelated or blurry image, you’re full of barnacles (yes, that was a Sponge-Bob reference. You’re welcome.).

Responsive frameworks make adjusting your layout to look pretty on mobile devices pretty easy, but what they don’t typically do is care about the rest of your site. The iconography. The photos. The rest is up to you. Gumby changes that by including a really intuitive way of loading retina versions of images on the fly, only when the device-pixel-ratio of the visiting device demands it. All it takes is adding the custom “retina” or standards compliant “data-retina” attribute to an image tag and Gumby’s Javascript will look for, and load the @2x version of that image as long as it lives at the same path as the non-retina version. Pretty cool, huh?

Toggles & Switches

Toggles and switches are so powerful that they really deserve their own blog article. Modern developers often find that most JavaScript that they are implementing or writing is redundant. Most of the time it is a matter of turning an element “on” and “off” when a user clicked or hovered over an element. Basically, most basic interfaces can be constructed by simply adding and removing “active” classes when a user performs an action. Toggles and Switches do just that. Don’t take my use of the word “basic” at face value either; once you grasp the concept, you can create some surprisingly complex interactive elements with them quite easily.

In my opinion, Toggles and Switches are the most valuable, and most compelling reason to use Gumby over any other framework. They are amazing. If you want to talk about streamlining the front-end development process, spend a week exploring the power of toggles and switches and get back to us ;).

Wrapping it all up

When it comes to choosing a front-end framework, or starting place for your design project, there’s so many things to consider that it can often be overwhelming. Unlike most front-end frameworks that cater to a more “dev” friendly workflow, the Gumby Framework was created to make the transition from design to code as effortless as possible. Gumby 2 is packed with features that are big time-savers for front-end developers. It has all of the makings of a great asset whose power becomes apparent once you unleash it into your front-end development workflow.

Grab a copy and start building on the Gumby Framework