https://github.com/codenameyau/flip.js
:package: Flip cards with minimal effort
https://github.com/codenameyau/flip.js
Last synced: about 1 year ago
JSON representation
:package: Flip cards with minimal effort
- Host: GitHub
- URL: https://github.com/codenameyau/flip.js
- Owner: codenameyau
- License: mit
- Created: 2015-02-28T21:26:52.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-11T16:39:02.000Z (almost 11 years ago)
- Last Synced: 2025-04-13T14:09:19.456Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://codenameyau.github.io/flip.js/
- Size: 144 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# flip.js
The goal of this library is to provide a customizable interface to flip HTML elements
while obfuscating the need for JavaScript. Customizations are done through HTML and CSS.
### Live Demo
http://codenameyau.github.io/flip.js/
## Installation
#### Bower
```
bower install flip.js --save
```
#### Manual
Copy the files in [build](https://github.com/codenameyau/flip.js/tree/master/build) to your assets folder.
Then add the following resources to your HTML.
```html
```
## Basic Usage
Please see the [example here](https://github.com/codenameyau/flip.js/tree/master/public/index.html).
```html
Front
Back
```
#### Styling
Styling your cards is as simple as adding and overriding your own css rules.
#### Flip Direction
Change the `data-flip` attribute to control the flip direction:
```html
data-flip="left"
data-flip="right"
data-flip="up"
data-flip="down"
```
## Contributing
Welcome! Some future goals for this library include adding
click event support and mobile support. There are a few opened
issues under the Alpha Release milestone.
Please work with the example in `public/` and leave `src/` and `build/` untouched.
Those two directories are autogenerated with gulp.