markdownでデータも視覚化出来るようにする・「Visdown」
Visdown Visdownはmarkdownでデータも視覚化出来るようにするツールです。markdownのみでcsv等を読み込んでデータ内容をグラフにして表示しよう、というもの。グラフはSVGで描かれます。markdown自体、も...
Resource - MIT
いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」
bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...
disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」
Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」
Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...
覚えておくと便利な正規表現のパターンをまとめた・「Regex Hub」
Regex Hub Regex Hubは覚えておくと便利な正規表現のパターンをまとめているプロジェクトサイトです。メールやHTMLタグ、日付、カラーコードや電話番号などに対応出来る正規表現が用意されており、その場でマッチするかをテスト...
画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImg See the Pen QGENKq by kachibito (@kachibito) on CodePen. LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デ...
jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」
pit-scheduler pit-schedulerはjQueryとBootstrapで作るスケジューラーです。横長のカレンダーに蛍光ペンで引くようにスケジュールを設定、管理出来る、というもの。現状の仕様ではタスクの設定はちょっぴり...
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」
PrognRoll PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jqu...
FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」
useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る！CDNも用意したから試しに触って...
NAVER製のオープンソースなUIインタラクションライブラリ・「egjs」
egjs egjsはLINEでおなじみのNAVERが公開しているUIインタラクションセットライブラリです。Webアプリ構築の際に開発スピードに貢献する事が目的のようで、OSSとして提供してくれています。jQueryを使って更に機能を拡...
Vue.jsベースのWebアプリケーション向けのマテリアルデザインフレームワーク・「Vue Material」
Vue Material Vue MaterialはVue.jsベースで作られたWebアプリケーションをマテリアルデザインに対応させるためのフレームワークです。コンポーネントやUIは再利用できるように意識して設計したそう。コンポーネン...
CSSで作るベーシックなローダーのセット・「CSS loader」
CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」
responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...
オープンソースのシンプルなCSVエディタ・「Comma Chameleon」
Comma Chameleon Comma Chameleonはオープンソースのデスクトップ用CSVエディタです。electronで作られているようで、各プラットフォームで動作するようです。また、CSVlintが導入されていて、データ...
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」
Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
KUTE.js KUTE.jsは高度なカスタムアニメーションにも対応できるパフォーマンス重視のJavaScript製アニメーションエンジンです。本サイトTOPにもあるような複雑なアニメーションコンテンツの実装をサポートしてくれます。コ...
軽量で非依存型のパーティクルエンジン・「particles.js」
particles.js particles.jsは軽量で他ライブラリに依存しない非依存型のパーティクルエンジンです。簡易的なものですが圧縮版で2.5kbほどと軽量で依存せず単体で動作してくれるのと、設定が簡単で扱いやすい印象です...
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」
placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...
CSSのみで作るシンプルなツールチップ・「Wenk」
Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...
Githubのコードを任意のWebページに埋め込める・「github-embed」
github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」
Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」
okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...