CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」
Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...
Resource - MIT
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
KEditor KEditorはD&Dでレイアウトできるコンテンツエディターです。jQueryに依存します。Containersでコンテナを配置してComponentsでコンテナ内にコンテンツを配置、編集する流れです。jQuery必要...
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」
zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...
シンプルで使いやすい、モバイルフレンドリーなFlexboxベースのCSSフレームワーク・「Framy」
Framy Framyはシンプルで使いやすくカスタマイズ性も高いモバイルフレンドリーなFlexboxベースのCSSフレームワークです。コンポーネントはコンフリクトフリー（衝突しない）な設計を心がけたそう。LESSがサポートされています...
文章内にグラフを表示するスパークラインを実装出来るOSSなフォント・「Spark」
Spark Sparkは上図のように文章内にグラフを表示させるスパークライン用のフォントです。フォントなのでJSを必要としない、という点がウリみたいです。フォントで実装はちょっと賢いなって思いました。ちょっとしたデータなら場所もとらな...
任意のテキストにさまざまなアニメーションエフェクトを付与するスタイルシート・「cssanimation」
cssanimation See the Pen Snake css text animation by cssanimation.io by kachibito (@kachibito) on CodePen. cssanim...
縦に長いtableのヘッダーをstickyにするスクリプト・「jquery.stickyTableHeader 」
jquery.stickyTableHeader jquery.stickyTableHeaderは縦に長くなったtableのヘッダをfixedにするスクリプトです。下にスクロールしてもヘッダだけ固定される、というよくあるやつ。...
シンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワーク・「TURRETCSS」
TURRETCSS TURRETCSSはシンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワークです。JavaScriptは併用されていません。パフォーマンスが重視されており、軽量高速なWebサイト構築に貢献して...
Vue.jsベースのフロントエンドUIフレームワーク・「AT UI」
AT UI AT UIはVue.jsベースのフロントエンドなUIキットです。軽量でモジュラー形式のUIフレームワークだそう。ES2015/ES6サポート、npm+webpack+babelな開発ワークフロー等が特徴とのことです。ボタン...
Vue.jsに影響を受けたシンプルで軽量なライブラリ・「Moon」
Moon MoonはVue.jsにインスパイアされた軽量なJSライブラリです。高速でフレキシブル、学習コストも低く、シンプルで軽量ながら高いパフォーマンスと、直感的でわかりやすいAPIが特徴とのこと。vueがmin+gzipで20kb...
Vimeoの動画を背景に設定する為のスクリプト・「jQuery.mb.vimeo_player」
jQuery.mb.vimeo_player jQuery.mb.vimeo_playerはVimeoの動画を背景に設定する為のスクリプトです。jQueryに依存します。背景にするというか、背景にした動画のコントロールが主な目的ですね...
オープンソースのTrelloライクなカンバンツール・「Wekan」
Wekan WekanはオープンソースのTrelloクローンです。Trelloライクなカンバンツールを自身の管理するサーバーで利用することが出来ます。同じようにチームで共有できてアイテムのタグ付けやアイデア、Todo等を共有できるみた...
マウスホバーでborder等がアニメーションしながら変化するボタンのCSS・「Hover Buttons」
Hover Buttons Hover Buttonsはマウスホバーでアニメーションしながら別スタイルに遷移するボタンのCSSセットです。borderや背景がさまざまなエフェクトで変化します。最近流行りのやつですね。結構な量が用意され...
コンソール内への外部JSのロードをサポートするChromeエクステンション・「JSconsole」
JSconsole JSconsoleはインスペクタのコンソールに外部JavaScriptのロードをサポートするエクステンションです。js.load()やjs.find()、js.list()等でJSをロードしたりリストを表示したりラ...
任意のコンテキストメニューを実装できるスクリプト・「jQuery Menu」
jQuery Menu jQuery Menuは任意のコンテキストメニューを実装する為のスクリプトです。jQueryに依存します。特定のエリアで右クリックすると事前に設定したメニューが表示される、というもの。ライセンスはMITです。 ...
基本的なコンポーネントのみを提供するCSSスターターキット・「Shoelace.css」
Shoelace.css Shoelace.cssは基本的なコンポーネントのみを提供する軽量なCSSスターターキットです。役立ちそうなコンポーネントのCSSリセットみたいなものと考えてくれとのこと。このCSSは本来、Surreal C...
いろいろなコンテンツ向けのダミーデータをまとめた・「Lists」
Lists Listsはさまざまなコンテンツ向けのダミーデータをまとめているプロジェクトです。住所や動物、スポーツ記事、銀行、本、本の著者、車や都市、色、企業や通貨、日付、クレカナンバー、所要時間、メールアドレス、URL、数字や価格、...
段落毎に設置した画像を、その段落が終わるまで固定させるスクリプト・「jquery-stopattop」
jquery-stopattop jquery-stopattopは段落毎に設置した画像を、段落がスクロールし終わるまで固定させるスクリプトです。ちょっと僕の説明が下手でピンとこないと思いますので動作サンプルを用意しました。名前の通り...
ミニマルなワイヤーフレームの為のCSSフレームワーク・「WIP」
WIP WIPはミニマルなワイヤーフレーム作成の為のCSSフレームワークです。なんだかややこしいですが、ミニマルなワイヤーフレームをHTML/CSSで作ろう、というもの。少し前にご紹介したようなワイヤフレーム用の棒状のフォントを併用し...
Markdownでデータを可視化する為のMarkdown-Itプラグイン・「Markvis」
Markvis MarkvisはMarkdownでデータを可視化する為のMarkdown-Itプラグインです。Markdown-ItはMarkdownでオリジナルのレンダリングをする為のJS製のレンダラ/パーサーで、その拡張として使う...
スマフォアプリでよく使われそうなコンポーネントをまとめたUIキット・「React Native UI Kitten」
React Native UI Kitten React Native UI Kittenはスマフォアプリの為のUIコンポーネントをまとめたUIキットです。外観の施工をサポートするから君はコンテンツ施工に集中してくれよ！みたいな事書い...
チャットのような対話コンテンツの為のUIフレームワーク・「BotUI」
BotUI BotUIはチャットのような対話コンテンツのUIのためのJavaScriptフレームワークです。いわゆるbot用でしょうか。返すメッセージや内容、タイミングなどの設定も簡単に出来るようになっています。 ライセ...