Card ― make your credit card better in one line of code 入力したカード情報が反映される。 ブランドも判別してロゴを表示 CVCの入力でフリップして裏面が表示される かっこいいけどクレカ入力フォームだけ浮きそう。 あとJCBはロゴなし。

Odometer ― Transition numbers with ease スピードメーターみたいにアニメーションして数字を表示できるライブラリ。 ちょっと触ってみて遊んでいた。 jQueryなど依存ライブラリ無し。 テーマがいくつか用意されていて、シンプルなやつから 使い所がなさそ…

Skeuocard by kenkeiter 入力したカード番号によって、カード種別を判別して表示してくれます。 表を全部入力すると、裏面を入力するためのガイドがでます。 裏面 こういう実世界の質感をそのまま反映したようなデザインを「Skeuomorphic Design」っていうん…

Textillate.js リンク開くとだいたいどんなことができるのかわかります。 テキストを表示させる、消すときにいろいろなアニメーションをさせることができます。見てて面白い。ドキュメントみる限り結構自由にカスタマイズできそうです。

twitter-bootstrapのthumbnails http://twitter.github.com/bootstrap/components.html#thumbnails 2行目からレイアウトが崩れる調べてみたらgithubにissueとして上げられてました https://github.com/twitter/bootstrap/issues/3494 もうclosedになってます…

たまたまみつけて面白そうだったのでメモliffect http://ademilter.com/lab/liffect/画像の一覧を表示するページで、表示をアニメーションさせるためのコードを生成してくれます。 アニメーションはたくさん種類があって、Duration、Delay、Randomと動作をカ…

この間作ったtodoアプリの場合、knockout.jsに依存したtodoというappsを作りました。 config.ksはこうです knockout.min.js, //http://netdna.getkickstrap.com/Kickstrap/apps/knockout/knockout.min.js todo.js,todo.css kickstrap.lessの@appsはtodoのみ…

kickstrap.lessに以下のような部分がありますので、@importのコメントを外すだけです @import "Kickstrap/extras/caching.less"; // Cache Kickstrap (Makes your site faster) // Use "clearCache()" in the console to update. localStrageにコンパイル結…

最近さわっているdjango-tastypie、kickstrap、knockout.jsなどを使ってよくある感じのTodoアプリを作ってみました。 http://django-kickstrap-todo.herokuapp.com/ 削除や更新のたびにリストを取り直しているせいか動作がちょっともっさりしてます。 ソース…

先日使ってみたkickstrapをdjangoと組み合わせて動かせるようにしてみました。 site_media以下にkickstrapのファイルを置いて、参照できるようにsettingsやhtmlの参照をちょっといじったくらいですが。あとkickstrap.lessに定義してあるカスタマイズ用の変数…

以前ちょっとさわってみたKickstrapですが、久しぶりにチェックしたらかなり進化していたのでもう一回見てみました。 フォルダ構成 ダウンロードして展開するとこのような構成になってます。 トップディレクトリにあるファイルが少なくなってシンプルになり…

カードをひっくり返すようなエフェクトを実現するライブラリを探していて、いくつか候補が見つかったのですが、なかでもとっつきやすそうだったFlip!を試してみました。 使い方は単純なのでオフィシャルのサイト見ればすぐに分かります。つくってみたのがこ…

Twitter Bootstrapに機能を追加したKickstrapというツール?フレームワーク？の中身を色々みてみました。https://github.com/ajkochanowicz/Kickstrap $ git clone https://github.com/ajkochanowicz/Kickstrap.git $ cd Kickstrap $ open index.html これで…

githubにboilerstrapというプロダクトがあったので試してみました。 https://github.com/emorikawa/boilerstrap HTML5 BoilerpalateとTwitter bootstrapを同時に使うWebサイトのテンプレート、って感じでしょうかとりあえずgit cloneでソースを持ってきます …