フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」 Biomatic UI Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが...2017.11.15 | 10時33分33秒
任意の画像からカラーパレットを作成するスクリプト・「Color Thief」 Color Thief Color Thiefは任意の画像からカラーパレットを作成するオープンソースのスクリプトです。画像を解析して主要となっているカラーをいくつか抽出、カラーコードを提供してくれます。WordPressのプラグイン等...2017.11.14 | 10時56分36秒
Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...2017.11.09 | 10時53分38秒
手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」 PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...2017.11.06 | 10時39分13秒
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」 jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...2017.11.05 | 10時56分05秒
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」 Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...2017.11.04 | 10時37分13秒
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」 Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...2017.11.03 | 10時51分30秒
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」 pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...2017.10.31 | 11時14分53秒
アイコンフォントとCSSをセットにしたツールキット・「Fontisto」 Fontisto Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSS...2017.10.27 | 10時08分24秒
MarkdownやLaTeXをサポートしている超シンプルなWebテキストエディタ・「Writing」 Writing Writingは超シンプルなブラウザ上で動くWebテキストエディタです。MarkdownやLaTeXをサポートしています。上図はTeX Wikiさんで書かれていたコードです。左ペインに書くと右ペインに出力されます。多く...2017.10.24 | 11時24分42秒
豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」 One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...2017.10.22 | 11時44分55秒
コメントシステムを実装できるオープンソースのDisqusクローン・「schnack.js」 schnack.js schnack.jsはコメントシステムを静的なWebサイトにも導入できるOSSのDisqusクローンです。サーバー要件はNode6以上とSQLiteとのこと。同じようにGithubやTwitter等のアカウントで...2017.10.19 | 10時55分49秒
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」 Froala Design Blocks Froala Design BlocksはBootstrapで使えるフォームや地図コンテンツ、フッターや「値段表」、「製品詳細」のようなよく見かけるコンテンツなどをブロック単位にして170種ほ...2017.10.15 | 10時37分48秒
ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」 mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...2017.10.13 | 11時05分59秒
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」 file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...2017.10.12 | 10時30分56秒
CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」 Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...2017.10.11 | 10時58分43秒
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」 bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...2017.10.06 | 11時05分33秒
CSVやプレーンテキストのデータをJSONやMarkdown等に変換できるOSSなコンバーター・「Mr. Data Converter」 Mr. Data Converter Mr. Data ConverterはCSVやプレンテキスト(タブ区切りしたもの)をJSONやMarkdown、PHPやRubyなどの各言語での配列等に変換してくれるコンバーターです。オープンソー...2017.10.03 | 10時11分04秒
手作り感がかわいい、オープンソースなアイコンフォント・「JAM icons」 JAM icons JAM iconsは手作り感がかわいらしいOSSなアイコンフォントです。SVGも同梱されています。数は422ほどとなかなかの数ですね。丸みのある柔らかいスタイルで様々なコンテンツにマッチしてくれそうです。雰囲気はF...2017.10.02 | 11時27分25秒
書いたソースコードを画像化してTwitterに投稿できる・「carbon」 carbon carbonはソースコードを画像にしてTwitterに投稿したりダウンロードできるツールです。ソースはシンタックスハイライトされます。言語やスタイルも選択可能。また、本ツールはGithubでもソースコードが公開されていま...2017.09.30 | 10時24分12秒
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」 zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...2017.09.29 | 10時52分20秒
オープンソースの様々なライセンスのざっくりした特徴が一目で分かる早見表・「Choose a License | Appendix」 Choose a License | Appendix Choose a License | Appendixはchoosealicense.comが提供する、さまざまなオープンソースライセンスの特徴の早見表です。ApacheやMIT...2017.09.28 | 10時45分44秒