Css
utility classes

Forms and Form Alignments
Forms are mostly controlled using the i-flex class, although in-flex and flex can also be applied. Other special classes included flex-full, flex-btn, i-flex-btn and flex-child classes.

  • i-flex - sets input field up with flex properites
  • i-flex-full - sets input field up with flex properites at 100% width
  • flex-btn - used on form buttons
  • flex-full - applied on any form field
Since these flex classes have the properties of a flex display type, utility classes like f-row (or flex-row ) and f-col (or flex-col) can be applied on them. The example below defines how to set up a form input field using these predefined classes.

Form Input with i-flex property


 <input type="text" class="i-flex" placeholder="firstname">

Form Input with i-flex-full property


 <input type="text" class="i-flex-full" placeholder="firstname">
The input field's height above can be increased by setting a padding on the input field itself just as shown below:

Form Input with padding (10 pixels)


 <input type="text" class="i-flex-full pxv-10" placeholder="firstname">
In the code above, although we applied padding of "10 pixels" to all sides, only the top and bottom paddings were added. In situations we need to control the entire element padding, we can use a wrapper instead just shown as below:

Wrapping Form Input




  <div class="i-flex-full bc-white pxv-10">
    <input type="text" class="i-flex-full bc-white bco-10" placeholder="firstname"> <br><br>
  </div>
Yeah, That's it! Just by wrapping our input in a div with class i-flex or i-flex-full, we have been able to control the side margins. Also, in order to achieve this, the input was defined with a transparent white background while the parent div was given the desired background color. This means that our input can inherit its background color from the parent element. Aside from background colors and margins, wrapping our input elements in a div is the most ideal way to set up the form inputs using the predefined classes.

Form Input with side button (left) 




  <div class="i-flex-full bc-white">

    <span class="flex-ico bc-silver pxs-10">
        <span class="ico-envelope"></span>
    </span> 

    <input type="text" class="i-flex-full bc-white bco-10" placeholder="email@example.com">

  </div>
The input design above will not be possible without an input wrapper. Which makes it easier to position our input icon (i.e flex-ico). Since the input exists at an 100% width, we can shift our icon to the right side of the input item and this will still work fine. This is show below:
Form Input with side button (right) 




  <div class="i-flex-full">
      
    <input type="text" class="i-flex-full bc-white bco-10" placeholder="email@example.com">

    <span class="flex-ico bc-silver pxs-10">
        <span class="ico-envelope"></span>
    </span> 

  </div>
In the code above, when we switched our icon, notice that the wrapper div was given a left padding to push the input button a bit towards right side. Without applying the left padding, the input may look closer to the left than usual.

Form: round input field with button 




  <div class="i-flex-full-in rad-r bc-white">

    <span class="flex-ico bc-silver pxs-10">
        <span class="ico-envelope"></span>
    </span>       
    
    <input type="text" class="i-flex-full bc-white bco-10" placeholder="email@example.com">

  </div>
The sample above shows how to build a round input field by using the i-flex-full-in property. When the i-flex-in or i-flex-full-in utitily classes are applied to elements, aside from setting the element's display property as flex, it also extends to setting the property of overflow:hidden on the element. In most times, when we have an overflowing flex child, it is better to use the i-flex-in or i-flex-full-in classes or we could just add the flow-hide property to keep our content within the parent element.

Form Fields
Form fields are mostly needed for stacking form inputs together either as rows or as columns. At most times, forms inputs are usually aligned on separate lines. Naturally, the utility classes does not define vertical spaces or gaps of form input fields. Howvever, when a class of form-field is applied on the form input's direct parent element, the css library will understand that each form field is expected to have a vertical spacing just as below:

Form input fields without a parent "form-field" 




  <div class="i-flex-full-in bc-white shadow-1">
      <span class="flex-ico bc-silver pxs-12">
          <span class="ico-envelope"></span>
      </span> 
      <input type="text" class="i-flex-full bc-white bco-10" placeholder="email@example.com"> <br><br>
  </div>

  <div class="i-flex-full-in bc-white shadow-1">
      <span class="flex-ico bc-silver pxs-12">
          <span class="ico-plane"></span>
      </span> 
      <input type="text" class="i-flex-full bc-white bco-10" placeholder="address"> <br><br>
  </div>
In the code above, the forms a aligned next to each other without a space. In order to add a space, we have to define the form field itself as shown below:
Form input fields with a direct parent "form-field" 




  <div class="i-flex-full-in bc-white shadow-1">
      <span class="flex-ico bc-silver pxs-12">
          <span class="ico-envelope"></span>
      </span> 
      <input type="text" class="i-flex-full bc-white bco-10" placeholder="email@example.com"> <br><br>
  </div>

  <div class="i-flex-full-in bc-white shadow-1">
      <span class="flex-ico bc-silver pxs-12">
          <span class="ico-plane"></span>
      </span> 
      <input type="text" class="i-flex-full bc-white bco-10" placeholder="address"> <br><br>
  </div>
We can also add spaces with direct parents having any of the sp-d5, sp-d7 or sp-1 classes with sp-1 being the highest number of vertical spaces we can add for form input fields.

Form Animations
Form input placeholders can be animated using the data-anime="place" attribute along with a data-cast and data-rule attribute. The data-cast is used to define the behaviour of the placeholder text with options like "fade", "up-fade", "up-fill", "up-stick", "up-wait" and "up-shrink". However, the data-rule attriube is an attribute that determines a bottom line animation. The input forms below are samples of these animations.

code structure - Animation 1
The first placeholder animation above is one in which the input's text fades out once it is focused on. This is done by setting the data-cast option of as "fade". The code sample is shown below: 

  <div class="i-flex rad-r bc-white midv font-em-1d1">
    <div class="rad-r" data-anime="place" data-cast="fade">
        <input id="anime-1" type="text" name="username" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-1">Animation 1</label>
    </div>
  </div>
code structure - Animation 2
The placholder animation above allows the text to fade up once the input is focused upon. The sample code is shown below: 

  
  <div class="i-flex rad-r bc-white midv font-em-1d1">
    <div class="rad-r" data-anime="place" data-cast="up-fade">
        <input id="anime-2" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-2">Animation 2</label>
    </div>
  </div>
code structure - Animation 3
The third animation above is one in which the placeholder text slides up when focused upon but fades out once a text has been entered. 

  <div class="i-flex anime-place loaded">
    <label for="anime-3" class="place">Animation 3</label>
    <input id="anime-3" type="text" class="i-flex-full pxv-6" placeholder="Animation 3">
  </div>
code structure - Animation 4
The fourth animation defines a placeholder that shifts up and stays until a text is filled in and the input is focused out. If no text was entered, after focusing out, the placeholder will return back to its initial position rather than fading out. 

  <div class="i-flex anime-place loaded">
    <label for="anime-4" class="place">Animation 4</label>
    <input id="anime-4" type="text" class="i-flex-full pxv-6" placeholder=" ">
  </div>
code structure - Animation 5
The fifth animation above defines a placeholder that shifts up and stays up unless no text was entered after it was focused out. This means that the text will stay up as long as the input field is focused upon or text is filled in. 

  <div class="i-flex anime-place loaded">
    <label for="anime-5" class="place">Animation 5</label>
    <input id="anime-5" type="text" class="i-flex-full pxv-6" placeholder=" ">
  </div>
code structure - Animation 7
If the padding of the animation is too big, we can use the padd attribute to adjust the passing with a value of "soft", "fair" or "hard". The default value is "fair". This is shown below: 

  <div class="i-flex rad-r bc-white midv font-em-1d1">
    <div class="rad-r" data-anime="place" data-cast="up-stick" data-shrink="" padd="hard">
        <input id="anime-7" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-7">Animation 7</label>
    </div>
  </div>
code structure - Animation 8
We can also add an animated ruler to the animated placeholder by adding the attribute data-rule as shown below: 

  <div class="i-flex bc-white midv font-em-1d1">
    <div class="" data-anime="place" data-cast="up-stick" data-shrink="" data-rule padd="soft">
        <input id="anime-8" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-8">Animation 8</label>
    </div>
  </div>
Note that rounded borders does not work well with animated line. In order to use the rounded borders along with animated bottom line, then the element with the parent element must be set to an overflow:hidden style. This can be done through the i-flex-in class. Also, the border radius must be applied on both the parent element and the element with the data-anime attribute. The overflow hidden property will prevent the animated text from sticking up. In this situation, the data-cast="fade" is the best option to use. The animation and code structure is shown below:
code structure - Animation 9
We can also add an animated ruler to the animated placeholder by adding the attribute data-rule as shown below: 

  <div class="i-flex-in rad-r bc-white midv font-em-1d1">
    <div class="rad-r" data-anime="place" data-cast="fade" padd="soft">
        <input id="anime-9" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-9">Animation 9</label>
        <div line=""></div>
    </div>
  </div>
code structure - Animation 10
The easiest way to change the color of the bottom ruler animation as shown above is to set the value of the data-rule as "line" an to add an extra line field that can be styled with colors as shown below: 

  <div class="i-flex-in rad-r bc-white midv font-em-1d1">
    <div class="rad-r" data-anime="place" data-cast="fade" data-rule="line" padd="soft">
        <input id="anime-9" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-9">Animation 10</label>
        <div line="" class="c-red"></div>
    </div>
  </div>
code structure - Animation 11
When using the placeholder animation, we can add input icons using the flex-ico attribute as shown above. The format is shown below: 

  <div class="i-flex-in bd-f rad-r bc-white font-em-1d1">
    <span class="flex-ico bi-chat-dots bc-orange c-white"></span>
    <div class="rad-r" data-anime="place" data-cast="fade" data-rule="line" padd="soft">
        <input id="anime-11" type="text" class="flex-full bc-white rad-i bco-8 c-i" placeholder=" ">
        <label for="anime-11">Animation 11</label>
        <span line class="c-orange"></span>
    </div>
  </div>