https://github.com/xerdi/material-design-flipper

Animated cards in bootstrap material design.
https://github.com/xerdi/material-design-flipper

Last synced: about 2 months ago
JSON representation

Animated cards in bootstrap material design.

• Host: GitHub
• URL: https://github.com/xerdi/material-design-flipper
• Owner: Xerdi
• Created: 2015-02-23T10:52:30.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-02-23T19:42:42.000Z (almost 10 years ago)
• Last Synced: 2023-02-28T10:01:33.964Z (almost 2 years ago)
• Language: CSS
• Size: 363 KB
• Stars: 29
• Watchers: 4
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Material-Design-Flipper

Animated cards in bootstrap material design.

## Dependencies

[Bootstrap material design](http://fezvrasta.github.io/bootstrap-material-design/)

## Put this in your ``````

```html

```

## Put this at the bottom of your ``````

```html

```

# Usage

## How to make the cards

```html



  

  


    

    


      


        

        
1

      

      

      

      


        
Card 1

      

    

    


      


        
2

      

      


        
Card 2

      

    

    


      


        
3

      

      


        
Card 3

      

    

  



```


## How to hook your cards

```javascript

//  Be sure to make a Flipper object first.

var flipper = new Flipper(document.getElementById("example-row"));

$('#first').click(function(e) {

  // make sure you put logical href links for people without javascript

  e.preventDefault();

  flipper.setCards([{

    // there is only one column for this example. add more full cards and then add here dictionaries to switch them.

    cardIndex: "0",

    activeIndex: "1"

  }]);

});

```