lizzie92869
5/26/2018 - 3:20 AM
demo materialize basics
show the main features for materialize buttoms, cards, chips, grid (offset, pull, push), float, align, drop menu, + with options displayed, truncate, effects, hoverable, pulse, shadow, img, position elements, icons, searchbar, mobile collapse, links, collections, pagination, breadcrumbs, forms, preloader
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Materialize Sandbox</title>
</head>
<body>
<div class="container">
<h1>COLORS</h1>
<div class="red white-text">Div with color class</div>
<div class="blue white-text darken-2">Div with color class</div>
<div class="deep-purple blue-text lighten-3">Div with color class</div>
<h1>BUTTONS</h1>
<button class="btn">Read More</button>
<button class="btn waves-effect waves-light">Read More</button>
<button class="btn btn-large">Read More</button>
<button class="btn disabled">Read More</button>
<button class="btn btn-large red darken-3 white-text">Read More</button>
<button class="btn btn-large blue">Read More</button>
<button class="btn btn-large green">Read More</button>
<button class="btn btn-large purple lighten-2">Read More</button>
<button class="btn btn-large black">Read More</button>
<button class="btn btn-large yellow black-text">Read More</button>
<button class="btn btn-large brown"><i class="material-icons left">cloud</i> Read More</button>
<!-- FLOATING BUTTON -->
<a href="#" class="btn-floating red btn-large"><i class="large material-icons">add</i></a>
<!-- FIXED ACTION BUTTON -->
<div class="fixed-action-btn">
<a href="#" class="btn-floating red btn-large"><i class="large material-icons">mode_edit</i></a>
<ul>
<li><a href="#" class="btn-floating yellow btn-large"><i class="large material-icons">insert_chart</i></a></li>
<li><a href="#" class="btn-floating blue btn-large"><i class="large material-icons">format_quote</i></a></li>
<li><a href="#" class="btn-floating green btn-large"><i class="large material-icons">publish</i></a></li>
<li><a href="#" class="btn-floating orange btn-large"><i class="large material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- FLAT BUTTON -->
<a href="" class="waves-effect waves-teal btn-flat">Button</a>
<h1>HELPERS</h1>
<!-- ALIGNMENT -->
<div>
<h5 class="left-align">This aligns to the left</h5>
</div>
<div>
<h5 class="right-align">This aligns to the right</h5>
</div>
<div>
<h5 class="center-align">This aligns to the center</h5>
</div>
<!-- QUICK FLOATS -->
<div class="left">Left Float</div>
<div class="right">Right Float</div>
<!-- CLEAR -->
<div class="clearfix"></div>
<!-- HIDE CONTENT -->
<div class="hide">Hidden for all devices</div>
<div class="hide-on-small-only">HIdden for mobile devices</div>
<div class="hide-on-med-only">Hidden for tablets only</div>
<div class="hide-on-med-and-down">Hidden for tablets and smaller</div>
<div class="hide-on-med-and-up">Hidden for tablets and higher</div>
<div class="hide-on-large-only">Hidden for desktops</div>
<!-- TRUNCATE -->
<h4 class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit porro eius esse, qui sequi tempore impedit ea, similique nulla neque ad velit minus deleniti quibusdam laborum voluptatem explicabo! Blanditiis, expedita.</h4>
<!-- EFFECTS -->
<!-- HOVERABLE -->
<div class="red white-text hoverable">Hoverable content</div>
<!-- PULSE -->
<div class="blue white-text _pulse">Pulse content</div>
<!-- SHADOW -->
<p class="z-depth-1">z-depth-1</p>
<p class="z-depth-2 red">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>
<!-- FLOW TEXT -->
<p class="flow-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus id vel omnis, veniam nesciunt adipisci quis voluptatum, ex error laudantium, voluptate aspernatur, facere doloribus nisi placeat recusandae provident commodi quas!</p>
<!-- IMAGES -->
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="" class="responsive-img" alt="">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="" class="responsive-img circle" alt="">
</div><!-- ./container -->
<!-- NAVIGATION -->
<!-- LEFT LOGO -->
<nav>
<div class="nav-wrapper blue">
<a href="" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<br><br>
<!-- RIGHT LOGO -->
<nav>
<div class="nav-wrapper red">
<a href="" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<br><br>
<!-- CENTER LOGO -->
<nav>
<div class="nav-wrapper green">
<a href="" class="brand-logo center">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<br><br>
<!-- DROPDOWN -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
<div class="nav-wrapper green">
<a href="" class="brand-logo center">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="" class="dropdown-button" data-activates="dropdown1">Dopdown<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<br><br>
<!-- ICONS & BUTTONS IN NAV -->
<nav>
<div class="nav-wrapper black">
<a href="#" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#"><i class="material-icons">search</i></a></li>
<li><a href="#"><i class="material-icons left">refresh</i>Link with Left Icon</a></li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</nav>
<br><br>
<!-- SEARCHBAR -->
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<br><br>
<!-- MOBILE COLLAPSE -->
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>COLLECTIONS/LIST</h1>
<!-- COLLECTION/LIST -->
<ul class="collection">
<li class="collection-item">Item 1</li>
<li class="collection-item">Item 2</li>
<li class="collection-item">Item 3</li>
<li class="collection-item">Item 4</li>
</ul>
<!-- LINKS COLLECTION -->
<div class="collection">
<a href="#" class="collection-item">Link 1</a>
<a href="#" class="collection-item">Link 2</a>
<a href="#" class="collection-item">Link 3</a>
<a href="#" class="collection-item">Link 4</a>
</div>
<!-- WITH HEADER -->
<ul class="collection with-header">
<li class="collection-item"><h4>Header</h4></li>
<li class="collection-item">Item 1</li>
<li class="collection-item">Item 2</li>
<li class="collection-item">Item 3</li>
</ul>
<!-- ICON LIST -->
<h1>ICON COLLECTION</h1>
<ul class="collection">
<li class="collection-item avatar">
<i class="material-icons circle">folder</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle green">insert_chart</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle red">play_arrow</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
<h1>PAGINATION</h1>
<ul class="pagination">
<li class="disabled"><a href=""><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#">1</a></li>
<li class="waves-effect"><a href="#">2</a></li>
<li class="waves-effect"><a href="#">3</a></li>
<li class="waves-effect"><a href="#">4</a></li>
<li class="waves-effect"><a href="#">5</a></li>
<li class="waves-effect"><a href="#">6</a></li>
<li class="waves-effect"><a href=""><i class="material-icons">chevron_right</i></a></li>
</ul>
<h1>BREADCRUMBS</h1>
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="" class="breadcrumb">First</a>
<a href="" class="breadcrumb">Second</a>
<a href="" class="breadcrumb">Third</a>
</div>
</div>
</nav>
<h1>CARDS</h1>
<!-- CARDS -->
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span><a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ratione, aliquid minima autem tempora, dolor impedit quidem tempore dolorem magnam deserunt, illo. Perspiciatis, quia praesentium nihil illo asperiores dolor modi.</p>
</div>
<div class="card-action">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
<!-- IMAGE CARD -->
<h1>IMAGE CARD</h1>
<div class="card small">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptatum soluta aspernatur quod quaerat saepe accusamus ducimus dolore commodi, rem.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
<!-- HORIZONTAL CARDS -->
<h2 class="header">Horizontal Card</h2>
<div class="card horizontal">
<div class="card-image">
<img src="http://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, et.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<!-- CARD PANEL -->
<h1>CARD PANEL</h1>
<div class="card-panel teal">
<span class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in cum ducimus quod impedit vitae, qui dolore ratione error repudiandae inventore eum magnam molestiae aliquam. Ut maxime quae eius atque.
</span>
</div>
<!-- CHIPS -->
<h1>CHIPS</h1>
<div class="chip">
Tag 1<i class="close material-icons">close</i>
</div>
<div class="chip">
Tag 2<i class="close material-icons">close</i>
</div>
<h1>FORMS</h1>
<!-- FORMS -->
<form>
<div class="input-field">
<input type="text" id="name">
<label class="active" for="name">Name</label>
</div>
<div class="input-field">
<input type="email" id="email" class="validate">
<label class="active" for="email">Email</label>
</div>
<div class="input-field">
<textarea type="email" id="textarea" class="materialize-textarea"></textarea>
<label class="active" for="textarea">Textarea</label>
</div>
</form>
<h1>PRELOADERS</h1>
<!-- PRELOADERS -->
<div class="progress">
<div class="determinate" style="width:40%"></div>
</div>
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- CIRCULAR -->
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<h1>GRID SYSTEM</h1>
<!-- GRID SYSTEM -->
<div class="row">
<div class="col s1"><div class="card-panel grey">1</div></div>
<div class="col s1"><div class="card-panel grey">2</div></div>
<div class="col s1"><div class="card-panel grey">3</div></div>
<div class="col s1"><div class="card-panel grey">4</div></div>
<div class="col s1"><div class="card-panel grey">5</div></div>
<div class="col s1"><div class="card-panel grey">6</div></div>
<div class="col s1"><div class="card-panel grey">7</div></div>
<div class="col s1"><div class="card-panel grey">8</div></div>
<div class="col s1"><div class="card-panel grey">9</div></div>
<div class="col s1"><div class="card-panel grey">10</div></div>
<div class="col s1"><div class="card-panel grey">11</div></div>
<div class="col s1"><div class="card-panel grey">12</div></div>
</div>
<div class="row">
<div class="col s8"><div class="card-panel grey">8</div></div>
<div class="col s4"><div class="card-panel grey">4</div></div>
</div>
<div class="row">
<div class="col s4"><div class="card-panel grey">4</div></div>
<div class="col s4"><div class="card-panel grey">4</div></div>
<div class="col s4"><div class="card-panel grey">4</div></div>
</div>
<!-- OFFSETTING -->
<div class="row">
<div class="col s12"><div class="card-panel grey">This div is 12 cols</div></div>
<div class="col s6 offset-s6"><div class="card-panel grey">This div is 6 cols offset by 6</div></div>
</div>
<!-- PUSH AND PULL -->
<div class="row">
<div class="col s7 push-s5"><div class="card-panel grey">This div is 7 cols widw</div></div>
<div class="col s5 pull-s7"><div class="card-panel grey">This div is 5 cols widw</div></div>
</div>
</div><!-- ./container -->
<div style="height:500px"></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>