スマフォ向けWebアプリの為のシンプルなコンポーネント集・「Ratchet」
Ratchet Ratchetはスマフォ向けWebアプリの為のシンプルなコンポーネント集です。Bootstrapと同じ開発元で公開されていました。スマフォ専用のBootstrapなのかもしれないですね。基本的なものは一通り揃っています...
Resource - フレームワーク
jsfiddleライクにブラウザ上でJavaScriptの動作テストができるオープンソースのソフトウェア・「Codemagic」
Codemagic Codemagicはブラウザ上でJavaScriptの開発・動作テストを行えるツールです。jsfiddleと同じようなものですが、こちらはOSSとしてGithubにてソースが公開されています。ライセンスはMITとの...
CSSのみで作られたUIコンポーネント集・「Pure CSS Components」
Pure CSS Components Pure CSS ComponentsはCSSのみで作られたUIコンポーネント集です。タブやモーダルウィンドウ、カルーセル、アコーディオン、ドロップダウンメニューなどの実装コードが紹介されていま...
スピード構築に拘ったRWD対応のグリッドシステム・「Jeet」
Jeet Jeetは高速構築を目指したレスポンシブWebデザイン対応のCSSグリッドシステムです。柔軟性、使いやすさを重視した、との事。SASSにも対応しています。使いやすいかどうかは個人差があるでしょうけど、個人的には良さそうな印象...
Webサイトでよく用いられるパーツやコンポーネントのデザインフレームワーク・「Refills」
Refills RefillsはWebサイトでよく用いられるUIのソースをパッケージ化したフレームワークです。Bourbonを開発したthoughtbotが公開したフレームワークのようですね。ドロップダウンやリスト、フッター、アイキャ...
CSSで書かれたフラットデザインなiPhoneやiPad・「devices.css」
devices.css devices.cssはフラットデザインなiPhoneやiPadをCSSで書くためのコードです。シンプルで見やすいので、モニタ部分に画像をはめ込んでモックアップにしたりもできそうですね。利用シーンは多くはないで...
CSS3によるユニークなホバーエフェクトをまとめた・「iHover」
iHover iHoverはCSS3によるユニークなアニメーションホバーエフェクトをまとめて、パックにして配布するWebサイト。サークルタイプで20種類、スクエアタイプで15種類のエフェクトとソースが紹介されています。CSS3なので使...
単一ページで作るHTML5製Webアプリ向けのフレームワーク・「BladeRunnerJS」
BladeRunnerJS BladeRunnerJSは単一ページで構築するHTML5製のWebアプリ向けに作られたOSSの開発フレームワークです。大規模で複雑なWebアプリに対応できるのが強みみたいですね。ライセンスはGPLとな...
WebベースのiOS7アプリ向けHTMLフレームワーク・「Framework7」
Framework7 Framework7はWebベースのiOS7アプリ向けに開発されたHTMLフレームワークです。iOS7のようなフラットなデザインで各UIコンポーネントもiOS7を意識した作りとなっています。ライセンスはMITとの...
AngularJS対応のHTML5製モバイルWebアプリ向けのフレームワーク・「Ionic」
Ionic IonicはOSSとして公開されているAngularJS対応のHTML5なモバイルWebアプリ用フレームワークです。Sassベースで構築されています。jQueryに依存しないのは個人的に有りがたいです。ライセンスはMITと...
アイソメトリックを利用したピクセルアートをcanvasで描く為のライブラリ・「Obelisk.js」
Obelisk.js Obelisk.jsはアイソメトリック（等角投影法）を利用したピクセルアートをHTML5 canvasで描くためのライブラリです。上記のようにGifアニメーションの作成も可能です。アイデア次第では面白いコンテンツ...
Flexboxを使ったCSSグリッドシステム・「Flexbox Grid」
Flexbox Grid Flexbox GridはCSS3のFlexboxを使用したRWD対応のグリッドシステムです。flexible boxを使う事により、軽量でシンプルな設計を実現できそうですね。対応ブラウザはCan I Use...
シンプルなプリローダーを実装するCSS・「(cs)spinner」
(cs)spinner (cs)spinnerはCSSのみで作るシンプルなプリローダーを実装するCSSです。CSSで描かれたエレメントをアニメーション表示させています。非常に軽量なので、少しでも軽くしたいモバイルサイト等に良さそうです...
使い易さを重視したOSSのCSS/HTMLフレームワーク・「WEBPLATE」
WEBPLATE WEBPLATEは使い易さを重視したフロントエンドのフレームワークです。RWDやSASSにも対応しています。使いやすい、というのは本フレームワークの開発者さんの言葉を借りましたが、使いやすいかどうかは個人差もあると思...
スマフォにも対応した、シンプルなWYSIWYGエディタを実装する・「Quink」
Quink QuinkはシンプルなWYSIWYGエディタを実装するスクリプトです。ツールバーは、ダブルクリック又はダブルタップでインライン表示されます。現状は、ツールバーもスマフォに対応、という訳では無いようですので導入する際は多少工...
レスポンシブWebデザイン対応のシンプルなHTMLメールのフレームワーク・「CERBERUS」
CERBERUS CERBERUSはRWD対応のシンプルなHTMLメールのフレームワークです。GmailやYahoo!メールからOutlookやThunderbird、iOSやAndroidのメールに対応可能です。レイアウトのみで装飾...
jsFiddleのようにブラウザでJavaScriptを書いて動作を確認出来るOSS・「tmpltr」
tmpltr tmpltrはOSSで公開されているjsFiddleライクな開発ツールです。ブラウザ上でJavaScriptを開発、実行テストができます。完全なクローンではありませんが、JavaScriptとHTMLで作られている為、軽...
placeholderのテキストをアニメーション付きで表示/非表示にするスクリプト・「Placeholdem」
Placeholdem Placeholdemはplaceholder属性で設定したテキストを、フォーカス時にアニメーション付きで表示/非表示にするスクリプトです。非依存型で、単体で動作しますので使いやすそう。必ずしも必要なエフェクト...
Bootstrapでスプレッドシートを実装するスクリプト・「editableTableWidget」
editableTableWidget editableTableWidgetはBootstrapでスプレッドシートを実装する為のjQueryプラグインです。テーブルを編集可能にし、合計値を算出してくれます。覚えておいて損はなさそう。...
jQueryのカスタムビルドを作成出来るツール・「jQuery Builder」
jQuery Builder jQuery Builderはコアのカスタムビルドを作成する為のツールです。バージョンや圧縮の可否、追加するモジュールを選ぶ事が可能で、ファイルサイズも表示してくれます。また、本ツールはMITライセンスの...
SVGで描いた地図をクリッカブルマップにする為のスクリプト・「twism」
twism twismはSVGで描いた地図をクリッカブルマップにする為のjQueryのスクリプトです。予め描かれたSVGマップを色付けしたり、マウスホバーによる色の変更等を容易に行えるようにする為のものみたいですね。応用すれば日本地図...
JSONデータからtableを作成するためのスクリプト・「DYNATABLE」
DYNATABLE DYNATABLEはJSONデータからtableを生成するjQueryプラグインです。目的はシンプルですが、仕様を見る限りでは結構高性能のようですね。同じようなスクリプトは既にありますが、JSONデータのテーブル化...