How to Start with Materialize CSS

The beginners may have some difficulties about how to start and learn the materialize design.  Here is a simple steps to learn and quick start with materialize design.

1. Add the Following link

<!--Import Google Icon Font-->
					<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
					<link href="~/css/materialize.min.css" rel="stylesheet" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>			<link href="~/css/ClientStyles/main.css" rel="stylesheet" /><span 				data-mce-type="bookmark" 				id="mce_SELREST_end" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>
<style>
.caret {
border-top: 0px !important;
}
</style>

2. Add following line of html

<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label></div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label></div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label></div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Select Project</label></div>
<div class="input-field col s6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Select Percentage</label></div>
</div>
<div class="row">
<div class="col s6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button></div>
<div class="col s6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Cancel
<i class="material-icons right">send</i>
</button></div>
</div>
</form></div>

3. Add following script

@section Scripts{
<script>
$(document).ready(function () {
$('select').material_select();
});

</script>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="~/js/materialize.min.js"></script>
}

Design sample of above materialize css will look like

 

 

More Details Click Here