Materialize Card Animation

Learn Materialize Card Animation and implement in your projects

Materialize Card Animation – Introduction:

Materialize CSS Framework provides several card layouts which include Simple Card, Card with Image, Card with Action, Horizontal Cards, etc. There are several instances where web developers require card animation. For example, when a mouse hovers on a card, it should rotate and reveal the new card. There is no default option in Materialize CSS Framework to animate a card, this tutorial/plugin will enable the web developers to animate a card, i.e., on hovering over the card it will rotate 360 degrees horizontally and will display a new card with different information on it. Let’s get started.

Step 1

Create a dummy Materialize CSS framework template from the Materialize CSS website. You can either use CDN method or download the respective CSS and JS file from the website. In this tutorial, we have utilized CDN, alternatively, you can download the files and add the CSS and JS links in the HTML file.

http://materializecss.com/getting-started.html

Step 2

After creating the dummy Materialize CSS template, add the Materialize CSS card from the Materialize CSS website. In the tutorial, we have opted the Simple Materialize CSS card. Note that in the tutorial we have changed the color of the card and text on the card. However, these attributes can be changed according to the requirement. Furthermore, we have fixed the width of the card to M4 for the demo, even this can be changed according to the requirement.

<div class="row">
<div class="col s12">
<div class="card white">
<div class="card-content black-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="#" class="black-text">This is a link</a>
</div>
</div>
</div>
</div>
Materialize CSS Card

Step 3

Once we have added the Simple Card, we can now add the functionality for hover to rotate the card. Basically, the functionality here is to rotate the card to reveal a new card when hovered over the inserted card. In order to achieve this Materialize Card Animation, we will be leveraging several CSS properties such as Transform, Perspective, Transform Style, Transition, Z-Index. The respective CSS and HTML script are given. We have differentiated the Front View Card and Back View Card with the classes Front and Back. Ideally, the card inside the Front class is the default card and the card inside the Back class is the card with will appear on hover.

CSS Properties to be added

/* entire container, keeps perspective */
                .flip-container {
                    perspective: 1000px;
                }
                    /* flip the pane when hovered */
                .flip-container:hover .flipper, .flip-container.hover .flipper {
                        transform: rotateY(180deg);
                    }
                .flip-container, .front, .back {
                    width: 300px;
                    height: 480px;
                }
                /* flip speed goes here */
                .flipper {
                    transition: 0.6s;
                    transform-style: preserve-3d;
                    position: relative;
                }
                /* hide back of pane during swap */
                .front, .back {
                    backface-visibility: hidden;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                /* front pane, placed above back */
                .front {
                    z-index: 2;
                    /* for firefox 31 */
                    transform: rotateY(0deg);
                }
                /* back, initially hidden pane */
                .back {
                    transform: rotateY(180deg);
                }

HTML Code

<div class="row">
      <div class="col m4 offset-m4 s12">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
            <div class="front">			
              <div class="row">
                <div class="col s12 m12">
                      <div class="card black darken-1">
                        <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="#" class="white-text">This is a link</a>
                        </div>
                      </div>
                </div>
                </div>
            </div>
        <div class="back">			
              <div class="row">
                <div class="col s12">
                  <div class="card white">
                    <div class="card-content black-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="#" class="black-text">This is a link</a>                 
                     </div>
                  </div>
                </div>
              </div>
        </div>
	</div>
</div>
          </div>
</div>
Materialize CSS Card Back Side
Materialize Card Animation
Materialize CSS Card Animation

Learn about Materialize CSS Nested Dropdown

Navbar with Autocomplete Search Box in 3 Easy Steps

Learn Navbar with AutoComplete Search Box and implement in your web project

The navigation bar is one of the important components in the website, which allows the user to navigate the website. Materialize CSS provides several variations, however, there are no variants with the Navigation bar with Search. For several websites, it requires a search box to be embedded in the Navigation Bar. The following tutorials will help you to embed the search bar in the Navigation Bar. The search functionality adapted in this tutorial is Autocomplete Search Bar provided in the Materialize CSS website.

Step 1:

Create a dummy Materialize CSS framework template from the Materialize CSS website. You can either use CDN method or download the respective CSS and JS file from the website. In this tutorial, we have utilized CDN, alternatively, you can download the files and add the CSS and JS links in the HTML file.

http://materializecss.com/getting-started.html

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/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>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
</body>
</html>

Step 2

Once you have created the template, the next step will be adding Navigation Bar to the HTML.

<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
Basic Navbar using Materialize CSS

Step 3:

After inserting the Navigation Bar, we need to customize the Navigation Bar according to our needs. Here, we have changed the colour of the Navigation Bar to white and fixed the Autocomplete Search Box in the Navigation Bar, however, these can be customized by tweaking the CSS property.

<nav class=”white”> will change the Navbar to white

Since all the text in the HTML file is in white colour, we need to change the colour to red. This can be done by simply adding class=”red-text” inside the respective elements.

Once we have changed the font colour to red, we need to insert the autocomplete search from the Materialize CSS and add the respective js in the script section.

<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){                 
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": null,
"Gargle":null
}
});                
});
</script>       

Once the autocomplete is added we need to fix the location of the autocomplete search box in the Navigation Bar. In order to achieve it, we should add the aforementioned HTML script in <li> element on the Navigation Bar just above the Menu Items.

After inserting the Autocomplete Search Box in the Navigation Bar, we need to fix the alignment issues. In order to achieve perfect alignment keeping in mind not to affect other autocomplete search boxes, we can ID the current autocomplete search as “topbarsearch” and write CSS properties for this ID.

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>       
        #topbarsearch .input-field .prefix { 
            width:0rem !important;    
            }        
        #topbarsearch nav ul li:hover, nav ul li.active {
                background-color: none !important;
            }
        .input-field .prefix ~ input, .input-field .prefix ~ textarea, .input-field .prefix ~ label, .input-field .prefix ~ .validate ~ label, .input-field .prefix ~ .autocomplete-content{
            margin-left: 1rem !important;
            }
        </style>        
    </head>
    <body>         
        <nav class="white">
            <div class="nav-wrapper">
              <a href="#" class="brand-logo red-text">Logo</a>   
                <ul class="hide-on-med-and-down right">               
                    <li>    
                       <div class="center row">
                          <div class="col s12 " >
                            <div class="row" id="topbarsearch">
                              <div class="input-field col s6 s12 red-text">
                                <i class="red-text material-icons prefix">search</i>
                                <input type="text" placeholder="search" id="autocomplete-input" class="autocomplete red-text" >
                                </div>
                              </div>
                            </div>
                          </div>          
                      </li>                     
                    <li><a href="sass.html" class="red-text">Sass</a></li>
                    <li><a href="badges.html" class="red-text">Components</a></li>
                    <li><a href="collapsible.html" class="red-text">JavaScript</a></li>
                </ul>
            </div>
          </nav>        
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
      <script>
            $(document).ready(function(){                 
                $('input.autocomplete').autocomplete({
                data: {
                    "Apple": null,
                    "Microsoft": null,
                    "Google": null,
                    "Gargle":null
                }
                });                
                });
      </script>        
    </body>
  </html>
Navbar with Autocomplete Search Box
Navbar with Autocomplete Search Box
Navbar with Autocomplete Search Box

The required Navbar with autocomplete search box is thus created. Note that, the colour and alignment of this search box and navigation bar can be customized by changing the CSS property accordingly.

Learn about Nested Dropdown in MaterializeCSS.

Nested Dropdown in Materialize CSS in Easy 3 steps

Learn how to create Nested Dropdown in Materialize CSS

Nested dropdown is one of the most important elements web developers look for while designing the website. Materialize CSS Framework does not offer nested dropdown in their repository. In this tutorial, you will be learning how to create a nested dropdown menu in Materialize CSS framework. 

Creating Dropdown Button:

Initially, we need to insert the dropdown button from the Materialize CSS Framework. We need to add the respective JS for the dropdown menu.

Step 1: 

Create an HTML template from the Materialize CSS official website. Use the following link:

http://materializecss.com/getting-started.html


  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.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>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    </body>
  </html>

Step 2:

Add the DropDown button as given on the website. Use the following link: 

http://materializecss.com/dropdown.html

Dropdown Code
Dropdown Button
Dropdown Open

Step 3:

We can now add the nested dropdown in created dropdown button.

  1. In the last list item in <ul>, we can now copy paste the classes for the dropdown menu. 
  2. Change the data-activates option to dropdown2 and change the class name to dropdown-button2
  3. Insert the following javascript within the script tag.
  4. Add the following style just above the </head> tag
 <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <style>.dropdown-content{
    overflow: visible !important;
}</style>
    </head>

    <body>
     <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
        <ul id='dropdown1' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
            <li class="divider"></li>
            <li>
                <a class='dropdown-button2' href='#' data-activates='dropdown2'>Dropdown></a>
            </li>
        </ul>
        <ul id='dropdown2' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
        </ul>
        
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
      <script>
        $(document).ready(function(){
          $('.dropdown-button2').dropdown({
              inDuration: 300,
              outDuration: 225,
              constrain_width: false, // Does not change width of dropdown to that of the activator
              hover: true, // Activate on hover
              gutter: ($('.dropdown-content').width()*3)/2.5 + 2, // Spacing from edge
              belowOrigin: false, // Displays dropdown below the button
              alignment: 'left' // Displays dropdown with edge aligned to the left of button
            }
          );
         
        });
        </script>
    </body>
  </html>
Nested Dropdown Button
Nested Dropdown in Materialize CSS
Nested Dropdown Open

We have successfully created the nested dropdown in Materialize CSS framework.

In this tutorials series, you’ll learn more Materialize CSS Plugins, Working Codes and tutorials. In the next tutorial, you’ll learn how to create Navbar with Autocomplete Search Box

Extension and Operators in SASS

Extension and Operators in SASS. Learn and implement Extension and operators in SASS.

The extension is a feature in SASS / SCSS through which we can apply styles of one class to another just by calling the @extend in the subsequent class. Here’s the following example in which we have explained the classic use case of extending 

Create a class with the name paragraph1

.paragraph1{
    color: red;
    background: white; 
    &:hover{
        color: pink;
    }
}

Create another class with the name paragraph2 and inside it call the paragraph1 style with @extend function.

.paragraph2{
    @extend .paragraph1;
    &:hover{
        color: yellow;
    }
}

Operators in SASS / SCSS is similar to CSS operators. There are operator functions such as addition, subtraction, multiplication and division. 

How operators are used in CSS:

.paragraph1{
    width:  calc(80% - 40%);
}

How operators are used in SASS / SCSS: 

.paragraph1 {
    width: 80% - 40%;
}

There is no need to use the calc function. 

The basics of SASS / SCSS is over with the extend and operators. You can explore more with the learning in your projects.

Light and Dark Theme using Mixin

Light and Dark Theme using Mixin and implement in your web projects.

It is possible to switch between a dark and light theme using simple SCSS  / SASS without many code lines. We can leverage Mixin to achieve the change in light and dark themes. Following is the code for creating Mixin which can easily switch between light and dark themes. 

We will leverage two functions lighten and darken inside Mixin two achieve the functionality. Lighten function will help lighten the applied colour, and darken function will help darken the used colour. 

$primary-color: #000000;
$text-color: #3af80a;
$secondary-color: #432396;

@mixin theme($light-theme: true) {
    @if $light-theme{
        background: lighten($primary-color, 100%);
        color: darken ($text-color, 100%);
    }
}

Now create a class called light and apply it to the body tag. Inside the light class now include the theme mixin to enable the theme switch property.

.light{
    @include theme ($light-theme: true);
}

If the $light-theme is true, the HTML page will apply a light theme, the background colour will be light, and the text colour will be dark. If the $light-theme is false, the HTML page will apply a dark theme. 

.light{
    @include theme ($light-theme: false);
}

The above code will create a dark background and light text colour. In the next tutorial, we will learn Extension and Operators in SASS / SCSS.

Mixins in SASS

Learn Mixins in SASS and reutilize style

Mixins permit you to characterize styles that can be re-utilized all through your stylesheet. They make it simple to try not to utilize non-semantic classes like .float-left and to disperse assortments of libraries’ styles. 

Mixins are characterized utilizing the @mixin at-rule, which is composed @mixin <name> { … } or @mixin name(<arguments…>) { … }

Following is a simple example of using mixing to define content to centre.

@mixin flexCenter{

display: flex;

justify-content: center; 

align-items: center; 

}

Now just using @include to call the mixin will copy the entire style. The beauty is that it can be called n number of times inside the SCSS file.

.main {

@include flexCenter;

}

The SCSS compiles to the following CSS

.main {

display: flex;

justify-content: center; 

align-items: center; 

}

Here’s another classic example using arguments inside mixins to define the flex-direction. 

@mixin flexCenter($direction) {

flex-direction: $direction

}

To call the mixin with the argument, follow the example.

.main{

@include flexCenter(column);

}

The column parameter defined inside flexCenter mixin will specify the flex-direction to the column, and the following is equivalent CSS

.main {

display: flex;

justify-content: center; 

align-items: center; 

flex-direction: column

}

Learn to implement

Functions in SASS

Learn functions in sass. Create functions, call them and level up your SASS Skills.

Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return values in SASS / SCSS. 

Functions are characterized utilizing the @function at-rule, which is composed @function <name>(<arguments…>) { … }

Following is a simple demonstration of how we can implement a function in SASS / SCSS. Let’s define the variable font-weights to allocate a name to respective font-weight such as light, regular and bold.

$font-weights:(
    "light": 300,
    "regular": 400,
    "bold": 700
);

Next, we can define the function weight to integrate the font-weights class.

@function weight($weight-name){
    @return map-get($font-weights , $weight-name)
}

Now, we can directly leverage function by calling the function weight to define font-weight in CSS

.main{
     font-weight: weight(light);
}

The respective output CSS will be as follows:

.main{
    font-weight: 300;
}

In the next tutorial, we will be learning Mixins in SASS

partials in sass

Easily implement Partials in SASS in 2021

Learn Partials in SASS quickly in 5 mins and start implementing in your projects

Partial in SASS / SCSS is useful when the project files are enormous. Reusing or maintaining such huge SCSS files is cumbersome. Partial SCSS allows developers to split the variable, resets or page-wise SCSS separately and quickly embed them in the main SCSS. The main advantage of SASS is that partial SCSS files will not compile into new CSS files and therefore it becomes easier to manage. 

partials in sass
Partials in SASS

To make a particular SCSS a partial file, we can add an underscore before the file name and follow by .scss extension. For example, if we are to take variables of the main scss to a partial file, we can cut the variables and paste in a new scss file with the name _variables.scss and we can embed it using the import function in the main scss. 

SCSS file before the split of partial SCSS files: 

File name: main.scss

$primary-color: #d2d2d2;

$secondary-color: #322332;

$accent-color: #435434;

$text-color: #0000;

p{

color:$primary-color;

background-color: $secondary-color;

}

CSS Output

p{

color: #d2d2d2;

background-color: #322332;

}

Split variables to new SCSS files

File name: _variables.scss

$primary-color: #d2d2d2;

$secondary-color: #322332;

$accent-color: #435434;

$text-color: #0000;

File name: main.scss

@import './variables'; 

p{

color:$primary-color;

background-color: $secondary-color;

}

Please note: No need to call the filename with an extension scss, calling just the name of the file is sufficient

CSS Output

p{

color: #d2d2d2;

background-color: #322332;

}

In the next tutorials, we will learn how to create functions and call functions in SASS.

For more details about various courses, check out Ampersand Academy.

Nesting in SASS

Learn Nesting in SASS with easy guide and working examples

Nesting in SASS / SCSS is easy with the help of “&” to achieve the nesting. In SASS “&” behaves uniquely and it denotes the current selector.  The selector changes as we nest down.  If we want to define a division with a width of 80% and aligning to a centre with margin style, we use the following code.

.main{
    width:80%;
    margin: 0 auto;
}

Now if we want to apply the class inside main and with the name of main_new. The class main_new defines the style inside the main class. We can nest it with the following code.

.main{
    width:80%;
    margin:0 auto;
    &_new{
        font-size: 2em;
    }
}

The above SCSS will compile into the following CSS code. 

.main {
    width:80%;
    margin:0 auto;
}
.main_new{
    font-size: 2em;
}

To copy the SCSS expression string to the subclass, we can use “#{&}” to copy the entire main class expression to the following subclass. If we want to achieve the CSS as mentioned below, we can use the nesting with interpolation.

Desired CSS

.main{
    width:80%;
    margin:0 auto;
}

.main .main_new{
    font-size:2em;
}

Actual SCSS Code

.main{
    width:80%;
    margin:0 auto;
    #{&}_new{
        font-size: 2em;
    }
}

Successfully, you have learned nesting in SASS. In the next tutorial, we will be learning Partials in SASS, how to implement partials in your website project

Variables in SASS

What are variables in SASS and Learn Variables in SASS

Sass variables are basic: you relegate a value to a name that starts with $, and afterwards, you can allude to that name rather than the actual worth. In any case, notwithstanding their straightforwardness, they’re perhaps the most valuable tool Sass brings to the table. Variables make it conceivable to lessen redundancy, do complex math, arrange libraries, and considerably more.

A variable affirmation looks a great deal like a property assertion: it’s composed <variable>: <expression>. In contrast to a property, which must be pronounced in a style rule or at-rule, variables can be proclaimed anyplace you need. To utilize a variable, simply remember it for worth.

CSS also has its variables, and CSS variables are compatible with almost 90% of the available browsers. Following is CSS variable syntax.

:root{
	--blue:#1e90ff;
}

To call the variable syntax in CSS is as follows.

p{
	background-color: var(--blue);
}

SASS variables are easy to implement. The SASS variable starts with $ and its easy to call the variable by prefixing the $ just before the variable name. Both SASS and SCSS variables begin with $. By implementing the following code, you’ll learn variables in SASS.

SASS Variable Syntax

$primary-color: #d2d2d2
p
	color: $primary-color

SCSS Variable Syntax

$primary-color: #d2d2d2;
p{
	color:$primary-color;
}

CSS Output

p{
	color: #d2d2d2
}

CSS Variables vs. SASS Variables

CSS has variables of its own, which are entirely different from Sass variables. Know the distinctions! Sass variables are completely gathered away by Sass. CSS variables are remembered for the CSS yield. CSS variables can have various qualities for various components, however, Sass variables just have each worth in turn. Sass variables are basic, which implies assuming you utilize a variable and, change its worth, the previous use will remain something very similar. CSS variables are explanatory, which implies in the event that you change the worth, it’ll influence both prior utilizes and later employments.

In the next tutorial, we will be learning Nesting and Interpolation in SASS.