gumbyframework / gumby Goto Github PK

A Flexible, Responsive CSS Framework - Powered by Sass

CSS 66.62% JavaScript 9.30% Ruby 1.05% HTML 23.02%

gumby's Introduction

Unfortunately Digital Surgeons has decided to retire Gumby Framework in order to focus our efforts on making other awesome things for the web. Please feel free to continue to use the framework, however development has ceased. If you are interested in inheriting the project please get in touch!

Gumby Framework

Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit.

Full documentation can be found at http://gumbyframework.com.

More information, including our changelog, can be found in the Wiki.

Our Google Plus Community is rapidly growing, we recommend heading over there with any questions you may have or to geek out and discuss the framework and rwd in general.

Gumby is developed with love by your friends at Digital Surgeons.

Gumby has a few dependencies. Big thank you to the innovative geniuses behind these awesome technologies.

Sass - Nathan Weizenbaum
Compass - Chris Eppstein
Modular Scale - Scott Kellum Note: Please use modular scale 1.0.6, 2.x has not been integrated yet
FitText - Paravel
jQuery
Modernizr

MIT Open Source License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

gumby's People

Contributors

Stargazers

Watchers

Forkers

tomlewek anasjaber theanubhav dmaffioletti bminaise bryansattler paulreed79 schobiwan adrienne ckaranja girikudlur wordpressdev joker-x liluxdev itay101 avocadesign kmikzjh michaeldarius adamrights blainejoubert heitzke yashilanka danvitoriano janniconl faaksa sikancil bizzdrean brenothales imdeany baxevanis rolka kodiacc scottbrimberry medasm rdolgushin jafferhaider hecbuma udezekene danzkusuma bakyaraj saadj55 cascalheira hiroakip mzarallop joshteng paulovera cron64 hengzhang-pro nivijah cph101280 milworm jackthe5nack joyrenee wing5wong afriquelle arcteryx jamesrockford marquinteran gismmo vipankumar87 jvertido romaaa nickkita bfay 331smblk pntrivedy mateuslopesbh elliottpayne richardsweeney brettahale shipow atmshop pelonpelon xlnt-webdesign ojno malachaifrazier marvinkhristianzamora paragrakibe dealice sqlwang purecolordesigns lnatus lickasha keepswimmingproductions web-ventures jmsteinmetz marlncpe getmanzooronline githubber rafaalves daveeed mpechjr primaapriansyah adoweb drhachmann rohandop sergiarevalo mattics frankaguilar socialnerdia

gumby's Issues

how can you edit the masthead image?

i have no clue!

Semantic Grids Problems

Did you test semantic grid cause it does not work at all:
@include row(); - Undefined mixing 'row'
And i find nothing about mixin row or grid in _grid.scss

winXP,IE8 & Latest Modernizr Issues

Gumby 2 doesn't load Modernizr under windows XP with internet explorer 8.

Toggle Menu not working in IE 10

Hello guys - great work! I chose Gumby after looking pretty thoroughly at Foundation, Bootstrap, and others - mainly because Gumby is cleaner and just plain prettier than the rest :)

I'm on a Win8 Pro type tablet (the Samsung 12 inch with full Windows 8, not the RT version) - and I've found that the toggle menu on your homepage, as well as when you implement the Gumby CSS and JS found here on GitHub - doesn't work. If you resize the window, the little menu button shows up and all, but when you click it, nothing happens. If you keep clicking it, it finally works - but it's like you have to click 5 times, and even then it seems like a crapshoot whether the menu opens or not.

With Chrome, it works fine.

I realize people will not really be resizing it to that size on Windows, but people sometimes use multiple windows, so they may resize my site - and I just didn't want it to not be working in that case. Since the ResponsiveNav project I was using before Gumby http://responsive-nav.com/ works fine on my Win tablet, I thought maybe I would post this here as perhaps there is something a bit glitch in there.

Thanks again for all the hard work, this 'work at home' mom up in Alaska really appreciates it, my app will be much better for it :)

sass/style.scss (Line 224 of sass/ui/_forms.scss: Undefined variable: "$entypo-icon-cancel-circled".)

This error occurred while trying to run 'compass compile'

How do I fix this?

Mobile styling

I haven't been able to find any documentation on mobile-specific styling, nor figure out where to include mobile styling. Does documentation exist? If not can you point me to the place to include this styling? Thanks.

Drawers and Mobile devices?

I'll preface this by saying I'm a bit new to more advanced jQuery/Javascript, but is the .drawer functionality supported on handheld devices? I'm including jQuery mobile in my code, but I'm getting no response from anything that has a click event to open a drawer. Thus far I've tried with iOS devices in both Chrome and Safari.

Any insights would be much appreciated.

Image border error

I have a row of six images in divs referencing the classes "two columns image photo".
It works really well, except when I resize the browser window. From a width of 697px to 800px, the border will increase in width, but not the image. I have attached a screenshot to illustrate this (I tested it in Chrome and Firefox).
I'm fairly new to this, and it's not really a major issue to me, but I was just interested to find out the cause.
At first I thought it might be because the image was square, but now that I come to think of it, I doubt it, as the height is adjusted automatically when resizing.

Navbar dropdown menu items on Android Chrome

Hey guys, please test a navbar with a dropdown on the latest version of Google Chrome on Android (I'm testing on an HTC OneX running the latest Android and Chrome). Issues that I'm seeing:

If a dropdown is followed by other top-level menu items, tapping an item in the dropdown closes the dropdown and the tap event is fired on the top-level menu item that appears in its place.
Similarly, if the dropdown is the last item in the menu, tapping an item in the dropdown doesn't do anything (the href of the menu item is not loaded).

Note that this is working fine on Android's stock browser and on iOS Safari.

Include modal dialogs

Hello,
I think Gumby needs modal dialog system to be complete, no ?

why not include a system like JQuery Modal (https://github.com/kylefox/jquery-modal)

stupid me, i broke the fonts

been working late last night, somehow i broke the Open Sans font. it's been half an hour so far without any clue as to what i did wrong.. any idea?

"gumby-trigger" causes validation error

"Attribute gumby-trigger not allowed on element a at this point."
the javascript trigger attribute causes markup errors (http://validator.w3.org/):

not an expert but attributes like data-trigger dont throw this error. any reason for using a custom one?

Grid displayer using sass mixin

I'm new to Gumby Framework and implementing it via sass. I was hoping is there any way to have grid displayer mixin for our grids

Toggle doesn't work with latest jQuery (1.9.1) on Android Chrome

The toggle (menu) button in the navigation doesn't fire its gumbyTap event on Chrome on Android if you use the latest version of jQuery. This was working fine on IE on a Windows Phone 7.5 handset. I wasn't able to test on an iPhone/iPod.

To reproduce, just change in the script tag in the bundled ui.html to load jQuery 1.9.1 and open page on an Android device. Updated code of ui.html pasted below.

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="humans.txt">

  <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

  <!-- Facebook Metadata /-->
  <meta property="fb:page_id" content="" />
  <meta property="og:image" content="" />
  <meta property="og:description" content=""/>
  <meta property="og:title" content=""/>

  <!-- Google+ Metadata /-->
  <meta itemprop="name" content="">
  <meta itemprop="description" content="">
  <meta itemprop="image" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
       However, there is a blank style.css in the css directory should you prefer -->
  <link rel="stylesheet" href="css/gumby.css">
  <!-- <link rel="stylesheet" href="css/style.css"> -->

  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<style>
  .btn,.drawer { margin-bottom:10px; }
  .drawer { text-align: center; }
  h1.lead { border-bottom: 1px dotted #ccc; margin-bottom: 30px; }
  h4.lead { margin-bottom:10px; }
  #icon_map ul li { font-size: 16px; }
  .smallify { font-size: 13px; }
</style>

<body>
  <div class="navbar" id="nav1">
    <div class="row">
      <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="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li>
                <a href="#">I HAVE STUFF NESTED UNDER ME</a>
                <div class="dropdown">
                  <ul>
                    <li><a href="">nested</a></li>
                    <li><a href="">nested</a></li>
                    <li><a href="">nested</a></li>
                    <li><a href="">nested</a></li>
                    <li><a href="">nested</a></li>
                  </ul>
                </div>
              </li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Customize</a></li>
        <li class="field"><input class="search input" type="search" placeholder="Search" /></li>
      </ul>
    </div>
  </div>
  <div class="navbar row" id="nav2">
    <a class="toggle" gumby-trigger="#nav2 > 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="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Customize</a></li>
        <li>
          <button class="medium pretty default btn">
            <a href="#">Download</a>
          </button>
        </li>
    </ul>
  </div>
  <div class="pretty navbar" gumby-fixed="top" id="nav3">
    <div class="row">
      <a class="toggle" gumby-trigger="#nav3 > .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="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Customize</a></li>
        <li class="field"><input class="search input" type="search" placeholder="Search" /></li>
      </ul>
    </div>
  </div>
  <div class="pretty navbar row" id="nav4">
    <a class="toggle" gumby-trigger="#nav4 > 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="#">About</a></li>
      <li>
        <a href="#">Documentation</a>
        <div class="dropdown">
          <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </div>
      </li>
      <li><a href="#">Customize</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="container">
    <div class="row">
      <h1 class="lead">Typography</h1>
      <div class="row">
        <p><a href="#" class="skip switch" gumby-trigger="#drawer1" gumby-goto="#drawers" gumby-duration="500" gumby-offset="-130">Skip to drawers and open top one</a></p>
        <h1>My Cool First Level Headline reaalllyyy long headline</h1>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <h2>My Cool Second Level Headline</h2>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <h3>My Cool Third Level Headline</h3>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <h4>My Cool Fourth Level Headline</h4>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <h5>My Cool Fifth Level Headline</h5>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
        <h6>My Cool Sixth Level Headline</h6>
        <p>This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!</p>
      </div>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">ul.disc</h4>
          <ul class="disc">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
              <ul class="disc">
                <li>Nested item</li>
                <li>Nested item</li>
              </ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
        <div class="four columns">
          <h4 class="lead">ul.circle</h4>
          <ul class="circle">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
              <ul class="disc">
                <li>Nested item</li>
                <li>Nested item</li>
              </ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
        <div class="four columns">
          <h4 class="lead">ul.square</h4>
          <ul class="square">
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
              <ul class="disc">
                <li>Nested item</li>
                <li>Nested item</li>
              </ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">ol</h4>
          <ol>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
              <ul class="disc">
                <li>Nested item</li>
                <li>Nested item</li>
              </ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ol>
        </div>
        <div class="eight columns">
          <h4 class="lead">Definition list</h4>
          <dl>
            <dt>Definition Term</dt>
            <dd>Definition text, you can add as many of these as you need. The line-height matches paragraphs.</dd>
          </dl>
        </div>
      </div>

    </div>
    <div class="row">
      <h1 class="lead">Buttons</h1>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">Sizes</h4>
          <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>
        </div>
        <div class="four columns">
          <h4 class="lead">Metro Style</h4>
          <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>
        <div class="four columns pretty">
          <h4 class="lead">Pretty Style</h4>
          <div class="pretty medium primary btn"><a href="#">Primary</a></div>
          <div class="pretty medium secondary btn"><a href="#">Secondary</a></div>
          <div class="pretty medium default btn"><a href="#">Default</a></div>
          <div class="pretty medium info btn"><a href="#">Info</a></div>
          <div class="pretty medium danger btn"><a href="#">Danger</a></div>
          <div class="pretty medium warning btn"><a href="#">Warning</a></div>
          <div class="pretty medium success btn"><a href="#">Success</a></div>
          <div class="medium info btn icon-left icon-user"><a href="#">Icon Left</a></div>
          <div class="medium default btn icon-right icon-camera"><a href="#">Icon Right</a></div>
          <div class="pretty medium default btn"><input type="submit" value="Submit" /></div>
          <div class="pretty medium info btn"><button>Button</button></div>
        </div>
      </div>
    </div>
    <div class="row">
      <h1 class="lead">Indicators</h1>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">Badges</h4>
          <li class="primary badge">2</li>
          <li class="secondary badge">2</li>
          <li class="default badge">2</li>
          <li class="info badge">2</li>
          <li class="danger badge">2</li>
          <li class="warning badge">2</li>
          <li class="success badge">2</li>
          <li class="light badge">2</li>
          <li class="dark badge">2</li>
        </div>
        <div class="four columns">
          <h4 class="lead">Labels</h4>
          <li class="primary label">Primary</li>
          <li class="secondary label">Secondary</li>
          <li class="default label">Default</li>
          <li class="info label">Info</li>
          <li class="danger label">Important</li>
          <li class="warning label">Warning</li>
          <li class="success label">Success</li>
          <li class="light label">Light</li>
          <li class="dark label">Dark</li>
        </div>
        <div class="four columns">
          <h4 class="lead">Alerts</h4>
          <li class="primary alert">KHAAAAAAAAAAAAAAANNNN!!!!</li>
          <li class="secondary alert">We are the Silence. And Silence will fall!</li>
          <li class="default alert">Fez's are cool.</li>
          <li class="info alert">Don't blink. Blink and you're dead.</li>
          <li class="danger alert">I’m sorry, Dave. I’m afraid I can’t do that.</li>
          <li class="warning alert">My spidey sense is tingling...</li>
          <li class="success alert">Great Success! Very nice!</li>
        </div>
      </div>
    </div>
    <div class="row">
      <h1 class="lead">Forms</h1>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">Text Inputs</h4>
          <form>
            <ul>
              <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>
              <li class="field"><input class="phone input" type="tel" placeholder="Telephone Number" /></li>
              <li class="field"><input class="numeric input" type="number" placeholder="Numeric input" /></li>
              <li class="field"><input class="search input" type="search" placeholder="Search input" /></li>
              <li class="field"><textarea class="input textarea" placeholder="Textarea" rows="3"></textarea></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>
          </form>
        </div>
        <div class="four columns">
          <h4 class="lead">Conjoined Inputs</h4>
          <form>
            <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="prepend append field">
                <span class="adjoined">$</span>
                <input class="wide text input" type="text" placeholder="Text input" />
                <span class="adjoined">.00</span>
              </li>
              <li class="prepend field">
                <div class="medium primary btn"><a href="#">Go</a></div>
                <input class="wide text input" type="text" placeholder="Text input" />
              </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>
              <li class="prepend append double field">
                <input class="text input" type="text" placeholder="Text input" />
                <input class="password input" type="password" placeholder="Password input" />
              </li>
            </ul>
          </form>
        </div>
        <div class="four columns">
          <h4 class="lead">Input Sizes</h4>
          <form>
            <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 text input" type="password" placeholder="wide input" />
                <input class="narrow text input" type="text" placeholder="narrow input" />
              </li>
              <li class="field">
                <input class="normal text input" type="text" placeholder="normal input" />
                <input class="normal text input" type="text" placeholder="normal input" />
              </li>
              <li class="field">
                <input class="narrow text input" type="text" placeholder="narrow input" />
                <input class="wide text input" type="text" placeholder="wide input" />
              </li>
              <li class="field">
                <input class="xnarrow text input" type="text" placeholder="xnarrow input" />
                <input class="xwide text input" type="text" placeholder="xwide input" />
              </li>
            </ul>
            <fieldset>
              <legend>Fieldset with legend</legend>
              <ul>
                <li class="field">
                  <label class="inline" for="text1">Label 1</label>
                  <input class="wide text input" name="text1" type="text" placeholder="wide input" />
                </li>
                <li class="field">
                  <label class="inline" for="text2">Label 2</label>
                  <input class="wide password input" name="text2" type="password" placeholder="wide input" />
                </li>
              </ul>
            </fieldset>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="four columns">
          <h4 class="lead">Picker (&lt;select&gt;)</h4>
          <form>
            <ul>
              <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>
          </form>
        </div>
        <div class="four columns">
          <h4 class="lead">Radio Buttons</h4>
          <form>
            <ul>
              <li class="field">
                <label class="radio checked" for="radio1">
                  <input name="radio" value="1" type="radio" id="radio1" checked="checked">
                  <span></span> Radio Button 1
                </label>
                <label class="radio" for="radio2">
                  <input name="radio" value="2" type="radio" id="radio2">
                  <span></span> Radio Button 2
                </label>
                <label class="radio" for="radio3">
                  <input name="radio" value="3" type="radio" id="radio3">
                  <span></span> Radio Button 3
                </label>
              </li>
            </ul>
          </form>
        </div>
        <div class="four columns">
          <h4 class="lead">Check Boxes</h4>
          <form>
            <ul>
              <li class="field">
                <label class="checkbox" for="checkbox1">
                  <input name="checkbox1" type="checkbox" id="checkbox1">
                  <span></span> Checkbox 1
                </label>
                <label class="checkbox" for="checkbox2">
                  <input name="checkbox2" type="checkbox" id="checkbox2">
                  <span></span> Checkbox 2
                </label>
                <label class="checkbox checked" for="checkbox3">
                  <input name="checkbox3" checked="checked" type="checkbox" id="checkbox3">
                  <span></span> Checkbox 3
                </label>
              </li>
            </ul>
          </form>
        </div>
      </div>
      <div class="row">
        <h1 class="lead">Tabs</h1>
        <div class="row">
          <div class="six columns">
            <section class="tabs">
              <h4 class="lead">Basic Tabs</h4>
              <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, 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.</p>
              </div>
              <div class="tab-content active">
                <p>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.</p>
              </div>
              <div class="tab-content">
                <p>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.</p>
                <p>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.</p>
                <div class="medium primary btn pull_left"><a href="">My cool button</a></div>
              </div>
            </section>
          </div>
          <div class="six columns">
            <section class="pill tabs">
              <h4 class="lead">Pill Tabs</h4>
              <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. 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.</p>
                <div class="medium primary btn pull_left"><a href="">My cool button</a></div>
              </div>
              <div class="tab-content">
                <p>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.</p>
              </div>
              <div class="tab-content">
                <p>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.</p>
                <p>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. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="row">
          <div class="eight columns">
            <section class="vertical tabs">
              <h4 class="lead">Vertical Tabs</h4>
              <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. 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.</p>
              </div>
              <div class="tab-content eight columns active">
                <p>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.</p>
                <div class="row">
                  <div class="medium primary btn six columns centered"><a href="">My cool button</a></div>
                </div>
              </div>
              <div class="tab-content eight columns">
                <p>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.</p>
                <p>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.</p>
              </div>
            </section>
          </div>
        </div>
      </div>
      <div class="row" id="drawers">
        <h1 class="lead">Drawers</h1>
        <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>
      </div>
      <div class="row">
        <h1 class="lead">Skip Links</h1>
        <div class="row">
          <div class="twelve columns">
            <div id="skiplink_1" style="position: relative;">
                <h4>First</h4>
                <p class="skiplink medium info"><a href="#" gumby-goto="#skiplink_2" gumby-offset="-60">Skip to second content</a></p>
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. <a href="#" class="skip" gumby-goto="#skiplink_2" gumby-offset="-60">Unstyled skip link</a>. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
            </div>
            <div id="skiplink_2" style="position: relative;">
                <h4>Second</h4>
                <p class="skiplink medium primary"><a href="#" gumby-goto="#skiplink_3" gumby-duration="2000" gumby-offset="-60">Skip to third content</a></p>
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
            </div>
            <div id="skiplink_3" style="position: relative;">
                <h4>Third</h4>
                <p class="skiplink medium secondary pretty"><a href="#" gumby-goto="#skiplink_1" gumby-offset="-60">Go back to first content</a></p>
                <p>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. <a href="#" class="skip" gumby-goto="#skiplink_1" gumby-offset="-60">Unstyled skip link</a>. Vestibulum non ante.</p>

                <p class="skiplink medium default">
                  <a href="#" gumby-goto="top"><i class="icon-up-open-big"></i> Top of page</a>
                </p>

                 <p class="skiplink medium default">
                  <a href="#" gumby-goto="240"><i class="icon-up-open-big"></i> Skip to 240px</a>
                </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <h1 class="lead">Images</h1>
        <div class="row">
          <div class="twelve columns">
            <div class="row">
              <div class="five columns image circle">
                <img src="img/img_silence_demo.jpg"/>
              </div>
              <div class="three 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 class="one 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>
          </div>
        </div>
      </div>
      <div class="row" id="tiles">
        <h1 class="lead">Tiles</h1>
        <div class="row">
          <div class="four columns">
            <h4 class="lead">2-up</h4>
            <ul class="two_up tiles">
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
            </ul>
          </div>
          <div class="four columns">
            <h4 class="lead">3-up</h4>
            <ul class="three_up tiles">
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
            </ul>
          </div>
          <div class="four columns">
            <h4 class="lead">4-up</h4>
            <ul class="four_up tiles">
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="four columns">
            <h4 class="lead">5-up</h4>
            <ul class="five_up tiles">
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
              <li class="rounded image"><img src="img/img_silence_demo.jpg"/></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row" id="video_stuff">
        <h1 class="lead">Intrinsic Ratio Video Embed</h1>
        <div class="row">
          <div class="six 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="six columns">
            <article class="vimeo video">
              <iframe src="http://player.vimeo.com/video/54561300" width="460" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            </article>
          </div>
        </div>
      </div>
      <div class="row" id="icon_map">
        <div class="row">
          <h1 class="lead">Icon Map</h1>
          <p>All icons are (class="icon-*")</p>
        </div>
        <ul class="row">
          <li class="two columns"><i class="icon-note"></i> note</li>
          <li class="two columns"><i class="icon-note-beamed"></i> note-beamed</li>
          <li class="two columns"><i class="icon-music"></i> music</li>
          <li class="two columns"><i class="icon-search"></i> search</li>
          <li class="two columns"><i class="icon-flashlight"></i> flashlight</li>
          <li class="two columns"><i class="icon-mail"></i> mail</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-heart"></i> heart</li>
          <li class="two columns"><i class="icon-heart-empty"></i> heart-empty</li>
          <li class="two columns"><i class="icon-star"></i> star</li>
          <li class="two columns"><i class="icon-star-empty"></i> star-empty</li>
          <li class="two columns"><i class="icon-user"></i> user</li>
          <li class="two columns"><i class="icon-users"></i> users</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-user-add"></i> user-add</li>
          <li class="two columns"><i class="icon-video"></i> video</li>
          <li class="two columns"><i class="icon-picture"></i> picture</li>
          <li class="two columns"><i class="icon-camera"></i> camera</li>
          <li class="two columns"><i class="icon-layout"></i> layout</li>
          <li class="two columns"><i class="icon-menu"></i> menu</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-check"></i> check</li>
          <li class="two columns"><i class="icon-cancel"></i> cancel</li>
          <li class="two columns"><i class="icon-cancel-circled"></i> cancel-circled</li>
          <li class="two columns"><i class="icon-cancel-squared"></i> cancel-square</li>
          <li class="two columns"><i class="icon-plus"></i> plus</li>
          <li class="two columns"><i class="icon-plus-circled"></i> plus-circled</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-plus-squared"></i> plus-squared</li>
          <li class="two columns"><i class="icon-minus"></i> minus</li>
          <li class="two columns"><i class="icon-minus-circled"></i> minus-circled</li>
          <li class="two columns"><i class="icon-minus-squared"></i> minus-square</li>
          <li class="two columns"><i class="icon-help"></i> help</li>
          <li class="two columns"><i class="icon-help-circled"></i> help-circled</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-info"></i> info</li>
          <li class="two columns"><i class="icon-info-circled"></i> info-circled</li>
          <li class="two columns"><i class="icon-back"></i> back</li>
          <li class="two columns"><i class="icon-home"></i> home</li>
          <li class="two columns"><i class="icon-link"></i> link</li>
          <li class="two columns"><i class="icon-attach"></i> attach</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-lock"></i> lock</li>
          <li class="two columns"><i class="icon-lock-open"></i> lock-open</li>
          <li class="two columns"><i class="icon-eye"></i> eye</li>
          <li class="two columns"><i class="icon-tag"></i> tag</li>
          <li class="two columns"><i class="icon-bookmark"></i> bookmark</li>
          <li class="two columns"><i class="icon-bookmarks"></i> bookmarks</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-flag"></i> flag</li>
          <li class="two columns"><i class="icon-thumbs-up"></i> thumbs-up</li>
          <li class="two columns"><i class="icon-thumbs-down"></i> thumbs-down</li>
          <li class="two columns"><i class="icon-download"></i> download</li>
          <li class="two columns"><i class="icon-upload"></i> upload</li>
          <li class="two columns"><i class="icon-upload-cloud"></i> upload-cloud</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-reply"></i> reply</li>
          <li class="two columns"><i class="icon-reply-all"></i> reply-all</li>
          <li class="two columns"><i class="icon-forward"></i> forward</li>
          <li class="two columns"><i class="icon-quote"></i> quote</li>
          <li class="two columns"><i class="icon-code"></i> code</li>
          <li class="two columns"><i class="icon-export"></i> export</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-pencil"></i> pencil</li>
          <li class="two columns"><i class="icon-feather"></i> feather</li>
          <li class="two columns"><i class="icon-print"></i> print</li>
          <li class="two columns"><i class="icon-retweet"></i> retweet</li>
          <li class="two columns"><i class="icon-keyboard"></i> keyboard</li>
          <li class="two columns"><i class="icon-comment"></i> comment</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-chat"></i> chat</li>
          <li class="two columns"><i class="icon-bell"></i> bell</li>
          <li class="two columns"><i class="icon-attention"></i> attention</li>
          <li class="two columns"><i class="icon-alert"></i>alert</li>
          <li class="two columns"><i class="icon-vcard"></i> vcard</li>
          <li class="two columns"><i class="icon-address"></i> address</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-location"></i> location</li>
          <li class="two columns"><i class="icon-map"></i> map</li>
          <li class="two columns"><i class="icon-direction"></i> direction</li>
          <li class="two columns"><i class="icon-compass"></i> compass</li>
          <li class="two columns"><i class="icon-cup"></i> cup</li>
          <li class="two columns"><i class="icon-trash"></i> trash</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-doc"></i> doc</li>
          <li class="two columns"><i class="icon-docs"></i> docs</li>
          <li class="two columns"><i class="icon-doc-landscape"></i> <span class="smallify">doc-landscape</span></li>
          <li class="two columns"><i class="icon-doc-text"></i> doc-text</li>
          <li class="two columns"><i class="icon-doc-text-inv"></i> doc-text-inv</li>
          <li class="two columns"><i class="icon-newspaper"></i> newspaper</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-book"></i> book</li>
          <li class="two columns"><i class="icon-book-open"></i> book-open</li>
          <li class="two columns"><i class="icon-folder"></i> folder</li>
          <li class="two columns"><i class="icon-archive"></i> archive</li>
          <li class="two columns"><i class="icon-box"></i> box</li>
          <li class="two columns"><i class="icon-rss"></i> rss</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-phone"></i> phone</li>
          <li class="two columns"><i class="icon-cog"></i> cog</li>
          <li class="two columns"><i class="icon-tools"></i> tools</li>
          <li class="two columns"><i class="icon-share"></i> share</li>
          <li class="two columns"><i class="icon-shareable"></i> shareable</li>
          <li class="two columns"><i class="icon-basket"></i> basket</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-bag"></i> bag</li>
          <li class="two columns"><i class="icon-calendar"></i> calendar</li>
          <li class="two columns"><i class="icon-login"></i> login</li>
          <li class="two columns"><i class="icon-logout"></i> logout</li>
          <li class="two columns"><i class="icon-mic"></i> mic</li>
          <li class="two columns"><i class="icon-mute"></i> mute</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-sound"></i> sound</li>
          <li class="two columns"><i class="icon-volume"></i> volume</li>
          <li class="two columns"><i class="icon-clock"></i> clock</li>
          <li class="two columns"><i class="icon-hourglass"></i> hourglass</li>
          <li class="two columns"><i class="icon-lamp"></i> lamp</li>
          <li class="two columns"><i class="icon-light-down"></i> light-down</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-light-up"></i> light-up</li>
          <li class="two columns"><i class="icon-adjust"></i> adjust</li>
          <li class="two columns"><i class="icon-block"></i> block</li>
          <li class="two columns"><i class="icon-resize-full"></i> resize-full</li>
          <li class="two columns"><i class="icon-resize-small"></i> resize-small</li>
          <li class="two columns"><i class="icon-popup"></i> popup</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-publish"></i> publish</li>
          <li class="two columns"><i class="icon-window"></i> window</li>
          <li class="two columns"><i class="icon-arrow-combo"></i> arrow-combo</li>
          <li class="two columns"><i class="icon-down-circled"></i> down-circled</li>
          <li class="two columns"><i class="icon-left-circled"></i> left-circled</li>
          <li class="two columns"><i class="icon-right-circled"></i> right-circled</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-up-circled"></i> up-circled</li>
          <li class="two columns"><i class="icon-up-open"></i> up-open</li>
          <li class="two columns"><i class="icon-down-open"></i> down-open</li>
          <li class="two columns"><i class="icon-left-open"></i> left-open</li>
          <li class="two columns"><i class="icon-right-open"></i> right-open</li>
          <li class="two columns"><i class="icon-up-open-mini"></i> up-open-mini</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-down-open-mini"></i> <span class="smallify">down-open-mini</span></li>
          <li class="two columns"><i class="icon-left-open-mini"></i> left-open-mini</li>
          <li class="two columns"><i class="icon-right-open-mini"></i> <span class="smallify">right-open-mini</span></li>
          <li class="two columns"><i class="icon-up-open-big"></i> up-open-big</li>
          <li class="two columns"><i class="icon-down-open-big"></i> <span class="smallify">down-open-big</span></li>
          <li class="two columns"><i class="icon-left-open-big"></i> left-open-big</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-right-open-big"></i> <span class="smallify">right-open-big</span></li>
          <li class="two columns"><i class="icon-down"></i> down</li>
          <li class="two columns"><i class="icon-arrow-left"></i> arrow-left</li>
          <li class="two columns"><i class="icon-arrow-right"></i> arrow-right</li>
          <li class="two columns"><i class="icon-up"></i> up</li>
          <li class="two columns"><i class="icon-up-dir"></i> up-dir</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-down-dir"></i> down-dir</li>
          <li class="two columns"><i class="icon-left-dir"></i> left-dir</li>
          <li class="two columns"><i class="icon-right-dir"></i> right-dir</li>
          <li class="two columns"><i class="icon-up-bold"></i> up-bold</li>
          <li class="two columns"><i class="icon-down-bold"></i> down-bold</li>
          <li class="two columns"><i class="icon-left-bold"></i> left-bold</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-right-bold"></i> right-bold</li>
          <li class="two columns"><i class="icon-up-thin"></i> up-thin</li>
          <li class="two columns"><i class="icon-down-thin"></i> down-thin</li>
          <li class="two columns"><i class="icon-left-thin"></i> left-thin</li>
          <li class="two columns"><i class="icon-right-thin"></i> right-thin</li>
          <li class="two columns"><i class="icon-ccw"></i> ccw</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-cw"></i> cw</li>
          <li class="two columns"><i class="icon-arrows-ccw"></i> arrows-ccw</li>
          <li class="two columns"><i class="icon-level-down"></i> level-down</li>
          <li class="two columns"><i class="icon-level-up"></i> level-up</li>
          <li class="two columns"><i class="icon-shuffle"></i> shuffle</li>
          <li class="two columns"><i class="icon-loop"></i> loop</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-switch"></i> switch</li>
          <li class="two columns"><i class="icon-play"></i> play</li>
          <li class="two columns"><i class="icon-stop"></i> stop</li>
          <li class="two columns"><i class="icon-pause"></i> pause</li>
          <li class="two columns"><i class="icon-record"></i> record</li>
          <li class="two columns"><i class="icon-to-end"></i> to-end</li>
        </ul>

        <ul class="row">
          <li class="two columns"><i class="icon-to-start"></i> to-start</li>
          <li class="two columns"><i class="icon-fast-forward"></i> fast-forward</li>
          <li class="two columns"><i class="icon-fast-backward"></i> fast-backward</li>
          <li class="two columns"><i class="icon-progress-0"></i> progress-0</li>
          <li class="two columns"><i class="icon-progress-1"></i> progress-1</li>
          <li class="two columns"><i class="icon-progress-2"></i> progress-2</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-progress-3"></i> progress-3</li>
          <li class="two columns"><i class="icon-target"></i> target</li>
          <li class="two columns"><i class="icon-palette"></i> palette</li>
          <li class="two columns"><i class="icon-list"></i> list</li>
          <li class="two columns"><i class="icon-list-add"></i> list-add</li>
          <li class="two columns"><i class="icon-signal"></i> signal</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-trophy"></i> trophy</li>
          <li class="two columns"><i class="icon-battery"></i> battery</li>
          <li class="two columns"><i class="icon-back-in-time"></i> back-in-time</li>
          <li class="two columns"><i class="icon-monitor"></i> monitor</li>
          <li class="two columns"><i class="icon-mobile"></i> mobile</li>
          <li class="two columns"><i class="icon-network"></i> network</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-cd"></i> cd</li>
          <li class="two columns"><i class="icon-inbox"></i> inbox</li>
          <li class="two columns"><i class="icon-install"></i> install</li>
          <li class="two columns"><i class="icon-globe"></i> globe</li>
          <li class="two columns"><i class="icon-cloud"></i> cloud</li>
          <li class="two columns"><i class="icon-cloud-thunder"></i> <span class="smallify">cloud-thunder</span></li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-flash"></i> flash</li>
          <li class="two columns"><i class="icon-moon"></i> moon</li>
          <li class="two columns"><i class="icon-flight"></i> flight</li>
          <li class="two columns"><i class="icon-paper-plane"></i> paper-plane</li>
          <li class="two columns"><i class="icon-leaf"></i> leaf</li>
          <li class="two columns"><i class="icon-lifebuoy"></i> lifebuoy</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-mouse"></i> mouse</li>
          <li class="two columns"><i class="icon-briefcase"></i> briefcase</li>
          <li class="two columns"><i class="icon-suitcase"></i> suitcase</li>
          <li class="two columns"><i class="icon-dot"></i> dot</li>
          <li class="two columns"><i class="icon-dot-2"></i> dot-2</li>
          <li class="two columns"><i class="icon-dot-3"></i> dot-3</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-brush"></i> brush</li>
          <li class="two columns"><i class="icon-magnet"></i> magnet</li>
          <li class="two columns"><i class="icon-infinity"></i> infinity</li>
          <li class="two columns"><i class="icon-erase"></i> erase</li>
          <li class="two columns"><i class="icon-chart-pie"></i> chart-pie</li>
          <li class="two columns"><i class="icon-chart-line"></i> chart-line</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-chart-bar"></i> chart-bar</li>
          <li class="two columns"><i class="icon-chart-area"></i> chart-area</li>
          <li class="two columns"><i class="icon-tape"></i> tape</li>
          <li class="two columns"><i class="icon-graduation-cap"></i> <span class="smallify">graduation-cap</span></li>
          <li class="two columns"><i class="icon-language"></i> language</li>
          <li class="two columns"><i class="icon-ticket"></i> ticket</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-water"></i> water</li>
          <li class="two columns"><i class="icon-droplet"></i> droplet</li>
          <li class="two columns"><i class="icon-air"></i> air</li>
          <li class="two columns"><i class="icon-credit-card"></i> credit-card</li>
          <li class="two columns"><i class="icon-floppy"></i> floppy</li>
          <li class="two columns"><i class="icon-clipboard"></i> clipboard</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-megaphone"></i> megaphone</li>
          <li class="two columns"><i class="icon-database"></i> database</li>
          <li class="two columns"><i class="icon-drive"></i> drive</li>
          <li class="two columns"><i class="icon-bucket"></i> bucket</li>
          <li class="two columns"><i class="icon-thermometer"></i> thermometer</li>
          <li class="two columns"><i class="icon-key"></i> key</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-flow-cascade"></i> flow-cascade</li>
          <li class="two columns"><i class="icon-flow-branch"></i> flow-branch</li>
          <li class="two columns"><i class="icon-flow-tree"></i> flow-tree</li>
          <li class="two columns"><i class="icon-flow-line"></i> flow-line</li>
          <li class="two columns"><i class="icon-flow-parallel"></i> flow-parallel</li>
          <li class="two columns"><i class="icon-rocket"></i> rocket</li>
        </ul>

        <ul class="row">
          <li class="two columns"><i class="icon-gauge"></i> gauge</li>
          <li class="two columns"><i class="icon-traffic-cone"></i> traffic-cone</li>
          <li class="two columns"><i class="icon-cc"></i> cc</li>
          <li class="two columns"><i class="icon-cc-by"></i> cc-by</li>
          <li class="two columns"><i class="icon-cc-nc"></i> cc-nc</li>
          <li class="two columns"><i class="icon-cc-nc-eu"></i> cc-nc-eu</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-cc-nc-jp"></i> cc-nc-jp</li>
          <li class="two columns"><i class="icon-cc-sa"></i> cc-sa</li>
          <li class="two columns"><i class="icon-cc-nd"></i> cc-nd</li>
          <li class="two columns"><i class="icon-cc-pd"></i> cc-pd</li>
          <li class="two columns"><i class="icon-cc-zero"></i> cc-zero</li>
          <li class="two columns"><i class="icon-cc-share"></i> cc-share</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-cc-remix"></i> cc-remix</li>
          <li class="two columns"><i class="icon-github"></i> github</li>
          <li class="two columns"><i class="icon-github-circled"></i> github-circled</li>
          <li class="two columns"><i class="icon-flickr"></i> flickr</li>
          <li class="two columns"><i class="icon-flickr-circled"></i> flickr-circled</li>
          <li class="two columns"><i class="icon-vimeo"></i> vimeo</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-vimeo-circled"></i> vimeo-circled</li>
          <li class="two columns"><i class="icon-gplus"></i> gplus</li>
          <li class="two columns"><i class="icon-gplus-circled"></i> gplus-circled</li>
          <li class="two columns"><i class="icon-pinterest"></i> pinterest</li>
          <li class="two columns"><i class="icon-pinterest-circled"></i> <span class="smallify">pinterest-circled</span></li>
          <li class="two columns"><i class="icon-tumblr"></i> tumblr</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-tumblr-circled"></i> <span class="smallify">tumblr-circled</span></li>
          <li class="two columns"><i class="icon-linkedin"></i> linkedin</li>
          <li class="two columns"><i class="icon-linkedin-circled"></i> <span class="smallify">linkedin-circled</span></li>
          <li class="two columns"><i class="icon-dribbble"></i> dribbble</li>
          <li class="two columns"><i class="icon-dribbble-circled"></i> <span class="smallify">dribbble-circled</span></li>
          <li class="two columns"><i class="icon-facebook"></i> facebook</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-facebook-circled"></i> <span class="smallify">facebook-circled</span></li>
          <li class="two columns"><i class="icon-facebook-squared"></i> <span style="font-size: 12px">facebook-squared</span></li>
          <li class="two columns"><i class="icon-twitter"></i> twitter</li>
          <li class="two columns"><i class="icon-twitter-circled"></i> twitter-circled</li>
          <li class="two columns"><i class="icon-lastfm"></i> lastfm</li>
          <li class="two columns"><i class="icon-lastfm-circled"></i> lastfm-circled</li>
        </ul>
        <ul class="row">
          <li class="two columns"><i class="icon-rdio"></i> rdio</li>
          <li class="two columns"><i class="icon-rdio-circled"></i> rdio-circled</li>
          <li class="two columns"><i class="icon-spotify"></i> spotify</li>

Navbar Dropndown doesn't work on iPad Safari

Hello,
I just download demo from gumbyframework and test in Safari on iPad. It's seem dropdown doesn't work. But in Chrome on iPad it's work well. I test with ui.html which downloaded from gumbyframework. Any suggestion? Thank you

Feature Request - Support Font Stacks in .scss files

Right now I can only specify a single font name, e.g. Open Sans as the default font. If I use a font stack, say "Helvetica Neue", Helvetica, Arial, sans-serif, it gets wrapped in single quotes.

How about removing the single quotes across all .scss files and leaving it up to the $font-family variable in the _settings.scss file to use quotes?

If this solution is acceptable, I could contribute with a pull-request, but you guys will need to update the Customizer webpage to encapsulate font names in single quotes.

Tabs on /demos don't work in iOS 6 Safari

Hi There,

Should the tabs work on the demos page using iOS 6?

Have noticed they work on a computer with the page width reduced but when viewing on an iPhone, clicking a tab jumps the user back to the top of the page.

This is true for tab pills and vertical tabs.

Cheers

Ben

LoadError on line 1038 of org/jruby/RubyKernel.java: no such file to load -- modular-scale

I'm not sure whether to post this with Scout or here with Gumby, but I thought maybe someone using Gumby has also used Scout. I get the above error when first using Scout with Gumby.

Problem with prepended input boxes

Prepend input boxes do not work correctly if you don't assign a width (narrow, normal, wide, etc)

<div class="row">
    <ul class="seven columns">
        <li class="prepend field"><span class="adjoined">@</span><input class="text input" type="text" placeholder="Text input"></li>
        <li class="field"><input class="email input" type="email" placeholder="Email input"></li>
    </ul>
</div>

Problem with buttons (a tag next to input)

Check out the screenshot below and you can see that the Submit button is 1px lower than the Primary button. Ideally these should align..

<div class="seven columns">
  <h4 class="lead">Metro Style</h4>
  <div class="medium primary btn"><a href="#">Primary</a></div>
  <div class="medium secondary btn"><input type="submit" value="Submit"></div>
</div>

Javascript - Function Undefined issue viewing website in iPad Gen 1

Having an issue with viewing a site I am creating using Gumby in Mobile Safari on iPad Gen 1 (Mobile Safari 5.1).

Not sure where the problem is happening as Mobile Safari 5.1 debugging options are very limited! The effect is produced for me when using SkipLinks or Fixed classes.

IE 8 Javascript errors

Hi,

I am getting some annoying javascript errors when using skiplinks, I get the same errors on your javascript page.

footer at the bottom

You can place (force) the footer or any other element in the bottom of the page? If an article or content is short footer is compressed at the top. Thanks

Row above navbar causing issue

I've been working on a Gumby project and noticed that when a row is added above the navbar row a 1px horizontal line (maybe an element's border?) displays when the mobile breakpoint is reached. For the life of me I can't figure out where this is being generated from and how to edit it. Is this behavior how the navbar class is designed to work?

I downloaded a fresh copy and started from the included ui.html file and ran into the same problem. You can view that example here, where the line goes through Typography: http://quitethespecimen.com/gumby/

Thanks in advance.

Gumby & Require.js

Please consider making the Gumby JS compatible with AMD loaders!

This should be a relatively simple process, and it would help those of us who are trying to switch to workflows that rely on require.js and similar things!

Search fields reset icon

I just noticed this: http://d.pr/i/duDe
The reset icon is not displaying correctly (in chrome at least).
In Safari that icon does not show up.

Google Chrome error

Google Chrome v25.0.1364.152 m

Error on all pages site:

Uncaught ReferenceError: Gumby is not defined
global.min.js:1

Cannot get radio and checkbox value in POST method

If using these markup:

<div class="field">
  <label class="checkbox checked" for="check1">
    <input name="checkbox[]" id="check1" value="1" type="checkbox"  checked="checked">
    <span></span> Checkbox 1
  </label>
</div>

We cannot get the value of the checkbox[] field in POST array.

Labels breaking text layout

As such, labels are not usable in the middle of a text. Maybe I'm not aware of how to use them but I believe they should be usable almost anywhere.

I mean:

<p>
some text to say 
something <li class="danger label">important</li>. 
Followed by some other text.
</p>

Will break the text on two lines and I think that's not what's intended.

Am I right?

BUG - Weird bug with nav on iPhone (Chrome & Safari)

Ok this is one weird bug...

If I have a nav bar on the two following pages then the drop down will work instantly (close to anyway!).
http://localhost/
http://localhost/one/

Now if I add anything else...
http://localhost/one/two/
http://localhost/one/two/three/

It will hesitate for about 10 seconds before the menu will start to work.

Navigation dropdown displays incorrectly if there is only one sub-item

If there is only one subitem on a menu, the sizing of the item is messed up.

You can duplicate this easily by modifying ui.html and removing all but one list item under the Documentation menu.

Problem with 'image photo' border when using tiles

Screenshot to show you the problem.

Implement text classes

would be great to have classes such as text-success, text-error to allow styling of text without needing to use alerts/write our own.
suggest style for each of the current alerts (primary,secondary, important... etc)

demo is not looking good in chrome/android

when i do scrolling it is ok

Feature Request - Visibility Helper Classes

How about adding helper classes for hiding/showing elements based on media queries. Like the hidden-desktop, hidden-tablet, hidden-phone classes in Bootstrap (code pasted below).

.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

Blank White Box Rendering Issue on some Android Stock Browsers

Ran into an issue where on HTC Sense stock browsers a white box appears overlay elements at the top of the window, although this appears to be a rendering issue. This issue was traced to position:relative in the _grid.css for .column and .columns.

We used position:inherit in the moblie .column, .columns css on line 258 of _grid.scss

  .column, .columns {
    width: auto !important;
    float: none;
    margin-left: 0;
    margin-right: 0;
    position: inherit;
  }

Which seems to fix the issue, and has no apparent effects elsewhere on other mobile browsers at this time...

Remove Modular Scale Dependency

Gumby.scss currently depends on modular scale and cannot compile unless the appropriate library is passed to the Sass compiler.

It would be far, far better if Gumby were a completely independent framework, with no dependencies on anything other than Sass itself.

I develop CodeKit (http://incident57.com/codekit) and several of my users are wondering why Gumby doesn't just compile right out of the box.

Scrolling allowed when displaying a modal, bad behavior on iPad

When a modal is displayed, I can still scroll. This is wrong on iPad, since the modal is adjusted to the screen boundaries and the black layer moves with the content. The layer is repositionned only when the scroll ends, which is awkward.

A solution would be to add a body { overflow: hidden } when firing up the modal and reverting when dismissed, or giving the ability to do so via an optional parameter.

.navbar ul.active max-height issue

In the media query for 768px viewport, the .navbar ul.active selector is given a max-height of 600px. This is a seemingly arbitrary value. I have a large menu (with sub-menus) and some of my content gets truncated because of this max height. I have had to manually increase it in my copy of _navbar.scss.

Can the default of 600px be increased so that developers wouldn't need to increase it manually? What's the rationale behind giving it a 600px value?

Thanks!

Mixin Compass

Hello,
sometimes you use mixin of Compass and sometimes not.

For example, in _forms.scss with border-radius, or in _navbar.scss with box-shadow.

It's a choice of browser or a forget ?

http://gumbyframework.com/ spelling issue

I didn't see the source for the gumbyframework.com site in the repo, but there is a small spelling issue is says "Need halp?" instead of "Need help?"

Huge delay when opening ui.html locally.

I'm evaluating Gumby, and cloned the repo to my dev+design PC.
Opening ui.html in Chrome causes a huge ~23 second delay and failed download of a Google font family. This happens constantly. Hitting Ctrl+R or Shift+F5 to bypass the browser cache doesn't rid off the problem.
See screenshot : http://oi40.tinypic.com/3492lu0.jpg

I suspect that this has something similar to do as with the overzealous security measures when playing Flash video from a html page on your local hard drive. But because this is not a Flash video, I can't point my browser's Flash player to the Adobe site to whitelist the html file or the whole folder.

Any ideas, apart from not using Google fonts ?
Because this is not workable when I have to wait an extra 23 seconds after each refresh.

(I usually do as much of the prototyping, designing, and coding as possible into static pages.And only at the end chop this up in WP format and glue the pieces back together with PHP on the server in a VMware VM.)

Versioning

Hello,
it's possible to have number of version for Gumby ? Just to be able to follow your updates and be sure to have last version

<major>.<minor>.<patch>

And constructed with the following guidelines ( http://semver.org/ ) :

Breaking backwards compatibility bumps the major
New additions without breaking backwards compatibility bumps the minor
Bug fixes and misc changes bump the patch

How to get the Drawers to work.

Im not sure what to do to get the drawers to function. What JS do i need to connect? or what do i need to do.
I have no code to show for it yet

Menu not behaving correctly on iphone

Hi folks,
I've obviously done something incorrectly. The menu works as expected when resized small in a browser window. However when I try to use it on iOs it's behaving strangely. ie. A submenu item displays as expected, but when clicked, its parent menu closes and whatever toplevel link is being touched (due to the menu closing), opens.

The work in progress is here:

http://access.robotfish.co.uk/~cotsolut/wp/

for example try to access the 'Operator CPC' link under 'Training'.

Any advice appreciated,

Thanks,

UPDATE: adjusting the max-height on '.navbar ul.active' and '.navbar ul li:hover .dropdown ul' appears to have solved the issue.

ps. gumby is fantastic :)

Byron :)

It's Sass, not SASS.

Change background img

Trying to change the background to a img and then assign a white background just to a specific row

cannot get it to do so help pease!

Navigation breakpoint issue on Portrait iPad Safari

Isn't the Navigation element supposed to go into mobile mode (show the toggle menu-bar icon) on a portrait iPad?

Because it doesn't do that for me (I'm testing with the gumbyframework.com site). However, while testing it in a desktop browser using The Responsinator, it shows that the Navigation should be in mobile mode. Click the link below and scroll to the portrait iPad section: http://www.responsinator.com/?url=http%3A%2F%2Fgumbyframework.com%2Fcustomize

As a workaround, I'm downloading Gumby2 using the customize page and changing the Portrait Tablet breakpoint to 769, instead of the default 768. Perhaps the default should be changed?

Multi-level nav bar, WP8 IE

When using a multi-nav menu bar, viewing the site with IE on WP8 (tested on my Lumia 920, both a test site and the actual Gumby site) if you click on a main link it does not open up the subnav. You have to hold down, which eventually opens up the subnav but also the 'right click' menu items for the phone system as well.

See video for what I am referring to: http://telly.com/5BKJKY

I have not been able to pinpoint why exactly it does this, appears to work correctly with iOS Safari and with IE 9 (maybe 8?) at my work.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.