Skip to content
Card style based on Google Material color palette
Branch: master
Clone or download
marlenesco Update README.md
Removed old stuff
Latest commit ba94603 Sep 11, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist Masonry grid library integration May 11, 2016
js Repository rename Jul 25, 2015
less
.gitignore
LICENSE Initial commit Jul 21, 2015
README.md
bower.json

README.md

Material Cards

Simple user card based on Google Material Color palette and jQuery.

See full preview

Working demo on Codepen.io

Less files

material-cards.less
gm-variables.less
mixin.less
material-color.less

material-cards.less is the main .less file that includes the other .less files.
gm-variables.less contains all the color palette with the color accent.
mixin.less contains some utilities.
material-color.less contains the material color variant based on gm-variables.less

Installation

You can download full package and check the demo folder for implementation example or you can use bower:

bower install material-cards

Demo files require Font Awesome

Usage

Material Cards must be used in conjunction with jQuery.

You can choose to use it as a jQuery plugin or not. Demos for both usages are available in the demos folder. Using it as a jQuery plugin easies the management of options, methods and events for full customization.

Inside the js/ folder you can find the two files: jquery.material-cards.js and jquery.material-cards.min.js

Init jQuery Material Card

$('.material-card').materialCard(options);

Options

options = {
    icon_close	   : 'fa-arrow-left', //string
    icon_open	   : 'fa-bars',       //string
    icon_spin	   : 'fa-spin-fast',  //string
    card_activator : 'click'          //string: click or hover
});

The icons are from Font Awesome, fa-spin-fast is similar to fa-spin but spin faster.

The default card_activator is the click event on button card, but you can also use hover (this option remove the button).

Methods

toggle: change selected material card state

$('.material-card').materialCard('toggle');

open: open selected material card

$('.material-card:eq(1)').materialCard('open');

close: close selected material card

$('.material-card:eq(2)').materialCard('close');

isOpen: check material card status, return true or false

if($('.material-card:eq(3)').materialCard('isOpen') === true) {
	// do something
}

Events

  • show.material-card: triggered immediately when the open instance method is called
  • shown.material-card: triggered when the card becomes visible to the user (will wait the end of the CSS transitions)
  • hide.material-card: triggered immediately when the close instance method is called
  • hidden.material-card: triggered when the card has become hidden to the user (will wait for end of CSS transitions)

Examples

$('.material-card').on('shown.material-card', function (event) {
    console.log(event.type, event.namespace, $(this));
    //that return
    //shown material-card [article.material-card...]
});
var fullCardEvent = 'shown.material-card show.material-card hide.material-cards hidden.material-cards';
$('.material-cards').on(fullCardEvent, function (event) {
	//   do something
});

Material cards and Masonry grid library

check demo/material-cards_jquery-plugin_masonry.html material cards without a fixed height (use this less file less/material-cards-auto-height.less) and awesome javascript Masonry grid library.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.