How to use Gumby components

In our last article about Gumby you saw the fundamentals of this robust framework, but we also have a lot of JavaScript components we can use via the JavaScript UI for Gumby.

Today, we’ll take a look at these components.

Toggles & switches

A lot of what Gumby focuses on is minimizing the amount of JavaScript we need to write.

Toggles and switches look at the gumby-trigger attribute and the element you enter as the value of this attribute will have the .active class toggled. You can use this to toggle elements, show hidden elements, create accordions and just about anything you can think of.

To set up an anchor tag so that once it’s clicked it toggles the active class in another element you use:

Toggle It!

When this link is clicked the class ‘active’ will be assigned to the #toggle-element and when you click again the class will be removed.

We can also toggle between elements, this means that when you click the anchor the first time it will give the active class to the first element and the second time it will give it to the second one (the elements must be separated by a vertical bar).

Toggle

If you want the active class to be a one time thing, then what you need is the switch class; this will add the active class once.

You can even use gumby’s event listeners to toggle elements on hover , like so:

Toggle on hover

You can change the applied class of these toggles and switches with the gumby-classname attribute:

Toggle

Skip links

In page links are a very common thing in today’s single page websites and it’s always nice to add some animation. We usually have to write that code ourselves or even add a plugin to our website. Gumby has an attribute to help us with that, the gumby-goto atribute:

Skip Link

This will skip us to .mydiv with all the defaults but we can also set some more values if we prefer:

Skip Link

In this example you can see I set a duration of 400ms for the animation and I also set an offset, this will check the position of the div and either slide to a position after or before it, in my case I set that value to -50px so that the div won’t be stuck at the top.

We also have gumby-easing and this means you can plug in the jQuery easing plugin and get creative with your animations.

Fixed positioning

To help us with fixed position and pinning elements Gumby also has attributes like gumby-fixed and gumby-pin.

In the gumby-fixed attribute we can have a pixel value, the string ‘top’ or a CSS selector.

If a CSS selector is chosen the element will be fixed when the element specified in gumby-fixed reaches the top of the viewport. In the case of a px value the element will be fixed when the user scrolls that amount of pixels.

Fixed at the top

To handle offsets we have the gumby-offset, gumby-pinoffset and gumby-top with the default value of 0px.

Retina images

With all the devices with different pixel ratios that are now accessing the Web on a daily basis it’s a good idea to add a high-resolution version of your images for those with a higher pixel ratio.

Firstly you will need to have both versions of your image in the same directory and append @2x to the high resolution one, if this is all set on your part all you need to do now is add the gumby-retina attribute to the img tag and you are all set, your webpage will show the high resolution one on retina devices automatically.

Drawers

Drawers work sort of like helpers for our toggles and switches, they set a predefined style and also a 0.3s slide toggle animation for our toggled div’s.

Toggle Drawer

Just place your content here

Modals

Another component for which we use JavaScript all the time is modal windows. Gumby also gives us a JavaScript free solution for creating modals.

With the help of switches we can create modals easily by setting the value of the gumby-trigger attribute to be your modal div, now all you really need to do is add the modal class to this div and your modal is created. For a close button we just need a little contribution from switches again and your modal is now completely functional:

Open Modal





This is a modal.
Easy as pie isn't it?

Intrinsic ratio video

The last component we have is intrinsic ratio video, what this does is keep the video’s aspect ration even when the browser’s viewport changes. All you really need to do is add the class video to the div surrounding your video’s iframe and if your video comes from youtube, vimeo or twitch you can also add those classes and Gumby will accommodate your video even better.

For components that’s all that Gumby has to offer, but apart from this and the actual HTML/CSS UI we also have some extensions we can use to our advantage and that’s what we will look at in the next article.