Material Design Layout

HTML

<div class="toolbar bg-blue-500 color-white">
    <button class="icon-button"><i class="fa fa-bars"></i>

    </button>	<span class="toolbar-label">My app</span>
	<span class="float-right">
				<button class="icon-button"><i class="fa fa-search"></i></button>
				<button class="icon-button"><i class="fa fa-star"></i></button>
			</span>

</div>
<div class="card" z="1" id="content">z-depth: 1</div>

CSS

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css);
 @import url(http://fonts.googleapis.com/css?family=Roboto:500, 400, 300, 300italic, 400italic, 500italic);

/* Global */
body {
    font-family: Roboto, Arial, sans-serif;
    color: rgba(0, 0, 0, 0.87);
}
:focus {
    outline: none;
}
::-moz-focus-inner {
    border:none;
    padding: 0;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.checkbox, .radio, .text-input, .button, .switch, .fab {
    display:inline-block;
    vertical-align:top;
}
/* CSS Ripple */
 .ripple, [ripple] {
    position: relative;
    display: inline-block;
}
.ripple::after, .button::after, .fab::after, [ripple]::after {
    content:"";
    position: absolute;
    top: 0;
    left: 50%;
    background-color: rgba(204, 204, 204, 0.29);
    height: 200%;
    width: 0%;
    border-radius: 0.75em / 2em;
    transition: all 0.2s;
    text-align: center;
}
.ripple.circle::after, .fab::after, [ripple="circle"]::after {
    width: 0px;
    height: 0px;
    top: 50%;
    border-radius: 200% !important;
}
.ripple:active::after, .button:active::after, .fab:active::after, [ripple]:active::after {
    width: 100% !important;
    left:0;
    top: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
}
[ripple="false"]::after, [ripple="none"]::after {
    all: unset;
    display: none;
}
/* Typography */
 h1, h2 {
    font-weight: 300;
}
.secondary-text {
    color: rgba(0, 0, 0, 0.54);
}
/* Switches */
 .checkbox, .radio, .button, .switch, .fab, .icon-button {
    cursor:pointer;
    -moz-user-select: none;
    user-select: none;
}
.checkbox input[type="checkbox"], .radio input[type="radio"], .switch input {
    display: none;
}
.checkbox input[type="checkbox"] + label, .radio input[type="radio"] + label {
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: inline-block;
    background: transparent;
    transition: all 0.2s;
    position:...