#Materialize js how to#
The following example demonstrates how to use the above classes to render the background or to change the color of the text.
These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.įollowing is the list of lightness/darkness classes, which can be used to vary the color applied. Materialize supports a rich set of color classes. Rewrite the above example using and from CDN. We are using CDN version of the library throughout this tutorial. provides content for the latest version.
#Materialize js code#
You can include the and files into your HTML code directly from the Content Delivery Network (CDN). Include the css and js file in your HTML file as follows. Then, put the downloaded file in a directory of your website, e.g. Go to to download the latest version available. Local Installation − You can download the and files on your local machine and include it in your HTML code.ĬDN Based Version − You can include the and files into your HTML code directly from the Content Delivery Network (CDN). Materialize - Environment Setup How to Use Materialize? The colors and shades remain uniform across various platforms and devices.Īnd most important of all, it is absolutely free to use. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite the existing CSS rules. Materialize is by design very minimal and flat. The websites created using Materialize are fully compatible with PC, tablets, and mobile devices. Materialize classes are created in such a way that the website can fit any screen size. Materialize has in-built responsive designing so that the website created using Materialize will redesign itself as per the device size. New versions of common user interface controls such as buttons, checkboxes, and text fields adapted to follow Material Design concepts.Įnhanced and specialized features such as cards, tabs, navigation bars, toasts, and so on.įree to use and requires jQuery JavaScript library to function properly.Ĭross-browser, and can be used to create reusable web components. Some of its salient features are as follows − Materialize reusable UI components help in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles such as browser portability, device independence, and graceful degradation. Materialize is a UI component library created with CSS, JavaScript, and HTML.