Tuesday, June 6, 2017

Materialize Css Framework Features

Materialize CSS - Materialize is basically latest css framework that is used to create rich responsive UI for web applications.  Materialize framework is very easy to learn if you know basic HTML, CSS and JavaScript.

Materialize provides you predefined rich layouts, animations, and many more powerful UI.

Let us see the main components of materialize css framework-

Installation- Materialize can be installed simply by downloading the css and js files from the official site - http://materializecss.com/getting-started.html or you can use cdn. You can follow the complete step to install from this article - Materialize Installation Steps

Container- Materialize Css has some special class to create container- Materialize Css has some special class to create container for creating layouts.  

Grid - Grid is an important component  of any layout, there are 12 columns inbuilt grid system in materialize css.

Table - Tables are great ways to show the data in tabular form. Materialize framework provides various classes to create the tables

Chips- Chips basically represents the small information, for example - we add tags to tag our friends in facebook or other social media platform. Tags can be easily created using the chips.

Forms - Form input elements can be created using the predefined classes and html, html5 tags.

Autocomplete- Autocomplete functionality is provided in materialize css.

Date Picker - Date picker in materialize can be added simply using few lines of javascript that  will work across all devices.

Buttons-  There are several types of buttons avialable which can give the native app button look and feel. 

Navigation- Materialize provides classess & javascript to create the beautiful side navigation menu with touch & drag feature which will give the native menu looks and feel.