Template Shortcodes


  • Bonus Material

    Just a little thank you for purchasing DevSoft.


    Gift Card Mockups

    Blanks included.


    Software Box Mockups

    Blanks included.


    Badges

    Blanks included.

  • Icon Font Glyphs

    Custom icon sets that are stored in a handy web font and are coded to be more accessible. A couple lines of CSS and the right markup will get you going in no time.


    Write Your Markup

    We've used an i for icon elements. You just simply apply the appropriate classes that match the icon you want to use. Here's what the markup looks like:

    <i class="icon-[icon]"></i>
    
  • Alrt Boxes

    Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information.


    Many styles many boxes

    The syntax is extremely simple and like everything else, easy to customize.

    Info

    Alert Message Info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Success!

    Alert Message Success. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Warning!

    Alert Message Warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Error!

    Alert Message Error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Settings!

    Alert Message Settings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Maintenace Mode!

    Alert Message Maintenance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Tip!

    Alert Message Tip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!

    Special!

    Alert Message Special. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    Write Your Markup
    <div class="alert-box info"><span></span>
    <p><strong>Info</strong></p>
    Alert Message Info. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box success"><span></span>
    <p><strong>Success!</strong></p>
    Alert Message Success. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    <div class="alert-box warning"><span></span>
    <p><strong>Warning!</strong></p>
    Alert Message Warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box error"><span></span>
    <p><strong>Error!</strong></p>
    Alert Message Error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box settings"><span></span>
    <p><strong>Settings!</strong></p>
    Alert Message Settings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box maintenance"><span></span>
    <p><strong>Maintenace Mode!</strong></p>
    Alert Message Maintenance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box tip"><span></span>
    <p><strong>Tip!</strong></p>
    Alert Message Tip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
    
    <div class="alert-box special"><span></span>
    <p><strong>Special!</strong></p>
    Alert Message Special. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vulputate a quam!
    </div>
    
  • Labels

    Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.


    Styles & Shapes

    The syntax is simple, just a span element with a class of .label.

    Types

    • Normal Label
    • Secondary Label
    • Success Label
    • Alert Label

    Styles

    • Regular Label
    • Radius Label
    • Round Label
    Write Your Markup
    
    <!-- Types -->
    <ul class="side-nav">
    <li><span class="label">Normal Label</span></li>
    <li><span class="secondary label">Secondary Label</span></li>
    <li><span class="success label">Success Label</span></li>
    <li><span class="alert label">Alert Label</span></li>
    </ul>
    
    <!-- Styles -->
    <ul class="side-nav">
    <li><span class="label">Regular Label</span></li>
    <li><span class="radius label">Radius Label</span></li>
    <li><span class="round label">Round Label</span></li>
    </ul>
    
  • Tooltips

    Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element.


    Examples

    By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

    • Tool Tip Bottom
    • Tool Tip on Top
    • Tool Tip on Left
    • Tool Tip on Right
      • The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element. On a small device, the tooltips are full width and bottom aligned.

        Write Your Markup
        <span class="has-tip" data-width="210" title="Bottom and the default position.">"tip-bottom"</span>
        <span class="has-tip tip-top noradius" data-width="210" title="Top and not rounded!">"tip-top"</span>
        <span class="has-tip tip-left" data-width="90" title="left!">"tip-left"</span>
        <span class="has-tip tip-right" data-width="90" title="right!">"tip-right"</span>
        
  • Progress Bars

    Add simple progress bars to your page using our simple pattern.


    Styles

    You can use .round or .radius to add some rounded borders. If you want to change the color, use the same classes as we use for the buttons: .primary, .secondary, .alert, .success. If you want to control the width of your progress bar, simply use the grid classes .one, .two, .three, etc. You can control the width of the fill meter by setting the width of the span element.

    Write Your Markup
    
    <div class="progress six"><span class="meter"></span></div>
    <div class="radius progress success eight"><span class="meter"></span></div>
    <div class="nice round progress alert ten"><span class="meter"></span></div>
    <div class="nice secondary progress"><span class="meter"></span></div>
    
  • Pricing Tables

    If you're making a rockin' marketing site for a subscription-based product you are likely in need of a pricing table.


    Different Colors

    You can create one by creating a class="pricing-table", using the grid to position and size. Inside you can include: class="title", class="price", class="desc", class="bullet-item", class="cta-button" to create the table, here's an example:

    • Standard
    • $99.99
    • Content...
    • 1 Database
    • 5GB Storage
    • 20 Users
    • One license allows use on one (1) single commercial project.
    • Buy it Now »
    • Standard
    • $99.99
    • Content...
    • 1 Database
    • 5GB Storage
    • 20 Users
    • One time fee, unlimited personal and commercial usage.
    • Buy it Now »

    You also have the option to mix and match gradients within the pricing tables. There are 8 gradients to choose from. The gradients can be applied to any element. Just call colorgrad example:

    class="redgrad"
    or
    class="blackgrad"
    .

    Write Your Markup
    <ul class="pricing-table">
      <li class="title">Standard</li>
      <li class="price">$99.99</li>
      <li class="description">Content...</li>
      <li class="bullet-item">1 Database</li>
      <li class="bullet-item">5GB Storage</li>
      <li class="bullet-item">20 Users</li>
      <li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a></li>
    </ul>
    
  • Flex Video

    You can now display your videos in a responsive way that works perfect on mobile devices! You can embed any type if video like YouTube, Vimeo & more.


    Yeah its also Responsive

    If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

    4:3 Aspect

    Widescreen Video

    Vimeo + Widescreen!

    Write Your Markup
    
    <div class="flex-video">
      <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="flex-video widescreen">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="flex-video widescreen vimeo">
      <iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    
  • Tabs

    Tabs are very versatile both as organization and navigational constructs. Tabs in the markup specified below are already hooked up & no extra work required.


    Simple Tabs

    Tabs are made of two objects: a dl/ul object containing the tabs themselves, and a ul object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL/LI. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of #tabnameTab. Check out these examples.

    Simple Tab 1
    Simple Tab 2
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
    Write Your Markup
    
    <dl class="tabs">
      <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
      <dd><a href="#simple2">Simple Tab 2</a></dd>
      <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
    </dl>
    <ul class="tabs-content">
      <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
      <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
      <li id="simple3Tab">This is simple tab 3s content.</li>
    </ul>
    

    Contained Tabs

    Contained tabs have a simple added class of "contained" on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs. You can still use standard column sizes inside a tab element.

    You'll also notice in this example that a dt element can serve to label groups of tabs. You can alternatively use an li.section-title to do the same thing.

    Title 1
    Simple Tab 1
    Simple Tab 2
    Title 1
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
    Write Your Markup
    
    <dl class="tabs contained">
      <dt>Title 1</dt>
      <dd class="active"><a href="#simpleContained1">Simple Tab 1</a></dd>
      <dd class="hide-for-small"><a href="#simpleContained2">Simple Tab 2</a></dd>
      <dt class="hide-for-small">Title 1</dt>
      <dd class="hide-for-small"><a href="#simpleContained3">Simple Tab 3</a></dd>
    </dl>
    <ul class="tabs-content contained">
      <li class="active" id="simpleContained1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
      <li id="simpleContained2Tab">This is simple tab 2s content. Now you see it!</li>
      <li id="simpleContained3Tab">This is simple tab 3s content.</li>
    </ul>
    

    Tab Sizing

    If you want your tabs to run the full width of their container evenly, you can add class of .two-up, .three-up, .four-up, and .five-up to them.

    Even Tab 1
    Even Tab 2
    Even Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
    Write Your Markup
    
    <dl class="tabs three-up">
      <dd class="active"><a href="#evenTab1">Even Tab 1</a></dd>
      <dd><a href="#evenTab2">Even Tab 2</a></dd>
      <dd><a href="#evenTab3">Even Tab 3</a></dd>
    </dl>
    
    <dl class="tabs five-up">
      <dd class="active"><a href="#evenTab4">Tab 4</a></dd>
      <dd><a href="#evenTab5">Tab 5</a></dd>
      <dd><a href="#evenTab6">Tab 6</a></dd>
      <dd><a href="#evenTab7">Tab 7</a></dd>
      <dd><a href="#evenTab8">Tab 8</a></dd>
    </dl>
    

    Pill Tabs

    If you need an alternate view for tabs (especially for filters, or similar), you can use pill-style tabs.

    Pill Tab 1
    Pill Tab 2
    Pill Tab 3
    Write Your Markup
    
    <dl class="tabs pill">
      <dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
      <dd><a href="#pillTab2">Pill Tab 2</a></dd>
      <dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
    </dl>
    

    Vertical Tabs

    You can also use tabs in a vertical configuration by adding a class of 'vertical' to the dl/ul element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.

    Vertical Tab 1
    Vertical Tab 2
    Vertical Tab 3
    Write Your Markup
    <dl class="vertical tabs">
      <dd class="active"><a href="#vertical1">Vertical Tab 1</a></dd>
      <dd><a href="#vertical2">Vertical Tab 2</a></dd>
      <dd><a href="#vertical3">Vertical Tab 3</a></dd>
    </dl>
    
    Mobile Tabs

    If you want a standard, horizontal tab group to act vertical on small devices, adding a class of "mobile" to a standard (not vertical) tab group will switch them to full width nav bars on small screens.

  • Accordians

    Basic Accordian

    Accordions are similar to tabs as a way to selectively show a single panel of content at a time.

    • Accordion Panel 1

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • Accordion Panel 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • Accordion Panel 3

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Write Your Markup
    <ul class="accordion">
      <li class="active">
        <div class="title">
          <h5>Accordion Panel 1</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
      <li>
        <div class="title">
          <h5>Accordion Panel 2</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
      <li>
        <div class="title">
          <h5>Accordion Panel 3</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
    </ul>
    
  • Buttons

    Buttons are a convenient tool when it comes to more traditional actions. To that end, we included a lot of easy to use button styles that you can customize or override to fit your needs.


    Shapes Colors & Types

    These are the basics.

    Write Your Markup
    
    <!-- Sizes -->
    <a class="tiny button" href="#">Tiny</a>
    <a class="small button" href="#">Small</a>
    <a class="button" href="#">Medium</a>
    <a class="large button" href="#">Large</a>
    
    <!-- Types -->
    <a class="button" href="#">Normal</a>
    <a class="secondary button" href="#">Secondary</a>
    <a class="success button" href="#">Success</a>
    <a class="alert button" href="#">Alert</a>
    
    <!-- Styles -->
    <a class="button" href="#">Square</a>
    <a class="radius button" href="#">Radius</a>
    <a class="round button" href="#">Round</a>
    
    <!-- Inputs and Submits -->
    <button class="button">Form Button</button>
    <input type="submit" class="button" value="Input Submit Button" />
    
    Button Bars

    Awesome for navigations, toolbars or login/register bars!

    Write Your Markup
    <!-- Basic Button Groups -->
    <ul class="button-group radius">
      <li><a href="#" class="button radius">Button 1</a></li>
      <li><a href="#" class="button radius">Button 2</a></li>
      <li><a href="#" class="button radius">Button 3</a></li>
    </ul>
    
    <!-- Even Button Groups -->
    <ul class="button-group even three-up">
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
    </ul>
    
    <!-- Button Bar -->
    <div class="button-bar">
      <ul class="button-group">
        <li><a href="#" class="button">Button 1</a></li>
        <li><a href="#" class="button">Button 2</a></li>
        <li><a href="#" class="button">Button 3</a></li>
      </ul>
    
      <ul class="button-group">
        <li><a href="#" class="button">Button 1</a></li>
        <li><a href="#" class="button">Button 2</a></li>
        <li><a href="#" class="button">Button 3</a></li>
      </ul>
    </div>
    
    Normal Button Dropdown

    Write Your Markup
    
    <div href="#" class="large alert button split dropdown">
      <a href="#">Split Button</a>
        <span></span>
      <ul>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Another Dropdown Item</a></li>
        <li class="divider"></li>
        <li><a href="#">Last Item</a></li>
      </ul>
    </div>
    <!--
      Notice that in a split button, the <span> is the dropdown
      affordance and the main anchor is the primary button action.
    -->
    
  • Images

    If you are going to use an image as an anchor, we've got you covered.


    Hover Style

    All you've gotta do is wrap an a.th around your image and viola! The buttons also have this effect when pressed (active).

    Write Your Markup
    <a href="#" class="th"><img src="images/bonus/img_hover.jpg"></a>
    
    Framed Style

    Nice framed shadow effect!

    Write Your Markup
    <img class="framed" src="images/bonus/img_hover.jpg">
    
  • Tables

    Tables are also fully responsive on any screen size.


    Basic Table Data

    Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).

    Table Header Table Header Table Header Table Header
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
    Write Your Markup
    
    <table class="twelve">
      <thead>
        <tr>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
    
  • Forms

    Simply easy to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the grid means you can do basically anything you need.


    Basic Form

    Here's an example of a form layout controlled with rows and columns.

    Write Your Markup
    <!-- Row Layout for forms -->
    <form>
      <label>This is a label.</label>
      <input type="text" placeholder="Standard Input" />
      <label>Address</label>
      <input type="text" class="twelve" placeholder="Street" />
      <div class="row">
        <div class="six columns">
          <input type="text" placeholder="City" />
        </div>
        <div class="three columns">
          <input type="text" placeholder="State" />
        </div>
        <div class="three columns">
          <input type="text" placeholder="ZIP" />
        </div>
      </div>
      <textarea placeholder="Message"></textarea>
    </form>
    
    Inline Labels

    Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of .right to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of .inline will have it vertically center against an input.

    Write Your Markup
    <!-- Right aligned and inline labels -->
    <form>
      <div class="row">
        <div class="two mobile-one columns">
          <label class="right inline">Address Name:</label>
        </div>
        <div class="ten mobile-three columns">
          <input type="text" placeholder="e.g. Home" class="eight" />
        </div>
      </div>
      <div class="row">
        <div class="two mobile-one columns">
          <label class="right inline">City:</label>
        </div>
        <div class="ten mobile-three columns">
          <input type="text" class="eight" />
        </div>
      </div>
      <div class="row">
        <div class="two mobile-one columns">
          <label class="right inline">ZIP:</label>
        </div>
        <div class="ten mobile-three columns">
          <input type="text" class="three" />
        </div>
      </div>
    </form>
    
    Fieldsets

    Simple elements that can contain all or part of a form to create better division.

    Fieldset Name
    Write Your Markup
    <form>
      <fieldset>
    
        <legend>Fieldset Name</legend>
    
        <label>This is a label.</label>
        <input type="text" placeholder="Standard Input" />
    
        <label>Address</label>
        <input type="text" />
        <input type="text" class="six" />
    
      </fieldset>
    </form>
    
    Custom Form Elements

    With the patterns described above, we're able to easily construct customizable radio buttons and checkboxes.

    Write Your Markup
    
    <form class="custom">
    
      <!-- Custom Radio -->
      <div class="row">
        <div class="four columns">
          <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
          <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
          <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
        </div>
        <div class="four columns">
          <label for="radio4"><input name="radio2" type="radio" id="radio4"> Radio Button 1</label>
          <label for="radio5"><input name="radio2" CHECKED type="radio" id="radio5"> Radio Button 2</label>
          <label for="radio6"><input name="radio2" type="radio" id="radio6"> Radio Button 3</label>
        </div>
    
        <!-- Custom Checkbox -->
        <div class="four columns">
          <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
          <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
          <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
        </div>
      </div>
    
      <!-- Custom Selects -->
      <label for="customDropdown">Dropdown Label</label>
      <select style="display:none;" id="customDropdown">
        <option SELECTED>This is a dropdown</option>
        <option>This is another option</option>
        <option>Look, a third option</option>
      </select>
      <div class="custom dropdown">
        <a href="#" class="current">
          This is a dropdown
        </a>
        <a href="#" class="selector"></a>
        <ul>
          <li>This is a dropdown</li>
          <li>This is another option</li>
          <li>Look, a third option</li>
        </ul>
      </div>
    </form>
    
    Prefix & Postfix Label Boxes

    DevSoft's forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use a 'collapsed' row to create label / action / input combinations. Here are a few examples.

    Note: for these prefix and postfix labels we're using the mobile grid to size our labels correctly on small devices.

    #
    .com
    Write Your Markup
    
    <!-- Prefix label -->
    <label>Input with a prefix character</label>
    <div class="row">
      <div class="four columns">
        <div class="row collapse">
          <div class="two mobile-one columns">
            <span class="prefix">#</span>
          </div>
          <div class="ten mobile-three columns">
            <input type="text" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Postfix label -->
    <label>Input with a postfix label</label>
    <div class="row">
      <div class="five columns">
        <div class="row collapse">
          <div class="nine mobile-three columns">
            <input type="text" />
          </div>
          <div class="three mobile-one columns">
            <span class="postfix">.com</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Postfix action -->
    <div class="row collapse">
      <div class="ten mobile-three columns">
        <input type="text" />
      </div>
      <div class="two mobile-one columns">
        <a class="button expand postfix">Search</a>
      </div>
    </div>
    
    Error States

    Error states for labels, inputs and messaging that you can have your app generate programatically.

    You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.

    Invalid entry
    Invalid entry
    Write Your Markup
    
    <div class="row">
      <div class="five columns">
        <label class="error">Error</label>
        <input type="text" class="error" />
        <small class="error">Invalid entry</small>
      </div>
    
      <div class="five columns end error">
        <label>Another Error</label>
        <input type="text" />
        <small>Invalid entry</small>
      </div>
    </div>
    
x
Customer Login
New User Login
x
New Customer
Register
x
Please enter name Please enter e-mail E-mail is not a valid format
There was a problem validating the form please check!
The connection to the server timed out!

Message sent, Thank you.

x