Grid レスポンシブレイアウトフレームワーク「Grid」 Bootstrapにもレイアウトフレームワークがついていますが、こちらもモバイルファーストなレスポンシブ用のレイアウトフレームワーク レイアウト以外にもノーマライズ用のCSSがついていてモバイル端末間の差異を減らすようになっています クラス名がBootstrap3より若干分かりやすい。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 HTML5＆CS

Flow Up スクロールするとコンテンツが浮遊してくるようなエフェクトが作れるjQueryプラグイン「Flow Up」 ページをスクロールすると下からどんどんコンテンツが湧いてくる、ようなエフェクトが作れます。 単にコンテンツを並べるだけよりもオシャレでより流行りな感じを作れます 関連エントリ ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 エレメントを45度傾けてカッコよくレイアウトできる「jquery.diamonds.js」

croppic 画像を指定サイズで切り抜きたい場合に使えるUI実装jQueryプラグイン「croppic」 インターフェースが洗練されており、プロフィール画像や背景画像等、画像を指定サイズにユーザ自身の手によって調整したい場合に使えそう 画像の好きな位置、好きなサイズで切り抜きが可能。 モーダル形式、インライン形式など、UIの方式も選べます 関連エントリ PHPを使って画像をアップしてjQueryで切り抜くチュートリアル

HTML5 & CSS3 Tools and Tutorials WEBデザイナ必携のHTML5&CSS3のコードジェネレータ「HTML5 & CSS3 Tools and Tutorials」。 次のような単一アプリケーションのようなUIでCSS3やHTML5の各種コードをWYSIWYGで生成できてかなり便利です。 ブックマークしておくと作業を効率化できそうですね 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル

Progress.js - Themeable progress bar library ページ内のローディングをもっとオシャレにできる「Progress.js」 画像のローディングやぺ時のローディングなど、ローディングをよりモダンなお洒落な形にできるライブラリです。 関連エントリ プログレスバーにもなるフラットなボタン実装デモ フラットな円形のプログレスバーを実装できるjQueryプラグイン「Circliful」 ボタン自体にプログレスバーを埋め込んだクールなデモ アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン

Sticker.js いい感じシールのめくり効果を作れるJSライブラリ「Sticker.js」。 マウスオーバーでシールがペラペラめくれるようなUIが作れます。 上下左右でめくれる方向が違うのもいいです マウスオーバーでシールがペラペラめくれます。 関連エントリ html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 引用文をフリップして回転させられるjQueryプラグイン「Flip-Quote」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 タッチに最適化されたLightBox実装jQueryプラグイン レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuou

Creditly.js クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」 カードに見立てた入力フォームに数値を入れていくという入力の際に分かりやすく、入力値の制限なんかもしてくれるフィーム要素が実装できます。 ​同様のライブラリもありますが、これはこれでシンプルなUIが特徴ですね 関連エントリ 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard」

Image Lightbox, Responsive and Touch?friendly ? Osvaldas Valutis レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 4kbと軽量で、画像だけLightbox風にしたいのであればこれはよさそうです。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 Medium風のシンプルなLightBoxが実装できるjQueryプラグイン「Fluidbox」 PhotoshopばりのフィルタをJSでかませるjQueryプラグイン「PhotoJShop」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」

Summernote - Super Simple WYSIWYG editor on Bootstrap Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 次のようなシンプルなフラットデザインのWYSIYGエディタ。ブラウザ幅に応じてツールバーが折り返し表示されてレスポンシブ対応 BootstrapベースのサイトでWYSIWYGエディタを使いたい際の選択肢として。 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 アイコン入力の際に使える「Bootstrap Iconpicker」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 Bootstrap3のテーマをWYSIWYGでカスタマイズ可

Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン

bselect BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 次のようにselectボックスのUIをリッチにし、アイテムの検索機能を付け、更にアイテムを階層化できるselectボックスが実装できます 検索ボックスがあることで入力がより簡単になりますね 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 オシャレなSelectボックスが実装できる「FancySelect」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 selectをカッコよく

Progress Button Styles | Codrops プログレスバーにもなるフラットなボタン実装デモ。 ボタンを押すとボタン自体がプログレスバーになって進むというUIをフラットで、１８種類ものアニメーション付きで実装したデモです。 １つのUIパーツで複数の意味をもたせてよりシンプルなUIが実現できますし、フラットなので広範囲に使えるというメリットもあり使えそうなデモです 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 フラットなUIデザインキットPSD25個 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Ki

Free Vector File ? 120 Nautically Inspired Icons | The Creative Portfolio of Nick Botner 海をテーマとしたフラットなベクターアイコン120がダウンロードできます。 ちょっとテーマ的に変わり種ではありますが、海関連のサイト制作に役立ちそう 関連エントリ PSDとAI形式のフラットな４２個のお天気アイコン フリーのiOS7アイコン800個セット 汎用で使える264種のフラットなベクターアイコンセット「IKONS」 ハイクオリティなソーシャル向けのフラットアイコンセット 汎用で使える癖のない400＋のアイコンが詰まったアイコンフォント「Ionicons」

Ionic: Advanced HTML5 Hybrid Mobile App Framework フラットなモバイルアプリ作成用HTML5フレームワーク「Ionic」 モバイルアプリ作成用フレームワークは色々ありますが、フラットなアプリ用はあまり出てきていませんね。 まだalpha版ですが、ブラウザベースのアプリを作る際のフレームワークとして知っておいてもよいかも。 関連エントリ フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットなUIデザインキットPSD25個 フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ フラットでシンプルさがいい感じのツールチップライブラリ「Simptip」 フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」

Welcome to Square Bracket - Open JS Grid v2 Bootstrapなデザインのデータグリッドを実装できる「Open JS Grid」 ソート機能、ページング機能、データ追加・編集・削除などが可能でBootstrapデザインのデータグリッドを実装することが可能。 データグリッドもカッコよく作りたい場合の一つの選択肢として。 HTML的にははjQuery+Bootstrapでサーバサイドがphpで実装されている物がダウンロード可能です。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 レスポンシブなアイコングリッド作成チュートリアル 4KB程の軽量レスポンシブグリッドライブラリ「fitgrid」 オーバーレイするグリッドの超クールなデモ

25 flat UI kits for web designers | Webdesigner Depot フラットなUIデザインキットPSDが25個紹介されています フラットデザイン時の参考や素材として活用できそうです。フラットはシンプルなだけにデザインをより考える必要がありますが、ネタ帳として使うこともできそうです 関連エントリ フラットサイトのカラースキーム生成等に使えそうなWEBツール「colourcode」 フラットで超カッコいいUIライブラリ「Semantic UI」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」 フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 100以上のコンポーネントUIが詰まったフラットデザインのUIキットP

Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou

Cumulus ベクター形式のお天気アイコン１００個＋パック「Cumulus」 次のようなフラットなデザインにもベストマッチしそうなお天気アイコンセット。 知っておけばあとあと使えそうですね。 関連エントリ 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 好きなアイコンだけ選んでアイコンフォントにできる「Fontastic」 美しいフラットなアイコンフォント「Dripicons」

:: Alessandro Ferrini :: FerroSlider jQuery Plugin クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 iPhone、iPadなどのタブレットでもレスポンシブに表示されるだけでなく、PCでもタッチ操作も可能なスライダが実装可能 自動再生機能の他、上下左右にスライドを送れるようなユニークな機能も付いている模様。 関連エントリ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCra

Squiggle ペンで手書きで消したような取り消し線を表現できるjQueryプラグイン「Squiggle」 <s>消したい文字</s>でも直線で文字を消したように表現できますが、次のように手書きで消した感じにすることができるjQueryプラグインです。 canvasを使っているようですが、なかなか面白いですね 関連エントリ カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 エディタをフルスクリーンにして編集しやすくできるjQueryプラグイン「jQuery Fullscreen Editor」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl