How to use Materialize CSS ?
Materialize CSS is a design language that is used to develop the system of design that allows for a unified user experience across all products on any platform.
Materialize CSS comes in two different forms, any of them can be used by simply downloading that file, you can use the Materialize CSS into your system.
- Sass: This version contains the source SCSS files. If you choose this version you have more control over which components to include but you need a Sass compiler for this. You can download this file from this link https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-src-v1.0.0.zip
Note: We can use CDN links or install Materialize through NPM and Bower.
Using CDN Link:
<!– Compiled and minified CSS –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
NPM Install Command:
npm install materialize-css@next
Bower Install Command:
bower install materialize
Materialize Setup: After downloading the file, simply unzip the file in your project folder. Your Materialize folder will look like the below image.
HTML Setup: Now simply create an HTML file where you need to import the Materialize, we use the Materialize standard version.
Example 1: In this example, we will simply use text color as well as the background color. To make the correct alignment we will use col and flow class. Use the above libraries in your code or use them in the local folder as given below.
Example 2: In this example, we will simply use text color as well as classes col and flow-text for nice visual design.