UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」
Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...
Resource - フレームワーク
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」
Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」
pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...
2D / 3Dの地図を作るためのライブラリ・「maptalks.js」
maptalks.js maptalks.jsはOSMをベースとした地図ライブラリです。2D / 3D地図の作成が可能との事ですが、3Dといっても大それたものではなく、地図を平面ではなく、奥行きを付け、上図のように地図上にドローできる...
CSSによる様々なアニメーションエフェクトを付与できるCSSライブラリ・「Motion CSS」
Motion CSS Motion CSSはCSSによるさまざまなアニメーションエフェクトを要素に付与できるCSSライブラリです。よく見かけるやつですね。class与えればエフェクトが付く。使い方はCSSを読み込むだけみたいな。cla...
アイコンフォントとCSSをセットにしたツールキット・「Fontisto」
Fontisto Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSS...
CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」
Light Modal Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニ...
豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」
One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...
コメントシステムを実装できるオープンソースのDisqusクローン・「schnack.js」
schnack.js schnack.jsはコメントシステムを静的なWebサイトにも導入できるOSSのDisqusクローンです。サーバー要件はNode6以上とSQLiteとのこと。同じようにGithubやTwitter等のアカウントで...
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」
Froala Design Blocks Froala Design BlocksはBootstrapで使えるフォームや地図コンテンツ、フッターや「値段表」、「製品詳細」のようなよく見かけるコンテンツなどをブロック単位にして170種ほ...
編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」
jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...
ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」
mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」
file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...
CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」
Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...
anime.jsでテキストにアニメーションエフェクトを付与するコードをまとめたサンプル集・「MOVING LETTERS」
MOVING LETTERS MOVING LETTERSはanime.jsでテキストにアニメーションエフェクトを付与するスクリプトをまとめたコードサンプル集です。各エフェクトはクリックすればコードが表示されるようになっています。いい...
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」
bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...
軽量でモダンなモジュール式のドラッグ&ドロップライブラリ・「Draggable」
Draggable Draggableは軽量でモダンなモジュール式のD&Dスクリプトです。ベーシックな要素間のD&Dや、移動後のソート、要素同士のコンフリクトが起きた場合のイベントや移動時のエフェクトなどが主な特徴として挙げられていま...
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」
zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...
シンプルで使いやすい、モバイルフレンドリーなFlexboxベースのCSSフレームワーク・「Framy」
Framy Framyはシンプルで使いやすくカスタマイズ性も高いモバイルフレンドリーなFlexboxベースのCSSフレームワークです。コンポーネントはコンフリクトフリー（衝突しない）な設計を心がけたそう。LESSがサポートされています...
一定の幅にテキストをフィットさせてくれるスクリプト・「Fitty」
Fitty Fittyは一定の幅にテキストをフィットさせてくれるスクリプトです。先行スクリプトとしてFitText.jsがありますが、Fittyは軽量で非依存型というメリットがあります。それぞれ特徴は多少異なるので用途次第で使い分ける...
flexboxベースのミニマルなCSSモバイルファーストグリッド・「Plasma Grid」
Plasma Grid Plasma GridはflexboxベースのミニマルなCSSグリッドです。モバイルファーストでレスポンシブ。デフォルトは12カラムですが、カスタマイズ可能との事。Bootstrapの互換モードは準備中だそうで...