<commit_before># 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
Manual: Copy the files in [build](https://github.com/codenameyau/flip.js/tree/master/build) to your assets folder.

Bower: `bower install flip.js --save`

## Basic Usage

Please see the [example here](https://github.com/codenameyau/flip.js/tree/master/public).

```html
<!-- Blank Flip Card -->
<div class="flip" data-flip="left">
  <div class="flip-body">
    <div class="flip-front">
      <h1 class="card-header">Front</h1>
    </div>
    <div class="flip-back">
      <h1 class="card-header">Back</h1>
    </div>
  </div>
</div>
```

#### Styling
Styling your cards is as simple as adding and overriding your own css rules.

#### Flip Direction
Change the `data-flip` attribute to any of the following:
- left
- right
- up
- down

#### Future
Some future goals include adding additional events and mobile support.<commit_msg>Updated README with installation and contributing<commit_after># 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
<link rel="stylesheet" href="flip.min.css">
<script src="flip.min.js"></script>
```

## Basic Usage

Please see the [example here](https://github.com/codenameyau/flip.js/tree/master/public).

```html
<!-- Blank Flip Card -->
<div class="flip" data-flip="left">
  <div class="flip-body">
    <div class="flip-front">
      <h1 class="card-header">Front</h1>
    </div>
    <div class="flip-back">
      <h1 class="card-header">Back</h1>
    </div>
  </div>
</div>
```

#### Styling
Styling your cards is as simple as adding and overriding your own css rules.

#### Flip Direction
Change the `data-flip` attribute to any of the following:
- left
- right
- up
- down

## Contributing
Welcome! Some future goals for this library include adding
additional events 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.
{'fraction_non_alphanumeric': 0.13041810510164942, 'fraction_numerical': 0.0030686612965093976, 'mean_word_length': 3.9487666034155597, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 32, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6139598', 'n_tokens_mistral': 838, 'n_tokens_neox': 792, 'n_words': 289}