
Tools & Resources


CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」

縦横のサイズを入力するとアスペクト比の比率を算出してくれるシンプルな計算機・「AspectRat.io」

コンポーネントやプラグインを豊富に同梱したBootstrap 4ベースのフリー管理画面テンプレート・「Pike Admin」

商用でも無料で使えるSVGで描かれた様々なイラストを公開する・「unDraw」

画像を解析してパスを生成、単色のSVGに変換してくれる・「Tracy」

手軽にインフォグラフィックやプレゼン等を作成、ダウンロードしたりembedで公開できる・「Visme」

LESSベースの軽量でモダンなUIフレームワーク・「Petal」

オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」

clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」

シンボルや矢印、絵文字などの特殊文字をクリックでコピー出来るシンプルで使いやすいツール・「⌘+C」

CSSで作られた複雑なアニメーションエフェクトのスピナー集・「Epic Spinners」

Dribbbleで注目されたイラストからカラーパレットを作成している・「The Colorbook」

ブラウザで動作するオープンソースの電子書籍リーダー・「LibreRead」

Webサイトのアクセシビリティチェックに使えるカラーコントラストチェッカー・「Color Contrast Checker」

複数プレイリストもサポートしたOSSな非依存型オーディオプレイヤー実装スクリプト・「AmplitudeJS」

PNGファイルを軽量化する・「UPNG」

Bootstrapの為のマテリアルデザインUIキット・「MDB」

開発者向けのBootstrap 4のテーマやツールキットを配布する・「HackerThemes」

カーソルを乗せた方向によって変化するマウスホバーエフェクトを実装するライブラリ・「Direction Reveal」

Web用リッチテキストエディタを作成する為のツールキット・「ProseMirror」
