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.
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.
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.
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.).
Toggles & Switches
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
- CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks
- 20 Free Bootstrap Admin & Dashboard Templates
- 50 Free Bootstrap Web Templates & Themes
- 10 Popular Web Typography Frameworks & Libraries
- The Idea Generation Process of Scribbling on a Napkin
- 20 Responsive & Lightweight CSS Frameworks
- The Personal Process of Choosing the Right Design Tool
- 25 Free CSS Animation Tools & Frameworks