Javascript

Framaterial is shipped with some cool javascript functions, most of the time, to use them, you justhave to add some data-attributes, here is an idex of all the available functions

Initialize framaterial

Sidebar

Ripples

Cards & modals

Toasts and Snackbar

Paragraphs

Animations

Initialize Framaterial

The .material-design class

When you load framaterial.js onto your website, the script will look for a .material-design class, somewhere in your html. If the class is not found, the script will append it to the <body> tag. We recommand to add it directly when you start a framaterial project.

Sidebar

Custom header

When you create a sidebar, you probably want to add an header image to it, to add more impact or just to match your identity.

To do it, you just have to add a custom data-attribute on the <header> tag :

<nav class="material-sidebar-left-out-lightblue" data-state="open"> 

<header data-image-url="path/to/your/image.png|svg|jpeg|gif">
</header>

<ul> 
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>
<span class="divider"></span>
<ul> 
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>
</nav>

Ripples

Ripples on elements

There is a sweet concept that comes with Material design, it's the "Ripples" effect, typically, it's a ripple effect animation that occurs on some clicked elements such as buttons.

By default, the effect is applied to buttons, but you can add it on any alements you want, by giving them the attribute : hasRipple

<!-- Without ripples -->
<ul>
  <li><a href="#"> item </a></li>
  <li><a href="#"> item </a></li>
  <li><a href="#"> item </a></li>
</ul>

<!-- With ripples -->
<ul>
  <li><a href="#" hasRipple> item </a></li>
  <li><a href="#" hasRipple> item </a></li>
  <li><a href="#" hasRipple> item </a></li>
</ul>

And this attribute can be used on any elements you want, images included

Default Ripple behaviour

As mentionned over, by default, the ripple effect is applied on any kind of buttons.

Cards and Modals

The cards are a nice asset in the Material guidelines, it's the bridge between desktop and mobile interface, giving us the ability to evovle in an interface, with cards, that could perfectly addapt to each screen size, and here are few features made for them, powered by javascript

Header Image

Sometimes, you will want to add an image to your cards or modals, to illustrate a context, to give an information or anything else, and thats why the possibility to change an header image is simple, just a custom data-attribute to use :

<!-- Indicate the image url with the data-background-url -->
<div class="m-card" data-type="modal"  data-background-url="../images/samples/header_sample_2.png">

<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
  <h2 class="title">A simple card</h2>
  <p>Some text..</p>
</section>
<footer>
  <a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
  <a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div>

As you can see, after indicating the data-background-url, you have to call it on the <header> tag.

Header Color

Instead of images, sometimes you may only want to use a color, the proceedure is the same as for the image, but with an other data-attribute :

<!-- Indicate the header color with the data-background-color -->
<div class="m-card" data-type="modal"  data-background-color="#03a9f4">

<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
  <h2 class="title">A simple card</h2>
  <p>Some text..</p>
</section>
<footer>
  <a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
  <a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div>

Header Text

You may want to use text on this zone, to give a title or to indicate something to the user, there is a data-attribute for it:

<!-- Indicate the text to disaply with the data-background-text -->
<div class="m-card" data-type="modal"  data-background-text="I'm a header" >

<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
  <h2 class="title">A simple card</h2>
  <p>Some text..</p>
</section>
<footer>
  <a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
  <a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div>

Of course, you can merge all the attributes to personalize your modals.

To turn a basic card into a modal, you have to add the data-type="modal" to your card, here is a simple example

<div class="m-card" data-background-color="tomato" data-abckground-text="I am a modal" data-type="modal" data-depth="3" id="modal">
<header data-background>
</header>
<section class="inner__card">
<h2 class="title">A simple card</h2>
<p>Some text..</p>
</section>
<footer>
<a href="#modal" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
<a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div>

The aim of a modal is to be toggled when needed, for it you need to add an attribute on the link you want to use to trigger the modal, the data-btn-type="modal" attribute.

Toasts & Snackbars

This component is a must have for material design frameworks, it's a new way to display informations to your user, showing him small messages box, that appear on a corner of the screen, as well a desktop screen to a smartphone screen.

All the javascript functions presented here works on both toasts and snackbars.

Toasts & Snackbars text

To add a custom message to your toasts and snackbars, you just have to fill the proper attribute (data-toast-inner) on the trigger :

<a href="#toast1" data-toast-inner="I'm a toast message" data-toggle="toast">Show toast</a>

And repeat the operation to add a text to a snackbar :

<a href="#snackbar1" data-snackbar-inner="I'm a snackbar message" data-toggle="snackbar">Show snackbar</a>

Of course, the good thing about those toasts & snackbars, is that they are fully customizables, you can set any messages or auto generated messages, for example :

<script>
$(function(){
  
  var i = 0;

  setInterval(function(){
    i++;
    $('a').attr('data-toast-inner',i);
  }, 1000);

  $('a').on('click', function(e){
    $('#toast_1').empty().html($('a[href*="toast"]').attr('data-toast-inner'));
  })

});
</script>            
<a
href="#toast1"                     <!-- Toast target-->
class="material-btn-blue"
data-toggle="toast"                <!-- Which toggle <toast><snackbar>-->
data-toast-posy="bottom"           <!-- Position on Y axis-->
data-toast-posx="right"            <!-- Position on X axis-->
data-toast-inner="Hello"           <!-- Message of the toast-->
data-toast-delay="5"               <!-- Delay until fadeout-->
>Show Toast top left<a>

This is a, example of what is possible with those toasts and snackbars, you can of course merge them with a templating system such as handlebars.