ブラウザやOS、デバイス等を検出してclassを付与するスクリプト・「Detectr.js」
Detectr.js Detectr.jsはブラウザやOS、デバイス等を検出してclassを付与するスクリプトです。他ライブラリに依存せず単体で動作し、圧縮版で3.6KBｙと軽量です。下記のようにclassが付与されます。 ...
Resource - MIT
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」
RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...
HTML5製の管理画面構築のためのOSSなダッシュボードフレームワーク・「RazorFlow」
RazorFlow RazorFlowはHTML5製のダッシュボード用フレームワークです。オープンソースとして公開されています。円グラフや棒グラフ等のチャート、管理画面のスタイルビルダー、リアルタイム更新、軽量且つ高速でタッチデバイス...
文章に注釈を加えるためのシンプルなスクリプト・「marginotes」
marginotes marginotesは文章内の任意のキーワードに注釈を加えるためのシンプルなスクリプトです。jQuery版と単体で動くvanilla版があります。マウスホバーで左端にちょろっと注釈が出る、というシンプルなもの。ツ...
画像のExif情報を読み取るためのJavaScriptライブラリ・「Exif.js」
Exif.js Exif.jsは画像のExif情報を読み取るスクリプトです。画像のメタデータを読み取って取り出すだけのもの。上図のように動作テストしてみましたが項目数は52ほど用意されているようですので全てではないにしても割と揃えられ...
Foundationベースの、ライトに使えるオープンソースCMS・「lifejacket」
lifejacket lifejacketはフロントエンドフレームワークのFoundationをベースに設計されたオープンソースのCMSです。PHP製で、機能もCMSとしての基本的な部分に絞って備えてあるとの事。WordPressやD...
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」
Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...
40種以上の画像のマウスホバーエフェクトを使いやすくまとめたスタイルシート・「imagehover.css」
imagehover.css imagehover.cssは画像のホバーエフェクトをclass付与などで手軽に扱えるようにしたスタイルシートです。上記のように画像にマウスを乗せた際のエフェクトを40種以上まとめて一つのCSSにしたもの...
UI / UXデザイナー向けの、紙にデバイスの形状を印刷する為のテンプレートのまとめ・「Sketchsheets」
Sketchsheets Sketchsheetsはモバイルやタブレットデバイスの形状を印刷するためのテンプレートです。UI/UXデザイナー向けに作成したそうで、スケッチ等の為に紙にタブレットやモバイルデバイスを用紙に印刷出来るように...
3Dな都市の地図を作成するオープンソースのプロジェクト・「ViziCities」
ViziCities ViziCitiesは都市の地図を3D化するオープンソースのプロジェクトです。OpenStreetMapを地図ベースに3D化を進めているそうです。単純な3D化ではなく、リアルタイムなデータを付与した3Dマップを目...
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
List.js List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプ...
シンプルなチャットシステムを導入する為のスクリプト・「Chatjs」
Chatjs Chatjsはシンプルなチャットシステムです。Facebookライクに右下に小さく表示されるシンプルなもので、プラットフォームにも依存しないそうです。ソーシャル要素を持ったWebアプリにあると便利かもしれませんね。Fac...
VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」
CSSCO CSSCOはスマフォの写真加工/共有アプリ、VSCOで出来るようなフィルターを画像にかけるためのスタイルシートです。InstagramのフィルタをかけられるCSSGramにインスパイアされたらしく、そのVSCO版を作成した...
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」
Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...
モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」
Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...
Github等で公開されているソースコードの任意の行のみをWebページに表示出来る・「Git snippet」
Git snippet Git snippetはGithubやBitBucket、GitLab等で公開されているソースコードの任意の行を指定して任意のWebページに表示出来るサービスです。URLの入力場所が分かりにくいですが、ヘッダ直...
シンプルでフレキシブルなCSSグリッドシステム・「Pintsize」
Pintsize PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。...
レスポンシブWebデザイン対応の、書籍を具現化する為のフレームワーク・「bookiza」
bookiza bookizaはRWD対応の書籍具現化フレームワークです。ちょっとうまく説明できないのですが、よくあるPDFやePubビューア等ではなく、HTMLで書いたコンテンツを書籍のように扱えるようにするフレームワークです。予め...
Semantic UIライクなスタイルのBootstrapテーマ+コンポーネント集・「Semantic UI Bootstrap」
Semantic UI Bootstrap Semantic UI BootstrapはSemantic UIライクなスタイルのBootstrapテーマと、そのコンポーネント集です。Semantic UIのスタイルをBootstrap...
ピクセルアートを描けてCSSで作れるコードも排出してくれるオープンソース・ソフトウェア・「Pixel Art to CSS」
Pixel Art to CSS Pixel Art to CSSはピクセルアートを描けてCSSコードも排出してくれるOSSです。エディタでピクセルアートを作って、そのピクセルアートを実装出来るCSSを提供してくれる、というもの。以前...
tableにフィルタ機能+αを加えるスクリプト・「TableFilter」
TableFilter TableFilterは任意のtableにフィルタ機能を加えるスクリプトです。他、ページャ、ソート、列の計算機能など機能の追加も出来るみたい。フィルタは任意のキーワードだけでなく、selectで対象を選べるよう...
自動保存出来るオープンソースのデスクトップメモアプリ・「FromScratch」
FromScratch FromScratchは自動保存出来るデスクトップ用のメモアプリです。OSSとしてソースコードが公開されています。よくある付箋やノートアプリの超シンプルなタイプ。機能はただテキストを書くだけ、ショートカットが4...