Forms

Furatto comes with beautiful and powerful form layouts. Once you combine them with the grid, you can build almost anything.

Building the markup

Creating forms with Furatto is really easy. We don't want to bother you with many modifier classes on inputs or nesting them into more elements. Rather than include class names on the inputs, we use the type attribute to style them.

Here is a quick example:

       
  <form action="" method="get" accept-charset="utf-8">
       <label for="name">A label</label>
       <input type="text" name="" id="name" value="" placeholder="A text field" />
       <br />
        <select name="" id="">
          <option>Select a language</option>
          <option>Ruby</option>
          <option>Javascript</option>
          <option>Objective-C</option>
        </select>
        <div class="row">
          <div class="col-6">
            <label for="radio">Choose an option</label>
            <input type="radio" name="radio" id="option1" value="" />
            <label for="option1">Option 1</label>
            <input type="radio" name="radio" id="option2" value="" />
            <label for="option2">Option 2</label>
          </div>          
          <div class="col-6">
            <label for="">Check as many as you want</label>
            <input type="checkbox" name="" id="check1" value="" />
            <label for="check1">Check two</label>
            <input type="checkbox" name="" id="check2" value="" />
            <label for="check2">Check one</label>
          </div>
        </div>
        <div class="row">
            <label for="textarea">A textarea</label>
           <textarea name="" id="textarea" rows="8" cols="40"></textarea>
        </div>
    </form>  
       
     

Input Sizes

We provide class names to size up your inputs very easy, the smallest size, which is mini starts at 20% width, and increases at a 20% range. So 4 sizes mate, mini, small, medium, large.

       
 <input type="text" placeholder=".mini - 20% width" class="mini" />
 <input type="text" placeholder=".small - 40% width" class="small" />
 <input type="text" placeholder=".medium - 60% width" class="medium" />
 <input type="text" placeholder=".large - 80% width" class="large" />
 <input type="text" placeholder=".block - 100% width" class="block" />
       
     

      
   <form action="" method="get" accept-charset="utf-8">
    <label for="email">Email:</label>
    <input type="text" class="error" name="" id="email" value="" />
    <span class="help-hint error">It is not a well formed email...</span>
    <label for="email_success">Email:</label>
    <input type="text" class="success" name="" id="email_success" value="" />
    <span class="help-hint success">Great on writing your name...</span>
    <label for="bio">Bio:</label>
    <textarea name="" id="bio" rows="4" cols="40" class="success"></textarea>
    <span class="help-hint success">Impressive bio dude...</span>
  </form>
      
    

Available sass variables

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  
//Form Label
$form-label-display: block !default;
$form-label-cursor: pointer !default;
$form-label-font-size: px-to-rems(13) !default;
$form-label-color: scale-color(#000, $lightness: 30%) !default;
$form-label-font-weight: 300 !default;
$form-label-margin-bottom: px-to-rems(5) !default;
$form-input-border-width: 1px !default;
$form-input-border-style: solid !default;
$form-inline-label-margin-left: px-to-rems(3) !default;

//Form inputs
$form-input-radius: 0 !default;
$form-input-height: px-to-rems(32) !default;
$form-input-color: rgba(0,0,0, 0.75) !default;
$form-input-font-size: px-to-rems(13) !default;
$form-input-padding: px-to-rems(5) !default;
$form-input-margin-bottom: px-to-rems(11) !default;
$form-input-box-shadow: inset 0 1px 2px rgba(#ccc,0.35) !default;
$form-input-focus-box-shadow: 0 0 5px rgba(#ccc, 1) !default;
$form-input-focus-border-color: #999 !default;
$form-input-background-color: #FFF !default;
$form-input-border-color: #CCC !default;
$form-input-disabled-color: #ECF0F1 !default;
$form-input-disabled-background-color: #EEE !default;
$form-input-mini-width: 20% !default;
$form-input-small-width: $form-input-mini-width * 2 !default; 
$form-input-medium-width: $form-input-mini-width * 3 !default;
$form-input-large-width: $form-input-mini-width * 4 !default;

//Validation states
$form-label-success-color: #27ae60 !default;
$form-label-error-color: #e74c3c !default;
$form-input-success-border-color: $form-label-success-color !default;
$form-input-error-border-color: $form-label-error-color !default;

//Help hints
$form-help-hint-color: #FFF !default;
$form-help-hint-font-size: px-to-rems(11) !default;
$form-help-hint-font-style: italic !default;
$form-help-hint-padding: px-to-rems(5) !default;

//Selects
$form-select-background-color: #FFF !default;
$form-select-border-style: solid !default;
$form-select-border-width: 1px !default;
$form-select-border-color: #CCC !default;
$form-select-color: #555 !default;
$form-select-font-size: px-to-rems(14) !default;
$form-select-hover-background: #F7F7F7 !default;
$form-select-padding: px-to-rems(5) px-to-rems(7) !default;
$form-select-radius: 2px !default;
$form-select-transition-time: 2s !default;
$form-select-transition-style: linear !default;
$form-select-backgroun-x-position: 97% !default;

$include-form-select-transition: true !default;

$form-input-media-query: "#{$media-display} and (max-width: #{$screen-xs})" !default;
  

Experimental

We keep n the experiments all around Furatto, that's why we build really simple input add-ons solved by flex. It might not work well on IE.

This experimental feature builds add on inputs with minimal HTML and Css. Keep in mind that this is edge features and not all browsers will fully support it.

Left addon

       
  <div class="input-addon">
       <a class="addon warning">$</a>
       <input class="addon-field" type="text">
 </div>

       
     

Right addon

       
    <div class="input-addon">
       <input class="addon-field" type="text">
       <a class="addon warning">$</a>
     </div>

       
     

Right & left addon

       
   <div class="input-addon">
       <span class="addon danger">Amount</span>
       <input class="addon-field" type="text">
       <span class="addon danger">Amount</span>
   </div>
       
     

There is currenctly support for 4 color, the default (rgba(147, 148, 108, 0.1)), primary rgba(52, 152, 219, 0.6), danger rgba(231, 76, 60, 0.6) and warning rgba(211, 84, 0, 0.6).

Available Sass variables

It is really easy to customize the addons experimental feature, by simply modifying our Sass variables.

  
$input-addon-margin-bottom: 1rem !default;
$addon-border-width: 1px !default;
$addon-border-style: solid !default;
$addon-border-color: rgba(147, 128, 108, 0.25) !default;
$addon-padding: 0.5rem !default;
$addon-background-color: rgba(147, 148, 108, 0.1) !default;
$addon-font-color: #666 !default;
$addon-font-weight: 400 !default;
$addon-font-size: 14px !default;
$include-addon-radius: false !default;
$addon-radius: 2px !default;

//Addon color variations
$addon-warning-bg-color: rgba(211, 84, 0, 0.6);
$addon-danger-bg-color: rgba(231, 76, 60, 0.6);
$addon-primary-bg-color: rgba(52, 152, 219, 0.6);