In our final article on Gumby, I will talk to you about the extensions Gumby provides. They aren’t included in the main framework to make it more lightweight but you can install them separately to make your coding even easier.
These extensions should be installed with bower , if you have never heard of Bower it is basically, as their github page says, ‘a package manager for the web’. It allows you to install registered packages with just a simple command and to install it yourself you will need to have NodeJS installed and of course npm (but that comes with node by default).
If you have these two, installing bower is as simple as running this command:
npm install -g bower
Responsive websites are almost a necessity now and the fact is that responsive images should also be a necessity because sending a huge desktop image to a mobile phone is awful for performance, with Gumby you can create these with great ease.
We first need to install the responsive images:
bower install gumby-images
You can do this by using the gumby-supports attribute on your tag, you need to pass the technology you want to test, a vertical bar, and then the source of your image; if this test fails the user will be shown the default image which is placed inside the gumby-default attribute.
We finally have the gumby-media attribute, which is where you pass your media query:
bower install gumby-comments
As you can see what this library does is check for a condition inside your tag and if that condition is true it reads whatever is on the comment and places that on the page.
It also supports feature detection using Modernizr:
You can see more examples at and how it works at responsivecomments.com.
bower install gumby-inview
With this extension you can easily add a class to an element when this element is in the user’s viewport. This means that as soon as the user sees the element an active class will be added so that you can perform some animations , change its color or just show it, this is great for conserving your resources and only showing some animations when the user can see them.
Once you have InView installed all you really need to do is add the inviewclass to the element you wish:
Don’t forget that by itself the active class does not do anything so you can just create some animations for when this element has reached the user’s view and has the active class:
transition: all 0.5s;
With something like this you animate the background color and the color of the text only when the user sees the element. As with toggles and switches we also have the option of changing the applied class with the gumby-classname attribute and we can also add an offset with the gumby-offset attribute.
One great addition we have been seeing a lot more lately is websites tending not to display information in the same order on desktop and mobile and the Shuffle extension helps you achieve that.
To install it first you need to run:
bower install gumby-shuffle
Once you have that, creating a 3 column layout that changes its order when reaching 768px is as simple as:
As you can see it uses a very similar syntax to the responsive images extension, you need to first specify the media query then add a dash and after it you should place the order of your elements, zero indexed. You can also have more than one media query in each element, you just need to separate them with a comma.
bower install gumby-parallax
To create a simple parallax effect all you really need to is add the parallax class to your element and then specify the gumby-parallax value and this will be how fast your image will scroll relatively to how the user is scrolling, a value of 0.5 will make the image go half the speed of the scrolling and a value of 1 will cause the background image of that element to scroll at the same rate as the user’s viewport.
You may already be familiar with fittext.js, what this plugin does is that it makes your font-sizes flexible. By using this plugin you get headlines that are scalable and also fill the width of the parent element, it scales your big typography when the parent element also scales.
When using fittext with gumby you need to add the fittext class along with the gumby-sizes attribute where you can specify a minimum and maximum font-size (you pass these as a string without the px in it and separate them with a vertical bar).
You also have the gumby-rate attribute and this one corresponds to fittext’s compressor. It will default to a value of 1 and if you set it to anything less it will scale the text a little less aggressively.
bower install gumby-fittext
This will heading will be resized
The sole objective of this framework is to allow you to write minimal code and they have accomplished this to perfection in my opinion.
I hope you enjoyed this series of articles and feel ready to start using Gumby.