Introduction

In order to keep the core of Gumby Framework as light as possible we offer extension modules which can easily be installed and integrated into your projects. Each extension can be installed with Bower and then built with Claymate. Each of these extensions is hosted in a separate repo under our GumbyFramework GitHub organisation.

Responsive Images

One mistake people often make in responsive web applications is serving one large image to all clients and scaling it down in CSS. This is bad news for performance, wasted bytes are being sent down the tubes and costing your users patience and oftentimes money!

The Responsive Images extension helps to alleviate some of the pain in serving up resized images. The extension delivers the image sizes based on feature detection and media queries.

Installation

$ bower install gumby-images

Supports

Using feature detection we can ensure that the latest and greatest technologies are used where possible. Why use jpg if your user can support webp? Don't restrict all users due to the circumstances of a few. Add the gumby-supports attribute to any element, on images the module will work with the src attribute and on all other elements the background-image property will be updated. The syntax is simple, feature | image, feature2 | img, each of the features are run with Modernizr so be sure to use the correct syntax and update your Modernizr file accordingly. The image supplied in gumby-default will be used if none of the feature tests pass.

<img gumby-default="/img/img_silence.jpg" gumby-supports="webp|/img/img_silence.webp" 
     gumby-media="@media only screen and (min-width: 960px)|/img/img_silence-desktop.jpg, @media only screen and (max-width: 767px)|/img/img_silence-tablet.jpg, @media only screen and (max-width: 320px)|/img/img_mobile.jpg"  />

Media

Using the same pipe split, comma separated syntax, you can serve up different images based on media queries. Check out the example below, it will update as the window resizes.

The media queries are passed directly to JavaScript's matchMedia function which is not supported in <= IE9, but fear not, you can include Paul Irish's polyfil and all will be well.

Resize your window to see the module in action.

<img gumby-default="/img/img_silence.jpg"
     gumby-media=" only screen and (min-width: 960px)|/img/img_silence-desktop.jpg, only screen and (max-width: 767px)|/img/img_silence-tablet.jpg, only screen and (max-width: 320px)|/img/img_silence-mobile.jpg"  />

Responsive Comments

ResponsiveComments is a JavaScript library written at Digital Surgeons and was designed to bring simple conditional loading to the client side. We have built this library into a Gumby extension and added some of the core Gumby functionality like namespaced events and attributes.

Although not the complete answer to conditional loading in responsive web design, ResponsiveComments provides a solution to simple conditional loading, directly within your markup, using HTML comments, media queries and feature detection. We felt carried the Gumby philosohpy and deserved to be built in to the framework.

You can find more information on the the reasons behind the library and how it works at responsivecomments.com.

Installation

$ bower install gumby-comments

Resize your window to see the module in action.

InView

Easily add classnames to elements as they scroll into view and specify offsets to perfect their behavior. Have you ever wanted to conserve resources by disabling CSS animation while elements are out of view, or wanted to capture your users' attentions by fading in calls to action once a user reaches your content? You're in luck. InView is for you. Example 1 is the simpliest implementation to get you started.

Installation

$ bower install gumby-inview

Example 1

h4.example1 {
    text-align: center;
    color: white;
}

h4.example1.active {
   background: #3085d6;
}
<h4 class="inview example1">Example</h4>

The extension automatically adds an "active" class to the example above as soon as it's on the screen. Next, lets customize the classname and add an offset.

Example 2

h4.example2 {
    text-align: center;
    color: white;
    @include transition(all .5s);
}

h4.example2.onscreen {
    background: orange; 
}
<h4 class="inview example2" gumby-classname="onscreen" gumby-offset="50">Example 2</h4>

As you scroll Example2 into view, the effect delays depending on the height given by the offset. This allows the effect to be more perceivable. Next, lets update the gumby-classname attribute to include classes for "offtop" and "offbottom"

Example 3

h4.example3 {
    text-align: center;
    color: white;
    background: white;
    @include transition(all .5s);
}
	
h4.example3.onscreen {
    background: #b83d78;
}
	
h4.example3.offbottom {
    background: #440000;
}
	
h4.example3.offtop {
    background: #1b0044;
}
<h4 class="inview example3" gumby-classname="onscreen|offbottom|offtop" gumby-offset="100">Example 3</h4>

Here, we are specifying a seperate class for each state of our InView object. Example 3 changes colors depending on if its on the screen, off the bottom, or off the top.

Click here to read about all of the options for inview.

Shuffle

Your perfect grid layout may look great on desktop, however you're stuck if you want the columns to stack in a different order on mobile. Even just tweaking the order on tablet is tough. Sure, you can use floats within media queries but that can get ugly really fast. The Shuffle extension is here to save the day; And your layout too.

Using a very similar syntax to the Responsive Images extension, you can specify multiple media queries and an associated sequence using the gumby-shuffle attribute. The sequence should be a zero-indexed, dash separated list, specifying the order the children should be shuffled too.

As with Responsive Images, the media queries are passed directly to JavaScript's matchMedia function which is not supported in <= IE9, but fear not, you can include Paul Irish's polyfil and all will be well.

Installation

$ bower install gumby-shuffle

Resize your window to see the module in action.

1

2

3

<div class="row" gumby-shuffle="only screen and (max-width: 860px) and (min-width: 768px)|2-1-0,only screen and (max-width: 767px)|1-0-2">
  <div class="four columns">
    <h1>1</h1>
  </div>
  <div class="four columns">
    <h1>2</h1>
  </div>
  <div class="four columns">
    <h1>3</h1>
  </div>
</div>

Parallax

Parallaxing is all the rage these days. Add a simple parallax effect to any background image with this extension. Simply add the class .parallax and specify a rate in a gumby-parallax attribute. The background image will be scrolled at the rate specified, relative to the window's scroll. Specifying 1 in gumby-parallax will cause the background image to scroll at the same rate as the window.

We disable the parallax effect at the portrait tablet breakpoint as scroll events are only fired once a scroll is complete, this creates a janky effect.

Installation

$ bower install gumby-parallax
<div class="parallax" gumby-parallax="0.5"></div>

FitText

Sometimes you want your headings to stretch to fill the available space. It's a cool effect and who doesn't love HUGE typography? This module was adapted and gumbified from fittext.js so a big thank you to them for their awesome plugin.

Add the class .fittext to any element with an optional gumby-rate attribute which corresponds to the fittext.js compressor. You can also specify min/max font sizes using the gumby-sizes attribute and passing a string of sizes separated by a pipe, e.g "14|40". Both of these sizes are optional, leave the first blank to specify a max font size only.

Installation

$ bower install gumby-fittext

Resize your window to see the module in action.

A big ball of wibbly wobbly, timey wimey... stuff

<h1 class="fittext" gumby-rate="0.5" gumby-sizes="14|80">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

You simply have to try it.