Simple, animated, and imageless flash cards using HTML/CSS/jQuery.
- 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.
- jQuery
- jQuery Cycle
- Modernizr (If you want the 3D transforms fallback)
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.
-
Files Location If you're using SASS/Compass:
_flash_cards.scssand_fonts.scss
If you're not using SASS/Compass:
style.css
Your SASS directory
Your CSS directoryThe contents of the jsfolderYour javascript directory resourcesYour root -
If you're SASSin' and Compassin' it up,
@import "flash_cards";into your.scss. If not, usestyle.css.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 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 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>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>←</td> </tr> <tr> <td>Next Card</td> <td>→</td> </tr> <tr> <td>Flip Card</td> <td>↑ <span class="or">/</span> ↓ <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>
Check the paths to the font files in _fonts.scss or style.css.
Flash Cards by Curtis Blackwell is licensed under a Creative Commons Attribution 4.0 International License.
