https://github.com/marlenesco/material-cards
Card style based on Google Material color palette
https://github.com/marlenesco/material-cards
color-palette css-transitions jquery jquery-plugin material-cards material-design user-cards
Last synced: 6 months ago
JSON representation
Card style based on Google Material color palette
- Host: GitHub
- URL: https://github.com/marlenesco/material-cards
- Owner: marlenesco
- License: mit
- Created: 2015-07-21T15:03:54.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-10-20T16:59:46.000Z (over 2 years ago)
- Last Synced: 2024-07-21T16:33:22.734Z (10 months ago)
- Topics: color-palette, css-transitions, jquery, jquery-plugin, material-cards, material-design, user-cards
- Language: Less
- Homepage: http://codepen.io/marlenesco/full/NqOozj/
- Size: 45.9 KB
- Stars: 399
- Watchers: 24
- Forks: 128
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Material Cards
==============
Simple user card based on [Google Material Color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) and jQuery.
[](http://codepen.io/marlenesco/full/NqOozj/)
[Working demo on Codepen.io](http://codepen.io/marlenesco/full/NqOozj/)
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](https://www.google.com/design/spec/style/color.html#color-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](http://fortawesome.github.io/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
```javascript
$('.material-card').materialCard(options);
```
### Options
```javascript
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](http://fortawesome.github.io/Font-Awesome/), `fa-spin-fast` is similar to [`fa-spin`](http://fortawesome.github.io/Font-Awesome/examples/#animated) 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
```javascript
$('.material-card').materialCard('toggle');
```
`open`: open selected material card
```javascript
$('.material-card:eq(1)').materialCard('open');
```
`close`: close selected material card
```javascript
$('.material-card:eq(2)').materialCard('close');
```
`isOpen`: check material card status, return **true** or **false**
```javascript
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
```javascript
$('.material-card').on('shown.material-card', function (event) {
console.log(event.type, event.namespace, $(this));
//that return
//shown material-card [article.material-card...]
});
```
```javascript
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](http://masonry.desandro.com/).