have things working with no jQuery

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "src/scss/bourbon"]
 	path = src/scss/bourbon
 	url = https://github.com/thoughtbot/bourbon.git
+[submodule "src/coffee/payment"]
+	path = src/coffee/payment
+	url = https://github.com/jessepollak/payment

example/index.html

@@ -37,7 +37,7 @@
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-    <script src="../lib/js/card.js"></script>
+    <script src="../lib/js/jquery.card.js"></script>
     <script>
         $('.active form').card({
             container: $('.card-wrapper')

gulpfile.coffee

@@ -21,16 +21,16 @@ gulp.task 'scss', ->
   .pipe gulp.dest('./lib/css')
 
 gulp.task 'browserify', ->
-  gulp.src './src/coffee/**/*.coffee', read: false
+  gulp.src './src/coffee/*.coffee', read: false
     .pipe browserify
       insertGlobals: false
       debug: development
       transform: ['coffeeify']
       extensions: ['.coffee']
       standalone: 'card'
-    .pipe livereload(server)
     .pipe rename({ extname: '.js' })
     .pipe gulp.dest('./lib/js')
+    .pipe livereload(server)
 
 gulp.task 'watch', ['scss', 'browserify', 'connect'],  ->
   server.listen 35729, ->

lib/css/card.css

@@ -156,18 +156,17 @@
   color: #1A1876;
   text-align: center;
   font-weight: bold;
-  font-size: 15px; }
+  font-size: 15px;
+  line-height: 18px; }
   .card-logo.visa.visa:before, .card-logo.visa.visa:after {
     content: " ";
     display: block;
     width: 100%;
     height: 25%; }
   .card-logo.visa.visa:before {
-    background: #1A1876;
-    bottom: 100%; }
+    background: #1A1876; }
   .card-logo.visa.visa:after {
-    background: #E79800;
-    top: 100%; }
+    background: #E79800; }
 
 .card.visa.identified .front:before, .card.visa.identified .back:before {
   background-color: #191278; }