任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」
CSS Peeper CSS Peeperは任意のWebページやそのページの各コンテナに設定されたCSSを解析するChromeエクステンションです。解析したいページでエクステンションを起動すると、Webページのfont-familyや...
Resource - CSS
大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」
CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...
disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」
Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...
FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」
useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る！CDNも用意したから試しに触って...
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」
Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...
軽量シンプルなオープンソースのUIキット・「Css-mint」
Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」
Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」
SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」
Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」
minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...
シンプルなカラーパレット管理ツール・「colorcubo」
colorcubo colorcuboはシンプルなカラーパレット管理ツールです。シンプルですが、欲しい機能は一通り揃っており、余計な機能を削いでいる印象でした。主な特徴は複数パレット作成、作成した各パレットのフォルダ分け、ユーザー登録...
PostCSSのプラグインを探せるカタログサイト・「PostCSS.parts」
PostCSS.parts PostCSS.partsはPostCSSのプラグインを探せるカタログサイトです。色関連やフォント、デバッグ、最適化、メディアクエリなど多様なカテゴリに分けられており、インスタンス検索でサクサク探すことが出...
Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」
Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...
カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」
You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...
要素をシェイクさせるスタイルシート・「CSShake」
CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」
Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」
WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」
Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...
レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」
Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...
モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」
Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」
RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」
Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...