Tornado Logo

Standard Controls - Tornado UI v2

Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.

Sass Customize

in order to edit the Form Controls you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/forms/_form-themes.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Default Form Theme

in order to apply the default tornado theme of the form its works simply by adding class form-ui to the form tag or any other tag that represent the form controls Container and also you can apply the style to control tag without the parent class by adding the class form-control to the control tag it self.

<form class="form-ui">
    <!-- Text Input -->
    <label>Text Type Label</label>
    <input type="text" placeholder="Text Type Example">
    <!-- Email Input -->
    <label>Email Type Label</label>
    <input type="email" placeholder="Email Type Example">
    <!-- Password Input -->
    <label>Password Type Label</label>
    <input type="password" placeholder="Password Type Example">
    <!-- Select Tag -->
    <label>Select Tag Label</label>
    <select>
        <option> select example </option>
    </select>
    <!-- Chevron Select -->
    <select class="chevron-select">
        <option> chevron select example </option>
    </select>
    <!-- Textarea Input -->
    <label>Textarea Label</label>
    <textarea placeholder="text area example"></textarea>
</form>

Standard File Upload Control

in order to use the Tornado Standard File Control simply put your file input inside a wrapper tag and give it a class Name file-input and for the placeholder text you can use the attribute data-text and for the button text use the attribute data-btn for changing the text and thats it now you got file upload with input theme.

<!-- Standard Uploader -->
<div class="file-input" data-text="File Upload" data-btn="Browse">
    <input type="file">
</div>

Checkboxes and Radio Buttons

tornado provide a multiple style formats for the checkboxes and radio buttons and in order to use a controls of the type checkbox or radio first you create a label element and you can use any other html tags but label is the best one for this situation because the click event on the label tag

will make the input inside of it checked/unchecked after creating the label give it a class checkbox for standard checkbox style or the class radio-button then create the checkbox/radio button control tag inside if that label and after the control tag create a another tag a span for labeling your checkbox/radio-button thats it and for the other skins of the checkboxes you can see the example below.

<!-- Checkbox Skin -->
<label class="checkbox">
    <input type="checkbox" name="checkbox">
    <span>Checkbox Label</span>
</label>
<!-- // Checkbox Skin -->

<!-- Radio Skin -->
<label class="radio-button">
    <input type="radio" name="radio-button">
    <span>Radio Button Label</span>
</label>
<!-- // Radio Skin -->

<!-- Switch button Skin -->
<label class="switch-control">
    <input type="checkbox" name="switch-button">
    Switch Off/ON
    <span class="switch"></span>
</label>
<!-- // Switch button Skin -->

Controls With Icons

in order to make a control with icon beside its value/placholder or with icon first thing to do is to create a container for the form control and add to it a class name control-icon then add to it the icon class name and for the labeled theme add to the control icon element a class name labeled and if you want to reverse the position of the icon add class name floating-end.

<!-- Control With icon -->
<div class="control-icon ti-businessman-worker">
    <input type="text" placeholder="Control With icon">
</div>

<!-- Labeled Control Icon -->
<div class="control-icon labeled ti-electro-head-1">
    <input type="text" placeholder="Labeled Control Icon">
</div>

<!-- Floating Control icon -->
<div class="control-icon floating-end ti-slack">
    <input type="text" placeholder="Floating Control icon">
</div>

Controls Theme Mixin

tornado provide a nice control of mixin for the Form Controls theme witch you can use to extend or change the colors,sizes,backgrounds etc.. easly with sass mixin and you can use it simply by selecting the form parent and do the function inside of it with sass nested .form-parent { @include form-ui ( options ); } you can see all available options in the code below and all options are optional you can drop any of them,

each of this options explain it self but one option that need to explain witch is $extend this special option let you change the selecting pattren instead of styling the controls as a group and childs of some parent you can use and style the control its self or targeting specifice type of controls like control icon wrapper this options take one of this values [ ‘single-control’ or ‘controls-icons’] try to use this options to understand how exactly it works.

@include form-ui (
    $gutter-bottom : 1.563rem, //===> Space After Controler
    $font-size : 0.9375rem,  //===> Controler Font Size
    $padding : 0.9375rem, //===> Controler Padding
    $border : 1px solid rgba(#000, 0.10), //===> Controler Border
    $background-color : #fafafa, //===> Controler Background
    $height : 2.625rem, //===> Controler Height
    $placeholder-color : $gray-color, //===> Controler Placeholder Color
    $arrow-color : rgba(#000,0.5), //===> Select Arrow Color [only rgb]
    $textarea-height : 110px, //===> Textarea Default Height
    $file-btn-bg : $secondary-color, //====> File Input Button Background
    $file-btn-color : $reverse-color , //====> File Input Button Color
    /*==== icons ====*/
    $icons-width : 2.813rem ,  //====> Control icon Width by REM || position reqiuered
    $icons-height: 2.625rem, //===> icons line height
    $icons-position : $direction, //====> Control icon Position || width reqiuered
    $icons-bg : 'transparent' ,  //====> Control icon Background
    $icons-color : rgba(0,0,0,0.50), //====> Control icon Color
    $icons-size : 1.125rem, //===> Icons Font Size
);

Form Lined Theme

there is one more theme for the controler that is one line at the botom of the controls and you can use this simply by adding a class name lined to the controls wrapper form-ui and if you want a cool animated effect use label tag after the control and do not use placeholder attribute see the code example below.

<form class="form-ui row lined">
    <!-- Control Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Text Input -->
        <input type="text">
        <label>Text Type Label</label>
    </div>

    <!-- Control Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Error Status -->
        <input type="password" class="error">
        <label class="error">Error Status Label</label>
    </div>

    <!-- Control Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Floating Control icon -->
        <div class="control-icon floating-end ti-slack">
            <input type="text">
            <label>Floating Control icon</label>
        </div>
    </div>

    <!-- Controls Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Disable Status -->
        <input type="password" class="disable" disabled>
        <label class="disable">Disable Status Label</label>
    </div>

    <!-- Controls Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Chevron Select -->
        <select class="chevron-select">
            <option> chevron select example </option>
        </select>
    </div>

    <!-- Controls Wrapper For Grid -->
    <div class="col-12 col-l-6 col-xl-4">
        <!-- Floating Control icon -->
        <div class="control-icon ti-slack">
            <input type="text">
            <label>Control icon</label>
        </div>
    </div>

    <!-- Control Wrapper For Grid -->
    <div class="col-12">
        <textarea></textarea>
        <!-- Textarea Input -->
        <label>Textarea Label</label>
    </div>
</form>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.