Gumby Components Tutorial

Gumby Components

Content

1 Buttons
2. Badges
3. Label
4. Alerts
5. Form
6. Navigation
7. Table
7. Tooltips

Buttons

Gumby provides different types of button styles that allow to change button size, color, ui, corners and adding icons to the left or right of the button text.

Code

<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 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 class="xlarge primary btn"><a href="#">Primary</a></div>
<div class="large primary btn"><a href="#">Primary</a></div>
<div class="medium primary btn"><a href="#">Primary</a></div>
<div class="small primary btn"><a href="#">Primary</a></div>

Output

Badges

Gumby framework provides badges for indicating new or unread items (messages) by adding badge class.

Code

<div class="row">
<div class="eight columns">
<ul> 
  <li class="primary badge">2</li>
  <li class="secondary badge">5</li>
  <li class="default badge">4</li>
  <li class="info badge">3</li>
  <li class="warning columns">6</li>
  <li class="success badge">7</li>
  <li class="secondary badge">1</li>
  <li class="danger badge">9</li>
  <li class="dark badge">3</li>
  <li class="light badge">3</li>
</ul>
</div>
</div>

Output

Label

Gumby offers labels with different colors (primary, secondary, default, info, danger, warning and success) and different sizes (xlarge, large, medium and small).

Code

<div class="row">
  <div class="nine columns">
    <ul>
        <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">Danger</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>
     </ul>
  </div>  
</div>

Output

Primary
Secondary
Default
Info
Danger
Warning
Success
Light
Dark

Alerts

It gives contextual feedback messages for user actions with flexible alert messages. You can add a alert message that notices when something was happened in your data using different color for success, warning and danger.

Code

<div class="row">
        <div class="ten columns">
            <ul>
                <li class="primary alert">This is primary alert message.</li>
                <li class="secondary alert">Well done! You successfully read this important alert message.</li>
                <li class="default alert">This is alert message.</li>
                <li class="info alert">Your message is not sent. Send again.</li>
                <li class="danger alert">1 Important message.</li>
                <li class="warning alert">This is warning message.</li>
                <li class="success alert">Your message is successfully sent.</li>
            </ul>
        </div>
    </div>

Output

This is primary alert message.
Well done! You successfully read this important alert message.
This is alert message.
Your message is not sent. Send again.
1 Important message.
This is warning message.
Your message is successfully sent.

Form

Gumby framework allows user to create easy and powerful form layout. We do anything by using form style and grids.

Code

<div class="row"> 
   <div class="six columns">
     <li class="field">
	   <label class="inline" for="text1">First Name</label>
  	   <input class="input" type="text" placeholder="First Name" />
	 </li>
   </div>
   <div class="six columns">
     <li class="field success">
 	   <label class="inline" for="text1">Last Name</label>
  	   <input class="input" type="text" placeholder="Last Name" />
	 </li>
   </div>
</div>

<div class="row">
  
   <div class="six columns">
     <div class="field warning">
       <label class="inline" for="text1">Last Name</label>
  	   <input class="input" type="email" placeholder="Email ID" />
	 </div>
   </div>


   <div class="six columns">  
     <div class="field danger">
       <label class="inline" for="text1">Password</label>
  	   <input class="input" type="password" placeholder="password" />
	 </div>
   </div>
</div>

<div class="row">
 <div class="six columns">
    <label class="inline" for="text1">Payment</label>
  <li class="prepend append field">
    <span class="adjoined">@Bodylt;/span>
    <input class="xwide text input" type="text" placeholder="Amount" />
    <div class="medium primary btn"><a href="#">Go</a></div>
  </li>

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

<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>
  <label class="radio" for="radio3">
    <input name="radio" id="radio3" value="3" type="radio">
    <span></span> Radio Button 3
  </label>
</li>
<div class="row"> 
   <div class="twelve columns">
     <div class="field" style="width:700px;">
	   <label class="inline" for="text1">First Name</label>
  	   <input class="input" type="text" placeholder="First Name" />
	 </div>

     <div class="field success" style="width:700px;">
 	   <label class="inline" for="text1">Last Name</label>
  	   <input class="input" type="text" placeholder="Last Name" />
	 </div>

     <div class="field warning" style="width:700px;">
       <label class="inline" for="text1">Email ID</label>
  	   <input class="input" type="email" placeholder="Email ID" />
	 </div>

   <div class="field danger" style="width:700px;">
      <label class="inline" for="text1">Password</label>
      <input class="input" type="password" placeholder="password" />
   </div>

<label class="inline" for="text1">Payment</label>
  <div class="prepend append field" style="width:750px;">
    <span class="adjoined">@Bodylt;/span>
    <input class="xwide text input" type="text" placeholder="Amount" />
    <div class="medium primary btn"><a href="#">Go</a></div>
  </div>

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

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

  <label class="radio" for="radio3">
    <input name="radio" id="radio3" value="3" type="radio">
    <span></span> Radio Button 3
  </label>
</div>

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

  <label class="checkbox" for="check2">
    <input name="checkbox[]" id="check2" value="2" type="checkbox">
    <span></span> Checkbox 2
  </label>

  <label class="checkbox" for="check3">
    <input name="checkbox[]" id="check3" value="3" type="checkbox">
    <span></span> Checkbox 3
  </label>

  <label class="checkbox" for="check4">
    <input name="checkbox[]" id="check4" value="4" type="checkbox">
    <span></span> Checkbox 4
  </label>
</div>

</div>
</div>

Output

First Name

Last Name

Email ID

Password

Payment

Radio Button 1 Radio Button 2 Radio Button 3

Checkbox 1 Checkbox 2 Checkbox 3 Checkbox 4

Navigation

Nav bar in gumby framework is created by a <nav> element or <div> element with the class of nav bar. Next add all your navigation items <ul> list. It comprises tabs and pills.

Code

 
<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>
  <h3 class="four columns logo">
    <a href="#">
      Gumby Framework
    </a>
  </h3>
  <ul class="eight columns">
  	<li><a href="#">Home</a></li>
    <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>
	<li><a href="#">Contact US</a></li>
  </ul>
</div>

Output

1. Tabs

Code

<section class="tabs">

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

    <div class="tab-content active">
        <p>Here's the first piece of content</p>
    </div>
    <div class="tab-content">
        <p>Don't forget about me! I'm tab 2!</p>
    </div>
    <div class="tab-content">
        <p>Don't forget about me! I'm tab 3!</p>
    </div>

</section>

Output

Here's the first piece of content

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

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

2. Pills

Code


<section class="pill 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>

Output

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!

Table

Gumby provides table with different styles that makes more easier for readers to focus on a single row.

Code

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

Output

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

Gumby provides tooltips for text and images using data-tooltip class without javascript. We can change tooltips width, background-color, position, and alignment.

Code

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

Output

Next Lesson > Gumby JS Components