My Material Design Framework

Hello! Today I decided to talk about my small project, namely about the HTML framework in the style of Material Design. You can download it from GitHub: link . It works best on Webkit browsers. Now take a closer look.

After connecting the material.css and material.js to the document, add the following script to the header:

function main () { setTheme ("Blue"); setAccentColor("Pink"); } 

This code will set the primary and secondary color of the document. What it is and what color schemes are available can be found in the official manual .
')
Now you can start adding items to the page. The library contains the main elements described by the Material Design concept, here they are:

• Material cards:
  
  
  
  Code:
  
  

    <div class="mcard" style="position: absolute; width:300px;top:200px;"> <image style="max-width: 100%; position: relative;"> <h2>Header</h2> <p>Text</p> <div class="buttons-container"> <div class="flatbutton"><p>CANCEL</p></div> <div class="flatbutton"><p>OK</p></div> </div> </div> 

  
  
• Two kinds of buttons: regular and flat:
  
  
  
  
  Code:
  
  

    <div class="button ripple-effect"> <p>PRESS</p> </div> <div class="flatbutton ripple-effect" > <p>Flat button</p> </div> 

  
  Both types of buttons support the wave effect. If it does not work correctly, kgo can be disabled by removing the ripple-effect class.
  
  
• Sliders:
  
  
  
  

    <div class="slider" value="50" min="0" max="100" step="1"></div> 

  
  Notice that the div element is assigned invalid attributes value, min, max, step. However, when the page loads, an input element will automatically be created, which will receive these attributes, and there will be no error.
  
  
• Fields:
  
  
  
  Code:
  
  

    <div class ="mtextfield" label="Enter your text here"></div> 

  
  
• Radio buttons flags and switches:
  
  
  
  Code:
  
  

    <input class="checkbox" type="checkbox" id="raz" ><label for="raz">Check me</label> <input class="checkbox" type="checkbox" id="raz2" ><label for="raz2">Check me</label> <input class="radio" type="radio" name="raz" id="raz3" value="1" checked="" /><label for="raz3">Switch me1</label> <input class="radio" type="radio" name="raz" id="raz4" value="2" /><label for="raz4">Switch me2</label> <input class="switch" type="checkbox" id="switch1" value="2"/><label for="switch1">Switch me 3</label> <input class="switch" type="checkbox" id="switch2" value="2"/><label for="switch2">Switch me 4</label> 

  
  

Here only part of the elements is presented, the rest can be seen in this demo document: link . If anyone is interested in this framework, I will write another article about other available elements and additional functionality of the bibliotek.

PS When writing the framework, I used materials from the sites:

→ WebReference.ru
→ Modern JavaScript Tutorial
→ Material design Guidelines