Interflavors

Metro style and semi-flat design are all the rage nowadays. Gumby 2’s new, rearchitected UI kit embraces the latest design trends and allows you to pick and choose, or even mix flat design with more graduated design styles. There are built in classes for mixing and matching the two Gumby Framework UI flavors. Using the .metro class gets you flat design, while .pretty will get you some pretty gradients. Mix, match, and define your design language.

Attributes

Many of the UI modules in the Gumby UI kit support a number of optional attributes that can be used to customize the modules functionality. In all instances you have the choice of using a data- prefix, a gumby- prefix or no prefix at all. Gumby supports all three of these options so take your pick!

Buttons

Gumby 2's UI Kit has been completely rearchitected — no element has received a bigger facelift and more features than our buttons. Buttons have been completely reimagined from the ground up to allow you even more flexibility than ever before as well as improved mobile performance seamlessly switching from click to tap events.

There are tons of new classes at your disposal to change the button colors, properties, and even add icons to the left or right of the buttons.

There are still styles for the entire hierarchy of buttons that your project could need, and then some, but now there's more than ever before! You can now define your button size, color, ui, add or remove rounded corners, and even apply some pretty icons thanks to ::before and ::after pseudo elements! Simply add the class for the desired function of the button:

<div class="medium primary btn"><a href="#">Primary</a></div>
<div class="medium secondary btn"><a href="#">Secondary</a></div>
<div class="medium default btn"><a href="#">Default</a></div>
<div class="medium info btn"><a href="#">Info</a></div>
<div class="medium danger btn"><a href="#">Danger</a></div>
<div class="medium warning btn"><a href="#">Warning</a></div>
<div class="medium success btn"><a href="#">Success</a></div>
<div class="medium info btn icon-left entypo icon-mail"><a href="#">Icon Left</a></div>
<div class="medium default btn icon-right entypo icon-camera"><a href="#">Icon Right</a></div>
<div class="medium default btn"><input type="submit" value="Submit" /></div>
<div class="medium info btn"><button>Button</button></div>

<div class="xlarge btn default"><a href="#">Extra Large</a></div>
<div class="large btn default"><a href="#">Large</a></div>
<div class="medium btn default"><a href="#">Medium</a></div>
<div class="small btn default"><a href="#">Small</a></div>
<div class="medium oval btn default"><a href="#">Oval</a></div>
<div class="medium metro rounded btn default"><a href="#">Rounded</a></div>
<div class="medium squared btn default"><a href="#">Squared</a></div>
<div class="medium btn pill-left default"><a href="#">Pill Left</a></div>
<div class="medium btn pill-right default"><a href="#">Pill Right</a></div>

You can even mix and match classes to create smaller, or alternate versions of buttons found throught your project. Mix a secondary class and a small class on a button and check out the results... Now, that is how the cascade was meant to work! These classes work great for prototyping, and with a little color tweaking to fit your project's final design - they are tight and solid enough to work in production.

Indicators

Gumby 2 provides three indicator classes that can be used to highlight data and provide user feedback. Use the same interflavour styling options with the three indicators, badges, labels and alerts and let your users know what for!

<div class="four columns">
    <li class="primary badge">2</li>
    <li class="secondary badge">2</li>
    <li class="default badge">2</li>
    <li class="info badge">2</li>
  </div>
  <div class="four columns">
    <li class="danger label">Important</li>
    <li class="warning label">Warning</li>
    <li class="success label">Success</li>
  </div>
</div>
 <div class="four columns">
    <li class="primary alert">KHAAAAAAAAAAAAAAANNNN!!!!</li>
    <li class="secondary alert">We are the Silence. And Silence will fall!</li>
    <li class="danger alert">I’m sorry, Dave. I’m afraid I can’t do that.</li>
    <li class="success alert">Great Success! Very nice!</li>
  </div>
</div>

Forms

Lets be honest, forms are the most tedious things to mark up on the planet. They're absolutely terrible for the productivity and blood pressure of your front-end developers. Gumby Framework tries to lessen the emotional scarring incurred by your developers when coding forms by adding some simple classes to make your forms pretty without you having to worry about coming up with your own structure. Forms are another element that we’ve completely reimagined for Gumby 2. We encourage you to copy/paste our form elements and customize from there. It will save you time, and headaches. Gumby Framework includes styles for your basic form elements, input, select, as well as pretty checkboxes, radio buttons, and even more form validation classes.

Text Inputs

For text inputs we have each input nested within .field which essentially creates spacing between form field rows. You must define the input type + .input for input styles to acquire styling. Acceptable input types are .search, .text, .password, .email, .phone, and .numeric

<div class="row">
  <ul class="seven columns">
    <li class="field"><input class="text input" type="text" placeholder="Text input" /></li>
    <li class="field"><input class="email input" type="email" placeholder="Email input" /></li>
    <li class="field">
      <input class="password input" type="password" placeholder="Password input" />
    </li>
  </ul>
  <ul class="seven columns">
    <li class="field">
      <input class="wide text input" type="password" placeholder="wide input" />
      <input class="narrow text input" type="text" placeholder="narrow input" />
    </li>
    <li class="field success">
      <input class="text input" type="text" placeholder="Text input" />
    </li>
    <li class="field warning">
      <input class="email input" type="email" placeholder="Email input" />
    </li>
    <li class="field danger">
      <input class="password input" type="password" placeholder="Password input" />
    </li>
  </ul>
</div>

Conjoined Inputs

Conjoined inputs are an awesome new addition. You can add .append, or .prepend to your field declaration in order to add .adjoined spans to your text inputs! This will allow you to add more direction, specificity, and context for your users. You can even append or prepend buttons and inputs to each other in order to make creative new interface solutions!

<div class="row">
  <ul class="ten columns">
    <li class="prepend field">
      <span class="adjoined">@</span>
      <input class="xwide text input" type="text" placeholder="Text input" />
    </li>
    <li class="append field">
      <input class="xwide email input" type="email" placeholder="Email input" />
      <span class="adjoined">@</span>
    </li>
    <li class="append field">
      <input class="wide email input" type="email" placeholder="Email input" />
      <div class="medium primary btn"><a href="#">Go</a></div>
    </li>
    <li class="prepend append field">
      <span class="adjoined">$</span>
      <input class="normal text input" type="text" placeholder="Text input" />
      <div class="medium primary btn"><a href="#">Go</a></div>
    </li>
  </ul>
</div>

Fancy Selects

Selects are one of the worst form elements to customize with CSS. Every solution is pretty much a bandaid which covers the gaping wound that is the select element. Well, ours sort of is too. Its sad to say this, but there is really no better way to prettify a select element. One bonus here is that the new selects in Gumby 2 use ZERO javascript and pull up native select interfaces on mobile! We start by adding a container element within the class="field row", we will assign this element the class .picker to initialize the picker ui kit styling magic. Inside of the picker you will need to put in your traditional select element and all of its options. The magic happens by hiding the default dropdown arrows by making the select longer than the containing picker which has overflow: hidden; applied to it. This lets you style the default select element, while hiding the ugliest parts of it and supplanting your own.

<div class="row">
  <ul class="ten columns">
    <li class="field">
      <div class="picker">
        <select>
          <option value="#" disabled>Favorite Dalek phrase...</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
          <option>EXTERMINATE</option>
        </select>
      </div>
    </li>
  </ul>
</div>

Fieldsets & Legends

We left out fieldsets and legends from the initial version of the Gumby Framework because of time constraints. Now they’re in there and lookin’ lovely!

<div class="row">
  <fieldset class="ten columns">
    <legend>Fieldset with legend</legend>
    <ul>
      <li class="field">
        <label class="inline" for="text1">Label 1</label>
        <input class="wide text input" id="text1" type="text" placeholder="wide input" />
      </li>
      <li class="field">
        <label class="inline" for="text2">Label 2</label>
        <input class="wide password input" id="text2" type="password" placeholder="wide input" />
      </li>
    </ul>
  </fieldset>
</div>

Radio Buttons & Checkboxes

Everyone knows that default radio buttons and checkboxes are ugly. Gumby 2’s reimagined form elements are just the cure! They’re native, and sexy, and use the fantastic entypo icons that are included in every Gumby Framework installation!

<div class="row">
  <ul class="five columns">
    <li class="field">
      <label class="checkbox checked" for="check1">
        <input name="checkbox[]" id="check1" value="1" type="checkbox" checked="checked">
        <span></span> Checkbox 1
      </label>
      <label class="checkbox" for="check2">
        <input name="checkbox[]" id="check2" value="2" type="checkbox">
        <span></span> Checkbox 2
      </label>
    </li>
  </ul>
  <ul class="five columns">
    <li class="field">
      <label class="radio checked" for="radio1">
        <input name="radio" id="radio1" value="1" type="radio" checked="checked">
        <span></span> Radio Button 1
      </label>
      <label class="radio" for="radio2">
        <input name="radio" id="radio2" value="2" type="radio">
        <span></span> Radio Button 2
      </label>
    </li>
  </ul>
</div>

Navigation

Our basic navigation uses CSS3's display:table; property to allow you to build the most flexible navigation possible. So your client wants to add an item to the main navigation in the final phase of development? Not a problem. Each navigation item is set to display:table-cell; so that when you add something to the navigation, its as simple as adding a list item. That means no more math for you, and no more battling with the gods of CSS to achieve that perfect balance that you spent over an hour to achieve when you first styled it — in fact, that hour you spent in the first place is saved because this navigation takes only seconds to implement!

In order to implement the basic navigation, all you need to do is add either a <nav> or a <div> that has class="navbar" to your project and then nest your <ul> populated with the desired nav items within it. You can even toss buttons and search fields into your nav without worry. They automagically align vertically, and horizontally! The navbar styles also allows you to add dropdowns to your navigation in a very easy, modular way. Nest a <div> with class="dropdown" inside one of your navigation list items, and the contents will drop down when a user mouses over that item. The Gumby Framework dropdowns are pure CSS, no javascript required! By popular demand, Gumby 2's navigation now supports nested dropdowns as well!

Mobile Navigation

The navigation responds beautifully through the use of Toggles (check out the toggles docs for more info). Simply add an anchor directly inside your <nav> with class="toggle" data-trigger=".navbar > ul", ensuring data-trigger targets your navbar <ul>. We've gotten rid of the need for extra images, the new toggle handle uses the embedded entypo icons!

The Navbar JS module improves the navigation on touch devices by binding to tap events rather than relying on the inconsistent 'hover' event on touch devices. It is not required although highly recommended.

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
  <h1 class="four columns logo">
    <a href="#">
      <img src="/img/gumby_mainlogo.png" gumby-retina />
    </a>
  </h1>
  <ul class="eight columns">
    <li><a href="#">Features</a></li>
    <li>
      <a href="#">Documentation</a>
      <div class="dropdown">
        <ul>
          <li><a href="#">The Grid</a></li>
          <li><a href="#">UI Kit</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Demo</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Customize</a></li>
  </ul>
</div>

Tabs

Tabs

Adding tabs in Gumby Framework is flexible, modular, and easy. Building tabs has never been so easy! Simply add a sectional element and assign it class="tabs". Inside of that include a <ul class="tab-nav"> which contains the fragment urls and titles for your tabs, this will act as your tab's navigation. Your tabs' content should be contained in a <div>, <section> or <articles> outside of the tab navigation, each with class="tab-content". Our awesome javascripty magic will handle the rest.

<div class="row">
  <div class="twelve columns">
    <section class="tabs">
      <ul class="tab-nav">
        <li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
      <div class="tab-content">
        <p>Proin elit arcu, rutrum commodo...</p>
      </div>
      <div class="tab-content active">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat...</p>
      </div>
      <div class="tab-content">
        <p>Mauris eleifend est et turpis. Duis id erat...</p>
      </div>
    </section>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <section class="pill tabs">
      <ul class="tab-nav">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
      <div class="tab-content active">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus...</p>
      </div>
      <div class="tab-content">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat...</p>
      </div>
      <div class="tab-content">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti...</p>
      </div>
    </section>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <section class="vertical tabs">
      <ul class="tab-nav four columns"><li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
      <div class="tab-content eight columns">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus...</p>
      </div>
      <div class="tab-content eight columns active">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante...</p>
      </div>
      <div class="tab-content eight columns">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti...</p>
      </div>
    </section>
  </div>
</div>

Skip Links

Skip links allow you to vertically slide the window to the top of the page, to a px point or to a specific DOM element. There are two classes that can be used to define a skip link, .skiplink provides predefined styles while .skip can be used to create unstyled skip links. Either way, add a gumby-goto attribute containing a valid css selector, a px value or simply ‘top’.

There are three optional attributes you can use to alter 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.

Styled skiplinks support the same classes as buttons so get creative!

<p class="skiplink primary pretty"><a href="#" gumby-goto="#example-forms">Go to forms</a></p>
<p class="skiplink secondary pretty"><a href="#" gumby-goto="#example-btns">Go to buttons</a></p>

<!-- Requires easing plugin -->
<p>
  <a href="#" class="skip" gumby-easing="easeInOutQuad" gumby-goto="top" gumby-duration="2000">
  Unstyled skip to top in 2 seconds with custom easing!</a>
</p>

Toggles & Switches

Toggles and Switches provide a unique method for writing rich front end functionality into your applications without the need to write any JavaScript. We realised that a large amount of JavaScript is written to simply add and remove classes from DOM elements in order to trigger CSS animations. This seems a waste of boilerplate JavaScript code, written over and over again. We set out to improve this and as a result, Toggles and Switches were born.

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 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 Gumby's Toggles & Switches on the Digital Surgeons blog for more information.

<!-- toggle .active on #something on click -->
<a href="#" class="toggle" gumby-trigger="#something">Toggle</a>

<!-- toggle .active on #something and remove from .somethingelse and vice versa -->
<a href="#" class="toggle" gumby-trigger="#something | .somethingelse">Toggle</a>

<!-- add .active to #something and remove from .somethingelse -->
<a href="#" class="switch" gumby-trigger="#something | .somethingelse">Switch</a>

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

<!-- toggle .active on .selector and remove from .another and vice versa -->
<!-- onmouseover and onmouseout will trigger the interaction  -->
<a href="#" class="toggle" gumby-trigger=".selector | .another" gumby-on="mouseover mouseout">Toggle</a>

Drawers

Gumby 2 comes with styles to assist you in creating awesome drawers using toggles or switches. 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="fourteen 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="seven columns">
    <div class="drawer" id="drawer2">
      <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2>
    </div>
  </div>
  <div class="seven columns">
    <div class="drawer" id="drawer3">
      <h2><a href="http://www.digitalsurgeons.com">Digital Surgeons</a></h2>
    </div>
  </div>
</div>

Intrinsic Ratio Video Embed

Your coding hand is way strong. Keep the aspect ratio of your video embeds in line by adding class="video" to your video's container. If you're not embedding a plain ole' mp4, and prefer to use a service like YouTube, we've included a special class for YouTube embeds! Try it out by adding class="youtube video" to your video's container. This class compensates for the height of their video transport, targets the iframe that YouTube adds to your site, and harmonizes all of it with your video's aspect ratio — on every screen.

Supported Video Types

• YouTube (.youtube)
• Vimeo (.vimeo)
• Twitch.tv (.twitch)

<div class="row">
  <div class="seven columns">
    <article class="youtube video">
      <iframe width="460"
                 height="315"
                 src="http://www.youtube.com/embed/ebYN0chFJp8"
                 frameborder="0"
                 allowfullscreen>
      </iframe>
    </article>
  </div>
  <div class="seven columns">
    <article class="vimeo video">
      <iframe width="460"
                 height="315"
                 src="http://player.vimeo.com/video/54561300"
                 frameborder="0"
                 webkitAllowFullScreen
                 mozallowfullscreen
                 allowFullScreen>
      </iframe>
    </article>
  </div>
</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="fourteen 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>

Fixed Positions

The gumby-fixed attribute can be applied to any element in order to fix it to the screen and release again at certain points. The fixed value can be specified as px value, a css selector or the string 'top'. If a selector is specified, a class of .fixed will be toggled on the element when the result of the selector reaches the top of the window. If 'top' is specified then the .fixed class will be toggled as the element itself reaches the top of the window and if a px value is specified the .fixed class will be toggled when the window scroll offset reaches that value. All offset calculations are made relative to the window, unless another css selector is specified in gumby-holder.

An 'unfix' point can be specified by splitting two values with a pipe in the gumby-fixed attribute. All the same value types are supported and when the value is reached the .fixed class will be removed.

As fixed elements are relative to the window, the appearance of your beautiful elements may be altered as the .fixed class is toggled. Extend this class in your CSS to account for appearance changes.

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

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

<!-- will be fixed/unfixed as it reaches top of window
     end class toggled as it reaches 500px -->
<div gumby-fixed="top" gumby-end="500">Fix me</div>

<!-- will be fixed/unfixed at 250px scroll offset
     end class toggled when #some-element reached
     custom holder specified -->
<div gumby-fixed="250" gumby-end="#some-element" gumby-holder="#parent">Fix me</div>

Responsive Images

New in Gumby 2 is something we call "pretty pictures" internally. What they are is a set of classes that you can apply to quickly give the images on your site a fashion makeover. Quickly create circular profile photos, give photos rounded edges, a basic white frame, or a polaroid look. To sexify your images, simply use class="[shape] image". Available shapes are circle, rounded, photo, and polaroid.

<div class="row">
  <div class="five columns image circle">
    <img src="/img/img_silence_demo.jpg"/>
  </div>
  <div class="two columns image circle">
    <img src="/img/img_silence_demo.jpg"/>
  </div>
</div>
<div class="row">
  <div class="four columns image rounded">
    <img src="/img/img_silence_demo.jpg"/>
  </div>
  <div class="four columns image photo">
    <img src="/img/img_silence_demo.jpg"/>
  </div>
  <div class="four columns image polaroid photo">
    <img src="/img/img_silence_demo.jpg"/>
  </div>
</div>

Retina Images

Since Apple introduced the retina display we’ve had to change the way we design and build for the web, serving up responsive images for different device resolutions. Gumby 2 makes this easy for you. If you include a high resolution image in the same directory as your regular image with the suffix @2x, applying the attribute gumby-retina to your <img> will ensure the higher resolution image is served up on retina displays.

Check this image src on a retina display.

<img src="/img/gumby_mainlogo.png" gumby-retina />

Icons

Gumby 2 has an awesome set of icons for you to use in your web projects. We’ve completely integrated entypo icons into the Gumby Framework. In Gumby 2, you have access to over 260 beautiful icons. Adding them is as simple as attaching a class to an element.

<i class="icon-note"></i>
<i class="icon-heart"></i>
<i class="icon-flag"></i>
<i class="icon-github"></i>