cardsuit . css

What is it?

cardsuit.css is a stylesheet with an inline image sprite to show all possible cards in a deck.

Getting started

Simply include the following <link> tag in your HTML file (or download the CSS file here and use that one instead):

<link rel="stylesheet" src="http://kevinvanderburg.nl/cardsuit/cardsuit.min.css">

Usage

To initialize cardsuit.css, add the class cardsuit to one of the content containers. This can be the <body> tag if you'd like.

You can now add an empty <span> in your content, give it a class of the card you'd like to show, and the corresponding card will be shown in the code.

Examples

#todo

I'm working on a font-based version 2.0 to support multiple (retina) resolutions and enhance readability altogether. A font-based version 2.0 β is available here. A jQuery plugin to auto-convert text to cardsuit.css compatible <span>s is expected soon.