Skip to content

Commit

Permalink
Merge branch 'hotfix/doc-updates' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
kenkeiter committed Sep 4, 2013
2 parents ac5011d + 472fd5c commit dbc71f9
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 10 deletions.
2 changes: 1 addition & 1 deletion .semver
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
:major: 1
:minor: 0
:patch: 0
:patch: 1
:special: ''
22 changes: 19 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
# Skeuocard (v1.0.0)
# Skeuocard (v1.0.1)

_Skeuocard_ is a re-think of the way we handle credit card input on the web. It progressively enhances credit card input forms so that the card inputs become skeuomorphic, facilitating accurate and fast card entry, and removing barriers to purchase.

You can try it out at [http://kenkeiter.com/skeuocard](http://kenkeiter.com/skeuocard).

For more on the theory behind Skeuocard, check out the blog post that started it all: [_"Redesigning Credit Card Inputs"_](http://kenkeiter.com/2013/07/21/redesigning-credit-card-inputs/) by [me (Ken Keiter)](http://kenkeiter.com/).

![Skeuocard at its finest.](https://raw.github.com/kenkeiter/skeuocard/master/screenshot.png)
Expand All @@ -27,8 +29,8 @@ Or you can link the necessary style sheets and scripts, and make sure any asset
<!-- ... your CSS includes ... -->
<link rel="stylesheet" href="styles/skeuocard.reset.css" />
<link rel="stylesheet" href="styles/skeuocard.css" />
<script src="/javascripts/vendor/css_browser_selector.js"></script>
<script src="/javascripts/skeuocard.js"></script>
<link rel="stylesheet" href="styles/demo.css">
<script src="javascripts/vendor/cssua.min.js"></script>
<!-- ... -->
</head>
```
Expand All @@ -39,13 +41,17 @@ Side note: If you'd like to use different input `name`s or selectors, you can sp

```html
<div class="credit-card-input no-js" id="skeuocard">
<p class="no-support-warning">
Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
</p>
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
Expand Down Expand Up @@ -182,6 +188,16 @@ new Skeuocard($("#skeuocard"), {
});
```

#### jQuery's noConflict Mode

If you are using jQuery's `noConflict` mode, you'll need to instantiate your Skeuocard instance slightly differently than above:

```javascript
jQuery(document).ready(function(){
card = new Skeuocard(jQuery("#skeuocard"));
});
```

#### Progressive Enhancement

Progressive enhancement was really important to me when creating this plugin. I wanted to make sure that a potential purchase opportunity would never be denied by a failure in Skeuocard, so I chose to take an approach which would leave the users with a functional, styled form in the event that Skeuocard fails.
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "skeuocard",
"keywords": ["credit", "card", "skeuomorphism"],
"description": "Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.",
"version": "1.0.0",
"version": "1.0.1",
"license": "The MIT License (MIT)",
"readmeFilename": "README.md",
"repository": {
Expand Down
11 changes: 7 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,13 @@ <h3>Give it a try.</h3>

<pre>
Visa: 4111111111111111
American Express: 371111111111114
MasterCard: 5111111111111118
Discover: 6011111111111117
Diners Club: 30951111111116
MasterCard: 5111111111111118
Maestro: 5018111111111112
JCB: 3511111111111119
Union Pay: 6211111111111111
American Express: 371111111111114
Diners Club: 38111111111119
</pre>

<p>The numbers above will work with any expiration date (as long as it's in the future), any name, and any CVC code (the three or four digit verification code), since those are all validated on the server side upon authorization.</p>
Expand Down Expand Up @@ -111,7 +114,7 @@ <h3>Get It!</h3>

if(isBrowserCompatible){
window.card = new Skeuocard($("#skeuocard"), {
debug: true
debug: false
});
}
});
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "Skeuocard",
"description": "A skeuomorphic credit-card input.",
"homepage": "http://github.com/kenkeiter/skeuocard",
"version": "1.0.0",
"version": "1.0.1",
"author": {
"name": "Ken Keiter",
"url": "http://kenkeiter.com/"
Expand Down

0 comments on commit dbc71f9

Please sign in to comment.