Toggles & Switches

We realized awhile back that a lot of Javascript was being written for the sole purpose of adding and removing classes to elements for CSS animations. We figured this was a waste of Javascript and behold, Toggles and Switches were born unto developers everywhere. Don't be mislead by the simple explanation though. While simple sounding you can build pretty complex things such as accordians, image sliders, drawers, and much more.

Toggles and switches rely on the gumby-trigger attribute. With this attribute, you can do tons of things. You can hide an element, toggle an element, show a hidden element and much more. Let your imagination run wild.

Don't Forget! On its own, the .active class does nothing. You'll need to hide it, color it, animate it on your own.

Toggle an Element

Placing one element name inside the gumby-trigger attribute will add and remove .active upon click. In the example below we're going to toggle the #something id. By itself, nothing will happen; But create a CSS animation for the .active class or even something as simple as display: none then watch toggles and switches come to life.

<a href="#" class="toggle" gumby-trigger="#something">Toggle #Something!</a>

Toggle between Elements

Here we're putting two elements separated by a pipe character that will receive the .active class at alternating times. Below, #something has the active class, but upon clicking the link, the .somethingelse element will receive an active class and the #something element will have active removed.

<a href="#" class="toggle" gumby-trigger="#something | .somethingelse">Toggle</a>

Switch between elements

Same principle as before with toggles, just with a different class name. A switch will alternate the active class between the elements listed in gumby-trigger however this will only happen once. <a href="#" class="switch" gumby-trigger="#something | .somethingelse">Switch</a>

Remove .active

With an empty selector before the pipe, Gumby knows to hide the element after the pipe on click. Note again that this is a one time action. If you need them to happen repeatedly, toggles are what you need.

<a href="#" class="switch" gumby-trigger=" | .somethingelse">Switch</a>

Bringing it together

Utilizing Gumby's event listening you can do things like toggling the classes on mouseout and mouseover events.

<a href="#" class="toggle" gumby-trigger=".selector | .another" gumby-on="mouseover mouseout">Toggle</a>

I can't use .active!

Remain calm. Your answer lies in the attribute gumby-classname where you can specify what class gets added to the elements in your toggles and switches.

Drawers and Modals

It just so happens that Gumby's own drawers and modals are actually built with toggles and switches. Did I not tell you how powerful this thing is? Read all about drawers and modals below.

More on Toggles and Switches

Both Toggles and Switches work in the same way (and in fact are handled by the same JS UI module) with only one small difference. As the name suggests, Toggles will toggle a class on a set of elements while Switches will add and remove a class only once. As simple as this sounds, complex UI elements with reasonably advanced functionality can be created using Toggles and Switches only.

Each Toggle and Switch requires a gumby-trigger attribute containing one or two selectors separated by a pipe. A class of .active (or the class name specified in gumby-classname) will be added to the first selector and removed from the second. Toggles will continuously repeat this interaction, toggling the classes back and forth, whereas a Switch will perform the action only once. Neither of these selectors are actually required, you can simply provide one selector, with no pipe separator, to which the active class will be added, or supply an empty first selector in order to only remove the active class.

Both Toggles and Switches also provide an optional gumby-on attribute which can be used to set the triggering event. They use the click event by default but you can set it to any number of standard JS events.

Any element can be a Toggle or a Switch, just add the appropriate class.

Read more on Gumby's Toggles & Switches on the Digital Surgeons blog.

Skip Links

Skip links allow you to vertically slide the window to a specific DOM element, a px point or up to the top of the page. There are two classes that can be used to define a skip link, .skiplink provides the same predefined styles as buttons while .skip can be used to create unstyled skip links.

Either way, add one of the classes and a gumby-goto attribute containing a valid css selector, a px value or simply ‘top’. Clicking the skip link will trigger the slide.

There are three optional attributes you can use to tweak the functionality. gumby-duration, gumby-easing and gumby-offset. Skip links use jQuery.animate and the gumby-duration and gumby-easing attributes are fed directly into that method. The duration should be specified in ms and the easing method as a string, any valid jQuery easing method can be used here so include the jQuery easing plugin to get creative! The gumby-offset attribute can be used in conjunction with the gumby-goto attribute and should be specified as a +/- integer e.g -10 or +100. This attribute is useful when sliding to elements with padding or margins or perhaps in conjunction with Fixed Elements.

Something to be aware of is the fact that as your page loads and users interact with it, elements can change position which will effect the skiplinks goto point. The gumby-update attribute can be used to specify that the targets positions should be recalculated on every trigger.

<p class="skiplink medium primary"><a href="#" gumby-goto="[data-target='toggles-switches']">Go to Toggles &amp; Switches</a></p>
<p class="skiplink medium secondary"><a href="#" gumby-goto="[data-target='fixed-positions']">Go to Fixed Positions</a></p>

Fixed Positions

The gumby-fixed attribute can be applied to any element in order to fix and pin at certain points. The fixed value can be specified as a px value, a css selector or the string 'top'. If a selector is specified, the element will be fixed when the result of the selector reaches the top of the window. If 'top' is specified then the element will be fixed as it reaches the top of the window itself and if a px value is specified the element will be fixed when the window scroll offset reaches that value.

A point at which to pin the element can be specified in gumby-pin with the same options as gumby-fixed. At this point the element will become pinned rather than fixed, check out our documentation sidebar for an example of this.

There are a few more attributes that can be used to help position the target element. Specify a px value in the gumby-offset attribute to set an offset from the fixed point, similarly a px offset for the pin point can be specified in gumby-pinoffset. The gumby-top attribute can then be used to specify the distance from the top of the window a fixed element should be, defaulting to 0.

Finally, the fixed module will attempt to constrain the width of the fixed element if nested inside rows/columns, which will naturally become relative to the window and therefore lose inherited styles, this width will also be updated on window.resize. You can stop this functionality by specifying 'false' in gumby-constrain.

Check out our documentation sidebar, we're using Fixed Elements.

<!-- will be fixed as it reaches top of window -->
<div gumby-fixed="top">Fix me</div>

<!-- will be fixed at 250px scroll offset and pinned when #some-element is reached -->
<div gumby-fixed="250" gumby-pin="#some-element">Fix me</div>

<!-- will be fixed at 250px scroll offset and pinned at 600px -->
<div gumby-fixed="250" gumby-pin="600">Fix me</div>

Vertical Alignment

Vertically align images and text, simply.

Gumby Framework is cool.

Face tattoos are not.

Gumby Framework is cool.

And not too mainstream.

<div class="row">
  <section class="twelve columns">
    <article class="valign row">
      <div>
        <img src="/img/img_silence_demo.jpg" width="145" />
      </div>
      <div>
        <h4>Gumby Framework is cool.</h4>
        <p>Face tattoos are not.</p>
      </div>
    </article>
    <article class="valign row">
      <div>
        <img src="/img/img_silence_demo.jpg" width="145" />
      </div>
      <div>
        <h4>Gumby Framework is cool.</h4>
        <p>and not too mainstream.</p>
      </div>
    </article>
  </section>
</div>

Retina Images

With all of these devices with absurd pixel ratios, you'll undoubtedly need to serve up high-resoultion images to these fancy pieces of modern technology.

As with just about everything in Gumby, Retina images are simple to implement. You'll need two things to continue:

  • A regular resolution image
  • A high resolution image

Usage goes a little something like this: Just append "@2x" to the file name. Also keep in mind these both need to be included in the same directory.

images/craig_on_bearskin.jpg
images/craig_on_bearskin@2x.jpg

Include it as you normally would in your code:

<img src="/images/craig_on_bearskin.jpg" />

and then just insert gumby-retina in the <img> tag like such:

<img src="/images/craig_on_bearskin.jpg" gumby-retina />

and devices with high-density pixel ratios will display hi-res versions of your images. So easy, a pixelated caveman could do it.

Drawers

The .drawer class sets some predefined styling as well as a 0px max height and .3s transition while the .drawer.active class sets an 800px max height, causing the drawer to slide open. Trigger with a toggle or switch like so.

<p class="btn medium primary">
  <a href="#"  class="switch" gumby-trigger="#drawer1">Open Top Drawer</a>
</p>
<p class="btn medium primary">
  <a href="#"  class="toggle" gumby-trigger="#drawer2|#drawer3">Toggle Bottom Drawers</a>
</p>
<p class="btn medium primary">
  <a href="#"  class="switch" gumby-trigger="|.drawer">Close All Drawers</a>
</p>
<div class="row">
  <div class="twelve columns">
    <div class="drawer" id="drawer1">
      <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2>
    </div>
  </div>
</div>
<div class="row">
  <div class="six columns">
    <div class="drawer" id="drawer2">
      <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2>
    </div>
  </div>
  <div class="six columns">
    <div class="drawer" id="drawer3">
      <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2>
    </div>
  </div>
</div>

Modals

The .modal class sets some predefined styling on a hidden modal, .modal.active will display the modal using z-index and opacity so as to provide a nice transition.

Open Modal

<div class="modal" id="modal1">
  <div class="content">
    <a class="close switch" gumby-trigger="|#modal1"><i class="icon-cancel" /></i></a>
    <div class="row">
      <div class="ten columns centered text-center">
        <h2>This is a modal.</h2>
        <p>Gumby modals are easy to make using Toggles &amp; Switches.</p>
        <p class="btn primary medium">
          <a href="#" class="switch" gumby-trigger="|#modal1">Close Modal</a>
        </p>
      </div>
    </div>
  </div>
</div>
<p class="btn primary medium"><a href="#" class="switch" gumby-trigger="#modal1">Open Modal</a></p>

Intrinsic Ratio Video

Intrinsic ratio video embeds maintain a video's aspect ratio as the browser's viewport size increases or decreases. Simply wrap your video embed inside a parent element with a class of video. Gumby provides three different classes to accomodate for the scrubbers different video services attach to each video embed - youtube, vimeo, and twitch.

<article class="youtube video">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/N0IDkzhBQMg"></iframe >
</article>
<article class="vimeo video">
  <iframe src="http://player.vimeo.com/video/50650297" width="500" height="281"></iframe >
</article>

You simply have to try it.