# Flash Cards Simple, animated, and imageless flash cards using HTML/CSS/jQuery. ## Features * Easily tweaked appearance (requires [SASS](http://sass-lang.com)/[Compass](http://compass-style.org) or old-fashioned overrides) Simply edit variables in [_flash_cards.scss](/curtisblackwell/flash_cards/blob/master/css/_flash_cards.scss) to update dimensions and colors. * Simple markup The deck is a list and the cards are list items with a div for each side. * No images Cards are 100% CSS, and buttons are an icon font consisting only of the icons used. ## Dependencies * jQuery * [jQuery Cycle](http://jquery.malsup.com/cycle) * [Modernizr](http://modernizr.com) (If you want the 3D transforms fallback) ## Browser Support This has been tested only in Chrome (21.0.1155.2 dev) and Firefox (12.0). I plan to support all major browsers, but I haven't had the need yet. ## Setup & Usage 1. ### Put the files in place.

Files	Location
If you're using SASS/Compass: `_flash_cards.scss` and `_fonts.scss` If you're not using SASS/Compass: `style.css`	Your SASS directory Your CSS directory
The contents of the `js` folder	Your javascript directory
`resources`	Your root

2. ### Include necessary code. #### .css If you're SASSin' and Compassin' it up, `@import "flash_cards";` into your `.scss`. If not, use `style.css`. #### .js (and font) Place the following in your ``: and the following before ``: 3. ### The Markup #### The Deck The deck is a list with an id of deck. Each card is a list item containing a div for each side, each div contains a paragraph.

How many licks does it take to get to the center of a Tootsie Pop?

The world may never know.

#### The Navigation The navigation uses an icon font put together using [IcoMoon](http://keyamoon.com/icomoon/app/), so it contains only the necessary characters to keep file size down. The markup follows Jon Hicks' [data-icon method](http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes).

Previous Flip Next

#### The Keyboard Shortcuts I created a table to display the available keyboard shortcuts, accessible via clicking an element with an id of icon or hitting the forward-slash/question mark key.

Keyboard Shortcuts

Previous Card	←
Next Card	→
Flip Card	↑ / ↓ / Return / Space
Show/Hide Keyboard Shortcuts	?

Keyboard Shortcuts

## Icons not displaying properly? Check the paths to the font files in `_fonts.scss` or `style.css`. ## License

Flash Cards by Curtis Blackwell is licensed under a Creative Commons Attribution 4.0 International License.