Materialize - Overview
What is Materialize?
Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.Some of its salient features are as follows:
- In-built responsive designing.
- Standard CSS with minimal footprint.
- Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
- Includes enhanced and specialized features like cards, tabs, navigation bars, toasts, and so on.
- Requires jQuery javascript library to function properly.
- Cross-browser, and can be used to create reusable web components.
- Free to use
Responsive Design
- Materialize has in-built responsive designing so that the website created using Materialize will redesign itself as per the device size.
- Materialize classes are created in such a way that the website can fit any screen size.
- The websites created using Materialize are fully compatible with PC, tablets, and mobile devices.
Extensible
- Materialize is by design very minimal and flat.
- It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
- It supports shadows and bold colors.
- The colors and shades remain uniform across various platforms and devices.
Materialize - Environment Setup
How to Use Materialize?
There are two ways to use Materialize:- Local Installation - You can download the materialize.min.css and materialize.min.js files on your local machine and include it in your HTML code.
- CDN Based Version - You can include the materialize.min.css and materialize.min.js files into your HTML code directly from the Content Delivery Network (CDN).
Local Installation
- Go to http://materializecss.com/getting-started.html to download the latest version available.
- Then, put the downloaded materialize.min.js file in a directory of your website, e.g. /js and materialize.min.css in /css.
Example
Now you can include the css and js file in your HTML file as follows −<!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.min.js"></script> </head> <body> <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div> </body> </html>It will produce the following result −
CDN Based Version
You can include the materialize.min.js and materialize.min.css files into your HTML code directly from the Content Delivery Network (CDN). cdnjs.cloudflare.com provides content for the latest version.We are using cdnjs.cloudflare.com CDN version of the library throughout this tutorial.
Example
Now let us rewrite the above example using materialize.min.css and materialize.min.js from cdnjs.cloudflare.com CDN.<!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <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.97.3/js/materialize.min.js"></script> </head> <body> <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div> </body> </html>It will produce the following result −
Materialize - Colors
Materialize supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- black
- white
- transparent
Usage
- lighten-1
- lighten-2
- lighten-3
- lighten-4
- lighten-5
- darken-1
- darken-2
- darken-3
- darken-4
- accent-1
- accent-2
- accent-3
- accent-4
Example
materialize_colors.htm<!DOCTYPE html> <html> <head> <title>The Materialize Colors Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <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.97.3/js/materialize.min.js"></script> </head> <body> <h2>Color Theme Demo</h2> <hr/> <div class="card-panel"> <div class="card-panel red lighten-2"> <h1>Red Colored Theme</h1> </div> <span class="red-text text-darken-2"> <h2>Red Colored Text</h2> </span> <ul> <li class="red lighten-5"><p>Using red lighten-5</p></li> <li class="red lighten-4"><p>Using red lighten-4</p></li> <li class="red lighten-3"><p>Using red lighten-3</p></li> <li class="red lighten-2"><p>Using red lighten-2</p></li> <li class="red lighten-1"><p>Using red lighten-1</p></li> <li class="red"><p>Using red</p></li> <li class="red darken-1"><p>Using red darken-1</p></li> <li class="red darken-2"><p>Using red darken-2</p></li> <li class="red darken-3"><p>Using red darken-3</p></li> <li class="red darken-4"><p>Using red darken-4</p></li> <li class="red accent-1"><p>Using red accent-1</p></li> <li class="red accent-2"><p>Using red accent-2</p></li> <li class="red accent-3"><p>Using red accent-3</p></li> <li class="red accent-4"><p>Using red accent-4</p></li> </ul> </div> </body> </html>
No comments:
Post a Comment