Giter Club home page Giter Club logo

scalable-css-playing-cards's Introduction

Intro

This project is a heavily modified version of Zack Waugh's Helveticards with following notable differences:

  1. Cards are scalable.
  2. Card size may be specific to individual cards or set of cards.
  3. Face cards have standard Anglo-American court images rendered from Chris Aguilar's vectorized-playing-cards SVG files.
  4. Uses custom font for suit symbols to provide visual consistency.
  5. Cards can be flipped to show the back-side.

At least for now, this is not a fire-and-forget project to me so please do suggest features and file issues.

Compatibility

Supported browsers are:

  • Recent versions of Chrome, Firefox, Safari
  • IE9
  • iOS and Android browsers [1]

[1] Renders and resizes just fine but dat-gui gets quirky to use.

scalable-css-playing-cards's People

Contributors

donpark avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scalable-css-playing-cards's Issues

vertical positions of suit symbols do not scale reliably

  • Gaps between symbols become inconsistent depending on rendered scale. For example, middle suit symbols in 8 and 9 are too close.
  • Center symbol sometimes become off center at small size.

Fix will likely require adding hinting suit symbol font then tweaking at runtime to address areas font hinting can't address effectively.

Remove or make optional unnecessary dependencies

Following dependencies will be either removed, made optional, isolated to demos, or limited in scope:

  • Backbone - remove
  • Bootstrap - remove or demo
  • Flippy - demo
  • Hogan.js - demo
  • jQuery - demo or limited to Zepto.js subset

Add guide and API documentation

To me, API docs are promises of sort.

Given there is little API to speak of and what is there now is wrapped in Backbone artifacts, docs will have to wait a bit. Sorry.

Replace Fabric

I like and use Fabric but it's not popular.

Current replacement candidates are:

  • grunt
  • cake

Create distribution version

Initially should include just compiled versions:

  • playingcards.jade
  • playingcards.styl, and
  • playingcards.coffee

Later add API docs and demos to run locally.

Support SVG

Court images used in face cards originating from SVG files should be optionally rendered in SVG for better quality.

Consider caching rendered images intelligently.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.