Smarty - Multipurpose + Admin

MATERIAL COMPONENTS

MATERIAL : TEXT FIELDS

The Material Design Lite (MDL) text field component is an enhanced version of the standard HTML <input type="text"> and <input type="textarea"> elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.

Text fields are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience.

HOW TO ENABLE MATERIAL

1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official

Show Code

<!-- Simple Textfield -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

<!-- Numeric Textfield -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
    <label class="mdl-textfield__label" for="sample2">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

Show Code

<!-- Textfield with Floating Label -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

<!-- Numeric Textfield with Floating Label -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
    <label class="mdl-textfield__label" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

Show Code

<!-- Floating Multiline Textfield -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield">
    <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
    <label class="mdl-textfield__label" for="sample5">Textarea...</label>
  </div>
</form>

<!-- Expandable Textfield -->
<form action="#" class="m-0">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>

MDL class	Effect	Remarks
`mdl-textfield`	Defines container as an MDL component	Required on "outer" div element
`mdl-js-textfield`	Assigns basic MDL behavior to input	Required on "outer" div element
`mdl-textfield__input`	Defines element as textfield input	Required on input or textarea element
`mdl-textfield__label`	Defines element as textfield label	Required on label element for input or textarea elements
`mdl-textfield--floating-label`	Applies floating label effect	Optional; goes on "outer" div element
`mdl-textfield__error`	Defines span as an MDL error message	Optional; goes on span element for MDL input element with pattern
`mdl-textfield--expandable`	Defines a div as an MDL expandable text field container	For expandable input fields, required on "outer" div element
`mdl-button`	Defines label as an MDL icon button	For expandable input fields, required on "outer" div's label element
`mdl-js-button`	Assigns basic behavior to icon container	For expandable input fields, required on "outer" div's label element
`mdl-button--icon`	Defines label as an MDL icon container	For expandable input fields, required on "outer" div's label element
`mdl-input__expandable-holder`	Defines a container as an MDL component	For expandable input fields, required on "inner" div element
`is-invalid`	Defines the textfield as invalid on initial load.	Optional on `mdl-textfield` element

WHY SMARTY?

RECENTLY VISITED

CONTACT INFO

Smarty Material Design

MATERIAL COMPONENTS

MATERIAL : TEXT FIELDS