React向けのリッチテキストエディタ用フレームワーク・「Draft.js」
Draft.js Draft.jsはリッチテキストエディタ構築のためのフレームワークです。React.js向けに作られており、カスタマイズしやすくシンプルに作られているみたいです。この手のフレームワークはあまり見かけないので覚えておく...
Resource - フレームワーク
シンプルでフレキシブルなCSSグリッドシステム・「Pintsize」
Pintsize PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。...
レスポンシブWebデザイン対応の、書籍を具現化する為のフレームワーク・「bookiza」
bookiza bookizaはRWD対応の書籍具現化フレームワークです。ちょっとうまく説明できないのですが、よくあるPDFやePubビューア等ではなく、HTMLで書いたコンテンツを書籍のように扱えるようにするフレームワークです。予め...
モバイル向けWebアプリの為のMVCフレームワーク・「Truck.js」
Truck.js Truck.jsはモバイル向けのWebアプリ構築の為のMVCフレームワークです。Android、iOS、Windowsのネイティブなルック&フィールを提供してくれるとの事。様々な目的でも最小限にファイルサイズを抑えら...
Semantic UIライクなスタイルのBootstrapテーマ+コンポーネント集・「Semantic UI Bootstrap」
Semantic UI Bootstrap Semantic UI BootstrapはSemantic UIライクなスタイルのBootstrapテーマと、そのコンポーネント集です。Semantic UIのスタイルをBootstrap...
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」
Headermessage HeadermessageはCSSのみで開閉コンテンツを作るスタイルシートです。よくある上からスライドダウンするやつをCSS3を使って実現しよう、というもの。上記デモはこのページではうまく動かせないかも...
tableにフィルタ機能+αを加えるスクリプト・「TableFilter」
TableFilter TableFilterは任意のtableにフィルタ機能を加えるスクリプトです。他、ページャ、ソート、列の計算機能など機能の追加も出来るみたい。フィルタは任意のキーワードだけでなく、selectで対象を選べるよう...
Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」
Flexbox Patterns Flexbox PatternsはFlexboxを使ったUIパターンをコードと共に紹介するWebサイトです。display:flexプロパティを使って何が出来るのか、使い方や実際にUIとして実装するコ...
コーディング不要でWebサイトのテンプレートを作成する為のオープンソースソフトウェア・「GrapesJS」
GrapesJS GrapesJSはコーディングせずに直感でWebサイトのテンプレートを作成出来るエディタです。OSSとしてソースコードが公開されています。JS製でjQueryにのみ依存しています。必要なコンテナやテキスト、画像等をマ...
軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」
Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...
ブラウザで動くスプレッドシートの為のスクリプト・「jQuery.sheet」
jQuery.sheet jQuery.sheetはブラウザで動くスプレッドーシートの為のスクリプトです。jQueryに依存しており、OSSとして公開されています。HTML、JSON、XMLもサポートされています。他にもこの手のものは...
Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」
Drawingboard.js Drawingboard.jsはWebページにおえかきツールを埋め込むためのスクリプトです。Canvasベースで出来ており、コントロールに必要な機能も一通り揃っている印象です。ある程度他のライブラリにも...
モバイルアプリ向けのランディングページテンプレート・「Takeoff」
Takeoff Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。...
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.js monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触って...
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...
サウンドインタラクションを追加する為のシンプルなJavaScriptライブラリ・「Loud links」
Loud links Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデー...
CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」
Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...
シンプルなスプレッドシート実装の為のスクリプト・「ipgrid」
ipgrid ipgridはシンプルなスプレッドシート実装の為のスクリプトです。jQueryに依存しています。Googleスプレッドシートのように扱えるそうですが、まだ関数はいくつかしかテストしていませんのでクローンと言えるかどうかは...
Codepenで2015年に話題になった投稿TOP100をまとめた・「MOST The HEARTED 2015」
MOST The HEARTED 2015 MOST The HEARTED 2015はCodepenで話題になった投稿TOP100をランキング化したWebページです。最もグッと来た投稿、コードを紹介しています。心に来たコード＝実際に...
Web標準の16色を綺麗なカラーパターンにする為のCSS・「COLORS」
COLORS COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので...
ブラウザのサポート状況をチェックする1KBの軽量スクリプト・「Feature.js」
Feature.js Feature.jsはブラウザのサポート状況をチェックしてくれる高速且つシンプル、軽量なブラウザの特徴検出スクリプト。他ライブラリへの依存も無く、わずか1KB程度で動作してくれます。Modernizrライクに利用...
軽量且つクリーン、ミニマルなUIフレームワーク・「Milligram」
Milligram Milligramは軽量でミニマルなUIフレームワークです。必要最低限のコードでクリーン、圧縮版で2KBと軽量な設計ながら欲しいUIコンポーネントは一通り揃っていて使いやすそうな印象でした。大きな特徴がこれといって...