Flash Cards

Simple, animated, and imageless flash cards using HTML/CSS/jQuery.

Features

Easily tweaked appearance (requires SASS/Compass or old-fashioned overrides)
Simply edit variables in _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
Modernizr (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

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

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 <head>:

 <link href="http://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet" type="text/css">
 <script src="path/to/modernizr-2.5.3.min.js"></script>

and the following before </body>:

 <script src="path/to/flash_cards.min.js"></script>

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.

 <ul id="deck">
   <li class="card">

     <div class="side_one">
       <p>How many licks does it take to get to the center of a Tootsie Pop?</p>
     </div>

     <div class="side_two">
       <p>The world may never know.</p>
     </div>

   </li>
 </ul>

The Navigation

The navigation uses an icon font put together using IcoMoon, so it contains only the necessary characters to keep file size down.

The markup follows Jon Hicks' data-icon method.

 <div id="nav_deck">
   <span class="icon" id="prev" data-icon="<"><span class="visuallyhidden">Previous</span></span>
   <span class="icon" id="flipper" data-icon="/"><span class="visuallyhidden">Flip</span></span>
   <span class="icon" id="next" data-icon=">"><span class="visuallyhidden">Next</span></span>
 </div>

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.

 <div id="keyboard_shortcuts">
   <h1>Keyboard Shortcuts</h1>
   <table>
     <tbody>
       <tr>
         <td>Previous Card</td>
         <td>&larr;</td>
       </tr>
       <tr>
         <td>Next Card</td>
         <td>&rarr;</td>
       </tr>
       <tr>
         <td>Flip Card</td>
         <td>&uarr; <span class="or">/</span> &darr; <span class="or">/</span> Return <span class="or">/</span> Space</td>
       </tr>
       <tr>
         <td>Show/Hide Keyboard Shortcuts</td>
         <td>?</td>
       </tr>
     </tbody>
   </table>
 </div>

 <div class="icon" id="keyboard_shortcuts_toggle" data-icon="k"><span class="visuallyhidden">Keyboard Shortcuts</span></div>

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.

curtisblackwell/flash_cards