Skip to content

curtisblackwell/flash_cards

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published