Tips on Installing Materialize CSS

 

 

 

In this article you will learn what is Materialize CSS, why you need it and how to install it. Having a solid understanding of HTML, CSS and Javascript is essential to understand how to use frameworks.

 

What is Materialize CSS?

 

Materialize CSS is a UI component library built with HTML, CSS and Javascript. It has reusable components that help you create attractive and functional web pages and apps. It also has several features among them in-built responsive design.

 

Why use it?

 

Other than the fact that Materialize CSS has been named one of the top six CSS frameworks of 2019, according to Skysilk. It’s unique style also helps you get started and allows the design to build from there as compared to other CSS frameworks and user-friendly frameworks lay out all the necessary pieces that you need in order to create functional and beautiful websites and apps.

 

How to Install?

 

There are 2 ways to set up:

 

Local Installation-  Download the materialize folder to your local computer.  It will include all the files that need to be placed in your HTML code.

 

CDN Based Version- Include the materialize.min.css and materialize.min.js files into your HTML code directly from the Content Delivery Network(CDN).

These links go in the <head> tag.

 

Like the example below:

 

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!--Import Google Icon Font-->

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Compiled and minified CSS -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!--Compiled and minified Javascript-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0rc.2/js/materialize.min.js"></script>

  <title>Materialize CSS</title>

</head>

 

For more information on using this UI Framework go to the Materialize CSS website. And The Net Ninja on Youtube also has easy to follow videos about Materialize. 

 

Ilda Rodriguez is a Moms Can Code School student who is training to become a front-end developer. Ilda is inspired by art and design to build responsive and easy to use websites. She is a mother of two and lives with her family in Chicago, Illinois. 

 

 

 

 

 

 

Share on Facebook
Share on Twitter
Please reload

All Content © Moms Can™ & Co.
Terms of Use & Privacy Policy