Google Material Design Input Boxes

What is Google Material Design?

Google Design Elements
Google continues to expand the capabilities of web design with their “Google Material Design” a CSS3 styling technique utilizing Polymer allowing you to create rich animated applications.

Test out this CSS code on your next input box.

Check out Google’s Polymer design elements here.

Here is a list of dynamic references inside of Polymer:

8 Polymer Elements

paper-checkbox : User can tap the checkbox to check or uncheck it. Usually you use checkboxes to allow user to select multiple options from a set. If you have a single ON/OFF option, avoid using a single checkbox and use paper-toggle-button instead.

paper-dropdown-menu : is similar to a native browser select element. paper-dropdown-menu works with selectable content.

paper-input : is a single-line text field with Material Design styling.

paper-listbox : implements an accessible listbox control with Material Design styling. The focused item is highlighted, and the selected item has bolded text.

paper-radio-button : is a button that can be either checked or unchecked. User can tap the radio button to check or uncheck it. Use a to group a set of radio buttons. When radio buttons are inside a radio group, exactly one radio button in the group can be checked at any time.

paper-radio-group : A group of Material Design radio buttons

paper-slider : A Material Design slider

paper-toggle-button : Paper-toggle-button provides a ON/OFF switch that user can toggle the state by tapping or by dragging the switch.

Example Code

* { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */
body 				 { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container 		{ 
  font-family:'Roboto';
  width:600px; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
}
h2 		 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
.footer 	{ text-align:center; }
.footer a  { color:#53B2C8; }

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

Bootstrap Page with Navigation Example

If you’re looking to throw up a quick mobile responsive, yet static, web page. This is the basic code for a bootstrap framework with example navigation. As you can see, line 7 contains the bootstrap.css file

If you want to get the latest css file to play around with go to www.getbootstrap.com

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Coding Bootcamp!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <!-- Container Div -->
  <div class="container">
    <!-- Section 1: Navbar-->
    <nav class="navbar navbar-default">
      <!-- Place Fluid Container in Navbar -->
      <div class="container-fluid">
        <!-- Designate a navbar heading -->
        <div class="navbar-header">
          <!-- Collapsible button -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <!-- navbar button elements-->
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span> <!-- first line -->
              <span class="icon-bar"></span> <!-- second line -->
              <span class="icon-bar"></span> <!-- third line -->
            </button>
          <!-- Our brand / logo -->
          <a class="navbar-brand" href="#">The Coding Bootcamp</a>
        </div>
        <!-- The links of our navbar -->
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <!-- a Dropdown menu -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <!-- More links -->
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <!-- Jumbotron element -->
    <div class="jumbotron">
      <!-- centered text -->
      <h1 class="text-center"><strong>Awesome Header</strong></h1>
      <h2 class="text-center">Smaller Awesome Header</h2>
      <h3 class="text-center">Even Smaller Header</h3>
      <!-- button with predefined style rules -->
      <p class="text-center">
        <a class="btn btn-primary btn-lg" href="#" role="button">
          <span class="glyphicon glyphicon-envelope"></span> Learn more</a>
      </p>
    </div>
    <!-- a Bootstrap row with columns -->
    <div class="row">
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <!-- centered image with thumbnail rules -->
        <img class="img thumbnail center-block" src="http://legacy.nerdywithchildren.com/wp-content/uploads/2013/06/ComfyChildKeyboard.jpg" alt="KidComputer" width="50%">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, molestiae modi accusantium animi magnam veniam, impedit asperiores sint consequuntur debitis fugit quibusdam dolor, iusto sed porro ab minus voluptatibus amet.</p>
      </div>
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <img class="img thumbnail center-block" src="https://download.unsplash.com/photo-1429051883746-afd9d56fbdaf" alt="LittleCoder" width="50%">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, maiores, quos. At, animi, facilis. Alias itaque ab minima rerum, eaque animi nesciunt harum nemo est cumque voluptas, qui reprehenderit atque.</p>
      </div>
    </div>
  </div>
  <!-- jQuery, javascript file for the Bootstrap's javascript file to function -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <!-- Bootstrap's javascript file that allows the dropdown menu to work  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

CSS Styling Examples

I wanted to show a couple examples in this CSS example:

1. How to use Google Fonts
2. How to use Font Awesome icons
3. How to style Active, Hover, Focus links and input boxes.

First, in order to use Google Fonts and Font Awesome you need to embed the fonts and the Font Awesome CSS file. (See line 7 and 9 highlighted below)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Lorem Ipsum Styling</title>

	<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

	<link rel="stylesheet" href="fa/css/font-awesome.min.css">

<style>

.container{
	text-align: center;
	padding:4%;
	width: 92%;
}
.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}
.top-para {
	font-size: 58px;
	font-family: 'Prata', serif;
	font-weight: 100;
	line-height: 125%;
	letter-spacing: 2px;
	color: #a08131;
}


p.top-para::first-letter {
    color: #424219;
    font-size:200%;
}  


.mid-para {
font-size: 28px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 900;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para {
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para2 {
	font-size: 30px;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 1px;
	color: #a08131;
}
.foot-para {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #3f3c35;
}
.fa-address-card {
	font-size: 80px;
	color: #a08131;
}
.fa-rocket {
	font-size: 45px;
	color: #3f3c35;
}
.fa-plus {
	font-size: 25px;
	color: #898768;
	margin-right: 15px;
	margin-top: -15px;
	position: relative;
	top: -10px;
}
.fa-male {
	font-size: 45px;
	color: #3f3c35;
	position: relative;
	top: -3px;
	margin-right: 15px;
}
.fa-sitemap, .fa-beer{
	font-size: 45px;
	color: #3f3c35;
	margin-right: 15px;
}

a {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	color:#545441;
}

a:hover {
	background-color: #a08131;
	font-size: 25px;
}

a:focus {
	background-color: #6d6a34;
	font-size: 40px;
}

a:active {
	background-color: #777775;
	font-size: 80px;
}




.boxy {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	border:1px solid #c1c1b0;
}

.boxy:hover {
	background-color: #a08131;
	font-size: 26px;
}

.boxy:focus {
	background-color: #6d6a34;
	font-size: 30px;
}

.boxy:active {
	background-color: #777775;
	font-size: 30px;
}



</style>	
</head>
<body>
	
<div class="container">
		<i class="fa fa-address-card" aria-hidden="true"></i>
	<p class="top-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


		<input class="boxy" placeholder="Name">
		<input class="boxy" placeholder="Email">
	<br>
		<input class="boxy" placeholder="Address">
		<input class="boxy" placeholder="City, State">

	<p>
		<i class="fa fa-beer" aria-hidden="true"></i><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-male" aria-hidden="true"></i>
	</p>

	<p class="mid-para">Nunc rhoncus mollis nisi id mollis. Nulla facilisi. Aenean dapibus quis urna ut ullamcorper. Nam pellentesque neque congue iaculis sodales. Etiam et augue id lorem pulvinar fermentum eget consequat metus.</p>

	<i class="fa fa-rocket" aria-hidden="true"></i>

	<p>
		<a href="#">Click here to blastoff!!</a>
	</p>

	<p class="bot-para">Fusce vel erat justo. Sed volutpat justo quis arcu vehicula convallis eu ut lectus. Etiam ac odio nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget mi viverra, vulputate nisi vitae, sodales purus. Sed bibendum leo sed cursus lobortis. Nulla faucibus venenatis malesuada. Fusce ac est non massa pharetra blandit ut ut ipsum. Sed at tellus eu lectus volutpat gravida. Sed ut nisi a nisl mollis laoreet non in magna. Nullam aliquam neque sit amet commodo suscipit. Vestibulum interdum ornare ante nec tempor. Sed lobortis finibus dui ac consequat. Fusce tincidunt quam imperdiet arcu pulvinar mollis. Fusce eget nibh in diam varius tincidunt. Vivamus bibendum enim in ullamcorper viverra.</p>

		<i class="fa fa-sitemap" aria-hidden="true"></i>

	<p class="bot-para2">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>

	<div style="footer">
	<p class="foot-para">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>
	</div>
</div>

</body>
</html>

If you see here I embedded some Google fonts then I just used .font-sel to show how to use the different font in your CSS styling of a class.


<head>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

</head>

<style>

.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}

DIV Positioning : Fixed, Absolute, and Relative




<!doctype html>
<html lang="en-us">


<!-- HEAD TAG NEEDS TO HAVE LINK TO CSS FILE-->
<head>
  <meta charset="UTF-8">
  <title>Positioning</title>
  <link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
 
 
  <!-- EXAMPLE OF FIXED DIVISION -->
  <div id="fixed">
    <div><br> position: fixed
  </div>

  <div class="wrapper">
  
    <section id="content">
   
      <h1>Heading</h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a hendrerit ex, at blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus felis sem, non pulvinar odio fermentum vel. Nunc varius tempus scelerisque.
        Curabitur congue magna vitae velit dictum, eu finibus neque bibendum. In hac habitasse platea dictumst. Aliquam fermentum lobortis felis, in feugiat diam congue ac. </p>
        
      <!-- RELATIVE POSITION DIV -->
      <div id="relative">
        <br> position: relative
        
        <!-- ABSOLUTE POSITION DIV-->
        <div id="absolute">
          <br> position: absolute
        </div>
      </div>
     
      <p>Nulla tempor ornare diam, vitae volutpat erat bibendum eget. Nunc sagittis placerat velit sit amet interdum. Nam in iaculis purus, quis tristique velit. Cras ut nisl vitae orci malesuada placerat non sed magna. Nulla ultrices, dolor at aliquam volutpat,
        lorem magna pharetra arcu, eget feugiat nisi libero at nunc. Phasellus finibus elit at sapien vehicula varius. Maecenas in dapibus leo. Aliquam molestie vulputate metus. Morbi sed posuere quam, et sodales felis. Proin augue nulla, pellentesque
        at venenatis vel, sagittis eget nibh. Maecenas libero velit, luctus eu velit vitae, eleifend convallis felis.</p>
      <p>Nullam imperdiet vehicula dolor eu consectetur. Vestibulum pulvinar lobortis accumsan. Phasellus lobortis pulvinar augue, eu ultrices dui. Donec ut est erat. In facilisis tellus nibh, eu consequat diam commodo a. Nam egestas sapien nunc, ullamcorper
        semper odio feugiat non. Duis et nisl leo. Aliquam consectetur vestibulum turpis. Vivamus non elit ut lorem mattis iaculis. Suspendisse ullamcorper ante orci, et condimentum nisi pharetra id. Praesent ut erat in eros mollis interdum quis ut nisi.
        Etiam ac risus in erat imperdiet sagittis eu sed metus. Etiam molestie ipsum sed vehicula efficitur. Cras eu metus in ex vehicula sodales.</p>
      <p>Maecenas feugiat, ex quis hendrerit interdum, felis ante laoreet sem, vitae tincidunt diam lectus fringilla dolor. Nunc vitae dui sed ligula pharetra sagittis in nec ante. Sed consequat congue vehicula. Donec vel risus at sapien rhoncus consequat
        a lobortis lorem. Mauris ut sem massa. Curabitur ac consequat eros. Nulla non nibh eros. Donec porta condimentum nisi a iaculis. Sed sit amet risus at lacus suscipit accumsan sed ullamcorper lorem. Proin sed egestas risus. Sed egestas ex ac finibus
        ornare.</p>
    </section>
  </div>
  
  
  
</body>
</html>

CSS Class and ID Styling

CSS id syntax:
Id’s are totally unique and can only have a single instance
EXAMPLE
<div id=""top""></div>

The css would be:

#top { color: #232323; }

Multiple changes would go in a class
Any div with the class of “top” will be styled
<div class=""top""></div>

The css would be:

.top { color: #232323; }