Breadcrumbs are an intuitive way of showing the current location of the user on a website or web application. Just beneath the navigation bar is the ideal place for a breadcrumb. The position of the breadcrumb and the design of the breadcrumb plays a vital role in user experience design. It is astounding that the Materialize CSS has nailed the design of the breadcrumb. Its unique userfriendly design makes a standout. Web designers can quickly implement the breadcrumb in their projects, and it is so easy that there is no JavaScript element in displaying the breadcrumb. Copying a few lines of HTML code can bring the required breadcrumb in the project. Following code can be directly copied into your web project. The only thing that is needed is to change the corresponding link name and links. Here’s the link to Materialize CSS Breadcrumb Documentation
Learn to Implement Fab to Toolbar in your Materialize Project
FAB button is one of the most intriguing features available in the Materialize CSS framework. The fun part is there are varieties of FAB button in Materialize CSS including Horizontal FAB, Click-only FAB and FAB to Toolbar. Each FAB variety has its purpose. Web designers use FAB to show the underlying buttons intuitively instead of the conventional type. In this tutorial, we will discuss how to implement FAB to Toolbar feature in Materialize CSS project.
For this first, we have to use a Materialize CSS boilerplate template with the latest CDN files. After adding the boilerplate template, you can go to the Materialize CSS framework site and navigate to the FAB section and locate the FAB to Toolbar. Copy the HTML coding and paste it into your project file. Here’s the link to Materialize FAB official Documentation and Materialize Starter Template
The next step is to add the Javascript functionality to the project. You can add the following Javascript inside the script tag and place it at the end of the close body tag.
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
toolbarEnabled: true
});
});
</script>
Learn how to create Login and Register Forms in Materialize CSS
In this tutorial, you’ll learn to design a user interface for the Login and Register Form for any web application along with the Forgot Password. Here, we’ve used JS and JQuery for click to show and hide the Forgot Password divisions.
Begin with the Materialize CSS boilerplate template. You can access it from the Materialize CSS website. Here we have used the Materialize CSS with JQuery version in order to achieve a click to reset the password from the login section.
In the page, we have given two tabs. One is for Login Section and the Other is for Register Section. If a user is already registered, he can directly fill in the details and log in. In case he has forgotten the password, he can reset it by clicking the forgot password section and entering an email to reset the password.
If the user is not registered, he can navigate to the Register Section and enter his details to log. In the register section, we are capturing information such as name, mobile and password.
Furthermore, we have also included a reloader to show the status of page load progress in cases of server delays. Following is the code to create Login and Register Forms in Materialize CSS
In this tutorial, we will learn how to add background gradient in Materialize CSS. Gradient shade is one of the recent trends in modern web designing. Gradient shades give beautiful and visually appealing layouts. A gradient is a CSS3 property and used inside the background property. Any HTML component, including buttons, cards, navigation bars, side-navigation, and divisions encourages gradient property. In this tutorial, we are discussing how to implement gradient in Materialize CSS cards.
In Materialize CSS, there are options to add solid colours as the background by calling the colour name inside the class of card. If you are in a quest to add a dark blue background and white text to your card component, you can achieve this by simply adding a blue darken-4 white-text class next to the class card.
<div class="row">
<div class="col s12 m6">
<div class="card blue darken-4 white-text">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
Now that we know how to add solid colours to the background of the card, we can now start to learn how to implement a gradient background in the card. After creating the card, add the following CSS style.
<div class="row">
<div class="col s12 m6">
<div class="card" style="background: linear-gradient(60deg,#ef5350,#e53935);">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
The above CSS script will create red gradient background to the card element in materialize CSS.
Materialize CSS is one of the most widely leveraged CSS frameworks for building websites and web applications next to the Bootstrap. Materialize CSS is rich in features and has got components that are required to build even a complex application. However, when it comes to animations in Materialize CSS, the framework doesn’t have any dedicated animation functionalities integrated inside it. In this tutorial, we will discuss how to add animations to the Materialize CSS framework using the Animate CSS framework. Adding Animation in Materialize CSS is never this easy. Lets do the Animation in Materialize CSS with the following easy steps.
Animate CSS:
Animate CSS is one of the most leverages CSS frameworks for animation. Animate CSS can be either downloaded as a CSS file or can be linked to the working HTML file using the CDN. Mentioned below are both the options to import the Animate CSS into the HTML
In the Materialize CSS case, we will be having the started template as mentioned below
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Animation in Materialize CSS
In the starter template, we can add the CDN of Animate CSS to incorporate the Animate CSS in the project. Once it is embedded, we can start animating the components in Materialize CSS.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After including the Animate CSS CDN, now we can add a button in our body. Which will produce the button in the output. Once we include the button, we can start animating the button by adding the class animated followed by the animated class. In this example we have included the class to bounce the button from right. This will add the animation in the output.
We can refer the Animate CSS library to lookup varied options of animations. Also we want the animation to be looped continuously we can add the class infinite after the animated class.
Learn how to create Shadow effect in Materialize CSS
Google’s Material Design is trending among the designers and many have started using Material Design Concepts in their Websites and Web Applications. On the wake of this, Materialize CSS which we have discussed in our previous tutorials has introduced the Shadow Effect. Shadow can be easily utilized in the project by adding a class in the respective HTML element.
Adding the class=”z-depth-1″ will produce a shadow effect in the respective HTML element. Materialize CSS offers various depth ranges which can be utilized. The depth range varies from 1 to 5. The class=”z-depth-1″ will produce a minimal shadow effect and as the depth range increases shadow effect also increases with class=”z-depth-5″ producing a maximum shadow effect. The shadow explanation can be seen in the following image …
The only drawback is the shadow effect produces a default shadow on the element it has been applied. In order to create a creative layout, it is desirable to have some animation for shadows. Materialize CSS offers a new feature called hoverable, which produces a shadow effect when the element with the hoverable class when hovered. This helps in creating beautiful layouts with the shadow effect when hovered.
In order to understand how the shadow effect, you must start with how to start with Materialize CSS. You can read that from the following link …
Once the Materialize CSS project has been created, the next step is to demonstrate how z-depth-1 works, the following code and image will help you understand how the z-depth class works
<div class="row">
<div class="col m4 s12 z-depth-1">
<h1>Header 1</h1>
<p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
</div>
<div class="col m4 offset-m2 s12 z-depth-5">
<h1>Header 1</h1>
<p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
</div>
</div>
Now we will demonstrate how the hoverable class works. In order, to demonstrate this duplicate the row and instead of z-depth classes replace it with hoverable class. This will create a flat layout, however, when we hover the mouse over the respective columns, it creates a shadow. The coding and image are mentioned below …
<div class="row">
<div class="col m4 s12 hoverable">
<h1>Header 1</h1>
<p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
</div>
<div class="col m4 offset-m2 s12 hoverable">
<h1>Header 1</h1>
<p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
</div>
</div>
In the web designing, the majority of the navigation which is used either for a web application or for the websites is the Top Navigation System. Materialize CSS offer varieties of variation for Topbar Navigation System. We at Ampersand Tutorials have deep dived on various Top Navigation Bar if you would like to learn more about it, you can follow the links given below.
In general, Navigation bar serves as a guide to a website or a web application. In this tutorial, we will demonstrate how to incorporate a fixed side-navigation for a website or a web application. In order to achieve it, first, you should learn to start with the Materialize CSS project, which you can read from the following link.
The second step is to visit the Materialize CSS official website and copy-paste the latest CDN version which is 1.0.0. Please note that we have imported CDN in this demo and we haven’t used JQuery, instead we have used JS. Once you have successfully set up the Materialize CSS project, the coding looks like the following image.
After which, we must visit the Sidenav page in Materialize CSS website, the link is given below
From the aforementioned link, we must now scroll down and find the section fixed HTML structure and we should copy-paste the HTML, CSS and JS coding to our project. The following screenshots are examples of how the structure will look after the successful implementation of Fixed Side Nav Coding. In the demo, we have used a slightly different HTML script to bring the desired output. The CSS is used to make the fixed sidenav disappear and make it mobile triggered navigation system. The JS part helps in initializing the Side Nav. You can view and download this working code from the link given at the bottom of this article.
Learn to implement Full width autoplay slider for Materialize CSS
It is a known fact that Materialize CSS offers in-built carousel for fullscreen and full-width image sliders. However, many designers feel that the carousel seems to malfunction several times, especially when the designers used the fullwidth carousel. One of the predominant comment which we can see is that in the mobile screens, the image slider gets cut off. It is desirable to have full-width image sliders with width 100% rather than having cut off images. We will demonstrate how the existing Materialize CSS code renders Image sliders in the mobile screens. In order to check this, first, let us copypaste the HTML structure from MaterializeCSS website. The version which we use is 1.0.0. https://materializecss.com/getting-started.html
Next step is to navigate to Javascript components section in the Materialize CSS website.
The full-width slider js has to be copy-pasted inside the curly braces.
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {});
Furthermore, to make the slides autoplay is difficult in Materialize CSS. This made us write HTML, CSS and JS to create a mobile responsive slider which auto plays. It is simple to configure this slider in the Materialize CSS. Just copy paste the HTML, CSS and respective JS in your project file. Link the images in the HTML code and you are done.
This not only helps us build mobile responsive slider but also helps in making it autoplay. Following are the respective codes
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>
The time interval at which the slides are changed can be adjusted in the JS code. In this example, we have set it to 5 sec.
Learn How to increase sidenav width in materialize css
Side Navigation, by default, is designed to appear on the smaller screen which will be triggered by a navigation button. Mobile Collapsible Side Navigation can be configured from Materialize CSS website. You can check the code from the following link
https://materializecss.com/navbar.html Once you have added the necessary HTML, CSS and JS for Mobile collapsible menu, you will be getting the following output. On the contrary, if you would like to know how to create sidenav, please follow the link below …
After you have incorporated the mobile navigation, you will be able to find that the default side nav size is approx 300px. The following screenshots will help you understand the width of the side nav.
How to increase sidenav width in materialize css
Furthermore, if we have longer content or shorter content the default width size will generate a poor UI with improper width size. This can be rectified using a simple CSS to either increase or decrease the sidenav width.
The side nav CSS has to be written for the ul with the id=”mobile-demo”.
Learn How to increase navbar height in materialize css
At Ampersand Academy, we have already discussed how to create Navbar and how to change the colour of the navbar, various types of Navbar and how to incorporate mobile collapsible Navbar using Materialize CSS. In order to recap these topics, follow the below-mentioned links 1. Navbar in Materialize CSS 2. SideNav in Materialize CSS
Having discussed and incorporated the Navbar on your website, know how to increase the default Navbar height.
When we examine the default Navbar in Materialize CSS, the min-height is approximately 64px. If you are to fix a logo on the navbar, your logo should have a max-height of 64 px, else the logo will not be accommodated fully in the Navbar height. Supposedly, the logo which you would like to integrate with the website has the height which is greater than 64px and if you try to fit it in the Navbar, the visibility is affected.
Overflowing Logo in NavbarCoding for Navbar with logo
In order to fix this, we should be able to increase the navbar height instead of reducing the logo size and make it not visible on the website. This can be achieved by writing a CSS class for the Navbar.
How to increase navbar height in materialize CSS
This simple solution will help you increase navbar height and make your logo visible enough. Learn how to add Feature Discovery on Page Load
