Today, we’ll take a look at these components.
Toggles & switches
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:
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).
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:
You can change the applied class of these toggles and switches with the gumby-classname attribute:
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:
This will skip us to .mydiv with all the defaults but we can also set some more values if we prefer:
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.
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.
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 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.
Just place your content here
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:
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.