materialize css

How to design responsive templates using materialize css?

Introduction :

Material is designed by google which is a design combines both classic design along with technology and innovation. Now here we will know about principles of material design.

  • Metaphor :

    which defines space and motion, technology is inspired from paper and ink to utilize to help out creativity and innovation. Surfaces and edges provide common visual cues that allow users to speedily understand the material world.

  • Bold, Graphic and Intentional:

    In this material design which offers typography , colors, grids, forms and buttons and lot more features for the users to create effective materialize css template.

  • Motion:

    Motion provides user a full clarity about objects and transformations, which gives consistency and continuity to user.

Pre requisites to start materialize css template design

Before we start working on materialize css , we need to download standard version from website .
Here you will find two versions
1. Materialize
2. Saas

I will prefer Materialized version than Saas, because which is easy and simple to setup the project. Now let’s download the standard version and extract all files to your project’s root. After extraction the file structure looks like blow.

materialize css

Now you have successfully extracted the files, let’s start our first template using Materialize Css.
Now how your basic index.html page looks?
Here you need to import materialize.min.css file at header section and need to load jquery latest plugin and materialize.min.js file after loading jquery plugin first. Please add these two plugins at bottom of the html body, for better performance.

Now let’s check how grids are designed in materialized css, which are very constructive to create template in two column or three column templates. Let see how these css classes used for girds.
In this material design girds are designed into 3 types there are S stands for small, M stands for medium and L stands for Large. Here screen is divided into 12 sections which are called by using below classes.

Above classes can be used in small, Medium and large screens. “Col s1” indicates “1 column on small screen “reaming classes also reflects same meaning.
Now add these grids into your index.html page to create template. The code looks as below

The above code is placed in the body section to display all your content pages and side navigation bars.
Now we are going to add navigation bar to header section using materialize css designs. Let’s check classes for the navigation menu.
The navbar is absolutely contained by Associate in Nursing HTML5 Nav tag. Within a counseled instrumentation div, there ar two main components of the navbar. A emblem or complete link, and also the navigations links. you’ll align these links to the left or right. Please add below code above the container section.

Now we have completed our navigation section, now let’s create footer section for our template, Footers area unit a good thanks to organize plenty of web site navigation and knowledge at the top of a page. this is often wherever the user can look once they need finished scrolling through the present page or area unit searching for further info regarding your web site.
Materialize design uses flexbox to structure our markup language so the footer is usually on very cheap of the page. it’s vital to stay the structure of your page inside the three HTML5 tags:

The footer code can be added after container which looks like as below.

Thanks for reading this article, we have created a sample template using materialize css template please check the code below. Thanks!

Materialize CSS Template

Leave a Reply