How to use Gumby extensions

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.

Bower

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 images

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

Once installed you can basically insert media queries for your images inside the actual img tag without even going into any CSS or Javascript and you can even test for webp inside your image to make sure you always deliver the best technology available to your user.

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:

Responsive Comments

Responsive Comments is one of those extensions that deserves an article all of its own. It’s a JavaScript library that brings conditional loading to the client side, it does this right in your markup. It uses HTML comments, media queries and feature detection to create some simple examples of conditional loading.

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.

InView

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:

My Heading

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:

h1.animate {
text-align: center;
color: white;
background: blue;
transition: all 0.5s;
}
h1.animate.active {
background: orange;
color: blue;
}

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.

Shuffle

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:

1



2



3

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.

Parallax

 Parallax is all over the web now, everyone wants to create a parallax effect on their website and with this extension you can create a simple parallax effect with great ease and again without touching a line of JavaScript.

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.

.parallax {
background-image:url(/img/parallax.jpg);
}

FitText

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

Conclusion

This was the final article in our look at the Gumby framework, as you can see this framework is very complete, filled with helpers when it comes to CSS and JavaScript.

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.