Curtisblackwell Flash Cards Save

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

Project README

Flash Cards

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.


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:

    Your SASS directory

    Your CSS directory
    The contents of the js folder Your javascript directory
    resources Your root
  2. Include necessary code.


    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="" 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>
  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.

     <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 class="side_two">
           <p>The world may never know.</p>

    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>

    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>
             <td>Previous Card</td>
             <td>Next Card</td>
             <td>Flip Card</td>
             <td>&uarr; <span class="or">/</span> &darr; <span class="or">/</span> Return <span class="or">/</span> Space</td>
             <td>Show/Hide Keyboard Shortcuts</td>
     <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.


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

Open Source Agenda is not affiliated with "Curtisblackwell Flash Cards" Project. README Source: curtisblackwell/flash_cards
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating