Design Styles

Metro style and semi-flat design are all the rage nowadays. Gumby 2’s 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 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 buttons allow for a ton of flexibility when building out user interfaces. Gumby includes the ability to change button size, color, ui, add or remove rounded corners, as well as adding icons to the left or right of your button text.

To get started with buttons, you'll need an <a> tag wrapped in a <div>.

<div class="medium primary btn">
  <a href="#">Primary</a>
</div>

The above code creates a medium size, primary colored button. Predefined sizes you can use include: xsmall, small, norm, med, large, larger, xlarge, xxlarge, xxxlarge, reallybig, tremendous, absurd. These are defined in var/_settings.scss file. Colors are located in the same file.

You can mix and match classes to create smaller, or alternate versions of buttons found throught your project. For example, mix a secondary class and a small class on a button and check out the results...

More Button Examples

<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>

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!

Badges

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
<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>

Labels

  • Primary
  • Secondary
  • Default
  • Info
  • Important
  • Warning
  • Success
  • Light
  • Dark
<div class="four columns">
  <li class="danger label">Important</li>
  <li class="warning label">Warning</li>
  <li class="success label">Success</li>
</div>

Alerts

  • KHAAAAAAAAAAAAAAANNNN!!!!
  • We are the Silence. And Silence will fall!
  • Fezzes are cool.
  • Don't blink. Blink and you're dead.
  • I’m sorry, Dave. I’m afraid I can’t do that.
  • My spidey sense is tingling...
  • Great Success! Very nice!
<div class="four columns">
  <li class="primary alert">Sharknado is a great movie</li>
  <li class="secondary alert">You should watch Sharknado</li>
  <li class="danger alert">Sharknado is a marvel of modern cinema</li>
  <li class="success alert">Sharks + Tornados = Serious Threat</li>
</div>

Forms

Forms have always been tricky. With Gumby v2 we aim to make forms a little less of a headache.

Basic Input Element

All input elements have to be wrapped in some element (div, li, p, etc.) with the class field. The <input> tag itself needs to have the class input. That's all you need!

<div class="field">
  <input class="input" type="text" placeholder="Text input" />
</div>

Other Elements

Each input should be nested within .field, which essentially creates spacing between form field rows. All HTML5 inputs are supported, simply add the .input class for regular inputs as well as .textarea or a set number of rows for textareas.

<ul>
  <li class="field">
    <input class="input" type="text" placeholder="Text input" />
  </li>
  <li class="field">
    <input class="input" type="email" placeholder="Email input" />
  </li>
  <li class="field">
    <input class="input" type="password" placeholder="Password input" />
  </li>
  <li class="field">
    <textarea class="input textarea" placeholder="Textarea"></textarea>
  </li>
</ul>

Field Sizes

You can also change the size of the field by assigning a size class to that element.

<ul>
  <li class="field"><input class="xxwide text input" type="text" placeholder="xxwide input" /></li>
  <li class="field">
    <input class="xwide email input" type="email" placeholder="xwide input" />
    <input class="xnarrow text input" type="text" placeholder="xnarrow input" />
  </li>
  <li class="field">
    <input class="wide input" type="password" placeholder="wide input" />
    <input class="narrow input" type="text" placeholder="narrow input" />
  </li>
</ul>

Validation

For true validation, you'll need to consult the Javascript docs to get set up with form validation. However, if you just want to style your fields, you're in the right place.

All you need to do is add a success, warning, danger or similar class to the parent of the input element to have it receive that styling.

For example:

<ul>
  <li class="field success">
    <input class="input" type="text" placeholder="Text input" />
  </li>
  <li class="field warning">
    <input class="input" type="email" placeholder="Email input" />
  </li>
  <li class="field danger">
    <input class="input" type="password" placeholder="Password input" />
  </li>
</ul>

Remember though, validation needs to be set up with Javascript in order for it to actually "validate" user input. Read up more about that over in the Validation docs.

Conjoined Inputs

To visually attach an input to a button, label, or second input add .append, or .prepend to the .field tag, then add adjoined to the element that you want to attach to the input. .append will put the .adjoined element to the right of the input, .prepend pill put the element to the left.

<ul>
  <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="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>

Fancy Selects

To build a fancy select that retains the default behavior of selects on mobile devices, create a .field element just as you would when creating an input. Within your .field create a new element and assign it the .picker class. Then nest a traditional <select> element with child <option>'s and values.

<li class="field">
  <div class="picker">
    <select>
      <option value="#" disabled>Favorite Doctor…</option>
      <option>Colin Baker</option>
      <option>Sylvester McCoy</option>
      <option>Paul McGann</option>
      <option>Christopher Eccleston</option>
      <option>David Tennant</option>
      <option>Matt Smith</option>
    </select>
  </div>
</li>

Fieldsets & Legends

Default styles are in place for <fieldset> and <legend>.

Fieldset with legend
<fieldset>
  <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>

Radio Buttons & Checkboxes

We also included some nicer-than-system checkboxes and radio buttons for your use. All you need to do is add a "radio" class to radio buttons and "checkbox" class to checkbox elements. Simple!

It's important to note that an empty span is left inside the

Radio Buttons

<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>

Checkboxes

<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>

Navigation

Your site will soon be flooded with thousands of visitors all lacking a map of where all your hilarious/informative content is. Don't leave them stranded without a map. Gumby's navigation bar is attractive and functional. It also comes in a variety of flavors.

We built the navigation bar to be easily editable and flexible. Sometimes, a client will want the nav bar pinned. Other times you may want to have it with just a few nav items. But what's this? A wild change order appeared! Change order used "Add another nav item"! It's not very effective… With Gumby's nav bar partnered with display:table and nav items set to display:table-cell all of your nav items will fit right in with the others.

To implement a navbar, you'll need one of two things: a <nav> element or a <div> element with the class of navbar. Next, simply add a <ul> with all of your navigation items to it. Presto! Navigation perfection! But wait there's more!

Add a <div> with the class dropdown inside one of the <li>'s you just wrote. Create another <ul> with more of your nav items and instant dropdown!

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > 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>

Pinned Navigation

With Gumby's Fixed Position component you too can have a fixed/pinned navbar! Add the attribute gumby-fixed="top" to your navbar element. This will fix the navbar when it reaches the top of the screen. There's much more to learn on this over in the Fixed Position docs.

Mobile Navigation

You may have noticed in the example above the mobile navigation we snuck in there. The mobile nav is only shown on, yes you guessed it, mobile devices. To utilize this feature add an anchor into your <nav> element with class="toggle" gumby-trigger=".navbar > ul". You may have to update your gumby-trigger attribute to reflect where your navbar lives. Don't forget an icon in there to assist users. You can do this by adding <i class="icon-menu"></i> to the anchor element we just created.

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. By default the navigation will be hidden when a menu item is selected which is useful for single page applications and navigational anchor links. However, it can be disabled by adding a gumby-persist attribute to the .navbar element.

Tabs

Just like everything else so far in Gumby, adding tabs is a pretty simple task. The entire tabs area, both content and the navigation are contained in a <section> element with the class of tabs. To form the navigation (the tabs themselves), simply create an unordered list with class tab-nav containing linked items like so:

<ul class="tab-nav">
    <li><a href="#">First Tab</a></li>
    <li class="active"> <a href="#">Second Tab</a></li>
    <li><a href="#">Third Tab</a></li>
</ul>

We're almost there! Now you need content. For every tab you want, there needs to be a corresponding content area. Here's what that looks like:

<div class="tab-content">
    <p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
    <p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
    <p>Don't forget about me! I'm tab 3!</p>
</div>

You'll notice that we haven't added any HTML cues to which tabs reveal which content. This is because Gumby takes care of the work for you and associates the links to the content in the same order. The first tab — "First Tab" — will show the first content — "Here's my first piece of content" — and so on…

If you want to set a particular tab as selected on load, you will need to add the class of active to both the list element representing the tab, and the element containing the content. In the above example, you can see that the second list item and the second tab-content element have the active class. Therefore on page load the second content will show right away.

Make sure that both tabs and tab-content elements are within the <section class="tabs"> element or Gumby won't be able to associate them to eachother. Here is the code assembled together followed by its live version:

<section class="tabs">

    <ul class="tab-nav">
        <li><a href="#">First Tab</a></li>
        <li class="active"> <a href="#">Second Tab</a></li>
        <li><a href="#">Third Tab</a></li>
    </ul>

    <div class="tab-content">
        <p>Here's the first piece of content</p>
    </div>
    <div class="tab-content active">
        <p>My tab is active so I'll show up first! Inb4 tab 3!</p>
    </div>
    <div class="tab-content">
        <p>Don't forget about me! I'm tab 3!</p>
    </div>

</section>

Here's the first piece of content!

My tab is active so I'll show up first! Inb4 tab 3!

Don't forget about me! I'm tab 3!

Vertical Tabs

Prefer vertical tabs? No problem. Just add a class of vertical to the parent element.

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

Pill Tabs

Prefer pill tabs? Simply add a class of pill to the parent element.

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Tables

Put down your pitchforks, tables actually have a legitimate use. Plus, Gumby makes them pretty so how could you hate them?

It turns out that tables are styled by default in Gumby. Don't forget that you have a few style options that can be added by appending class names to the <table> element. Here's default and rounded table styles:

One last option you have for tables is zebra striping. It enhances readability and makes it much easier for readers to focus on a single row. To add this feature simply append a striped class to the table element. Yep, it's really that easy.

Sass also makes changing table colors and zebra-striping easy. Head back to the _settings.scss file where you can change the color variables for the table elements.

Default Table

Header Header
Lorem ipsum This is a slightly longer block of content to show how the cells will wrap when necessary

Rounded Table

Header Header
Lorem ipsum This is a slightly longer block of content to show how the cells will wrap when necessary

Striped and Rounded Table

Table Header Table Header
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et dignissim magna, id molestie dui.
<table>
	<thead>
		<tr>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lorem ipsum</td>
			<td>This is a slightly longer block of content to show how the cells will wrap when necessary</td>
		</tr>
	</tbody>
</table>
<table class="rounded">
	<thead>
		<tr>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lorem ipsum</td>
			<td>This is a slightly longer block of content to show how the cells will wrap when necessary</td>
		</tr>
	</tbody>
</table>

Tooltips

Adding CSS tooltips to your element(s) is a super easy and requires no javascript. Just give your element the ttip class and a data-tooltip attribute with the contents of the tooltip.

In the settings.scss file you will find a few options for customizing your tooltips: minimum width, background-color, position, and alignment. By default we are passing the $primary-color variable into the tooltips as an example. They also have the 'pretty' style from our buttons, but you can disable that in the settings if you wish. Note: tooltips may misbehave if used directly on elements which have :before or :after pseudos already.

	<div class="image photo ttip" data-tooltip="Silence will fall.” alt="">
		<img src="/img/img_silence_demo.jpg" alt="" width="150">
	</div>

Icons

What would a framework be without a beautiful set of icons? Entypo enters from stage left. Entypo is a set of over 250 masterfully crafted icons. Shut up and tell me how to put these in my project! All icons need only the class "icon-" plus the name of the icon.

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

You simply have to try it.