どんなデバイスでも適切なフォントサイズにしてくれるスタイルシート・「RFS」
RFS RFSは様々なモニターサイズのデバイスでも適切なフォントサイズを計算するCSSです。RFSはresponsive font sizesの頭文字を取った略称だそう。Sass、PostCSS、Less、Stylusなどもサポートさ...
Resource - CSS/HTML
豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキット・「Fire」
Fire Fireは豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキットです。これからも増えるようでさらに期待できそうです。クリーンで見やすく、必要なUIも揃えられており、すべての要素が100%レスポンシブWebデ...
CSSで作られたポップでカラフルなフォント・「CSSans Pro」
CSSans Pro See the Pen CSSans Pro by kachibito (@kachibito) on CodePen. CSSans ProはCSSのみでポップでカラフルなフォントを作成、表...
CSSで出来る小技やTips等をまとめた・「.css{tricks}」
.css{tricks} .css{tricks}はCSSで出来るTipsや小技をまとめているプロジェクトサイトです。ローディングやタブ、リセットやテキストの省略などなど、特に一貫性はなく、地味に便利な小技を収集してる印象でした。中国...
ピュアCSSなマテリアルデザインコンポーネント集・「Matter」
Matter See the Pen Pure CSS Material Components Showcase by Ben Szabo (@finnhvman) on CodePen. MatterはCSSのみで作...
モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」
Undernet Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...
flexboxベースの軽量なCSSマイクロフレームワーク・「Strawberry」
Strawberry Strawberryはflexboxベースの軽量なCSSフレームワークです。圧縮版で30kbほどのようです。グラフィックに関わるスタイルは無く、各classにはプリフィクスが付いているので既存CSSに組み込んでも...
ミニマルを意識しつつ、出来る限り使いやすいCSSフレームワークを目指した・「boba」
boba bobaはミニマル設計を意識しつつも、必要最低限ではなく、出来る限り使いやすさを追求した、バランスの取れたCSSフレームワークです。有名なCSSフレームワークは肥大化しすぎ、敬遠したフレームワークはミニマルすぎる等、世にある...
CSSやHTMLのコードサンプルを収集している・「FREE FRONTEND」
FREE FRONTEND FREE FRONTENDはCSSやHTMLを使ったUIコンポーネントやエフェクトなどのコードサンプルをまとめ記事にして収集しているWebサイトです。モダンなスタイルのフォームやホバーエフェクトのサンプル、...
NES.cssにインスパイアされたPlaystation 1スタイルのCSSフレームワーク・「PSone.css」
PSone.css PSone.cssは先日ご紹介したNES.cssにインスパイアされたCSSフレームワーク。こちらはPlaystation 1スタイルとなっています。NES.cssは現在Githubでもすごく話題になっているので他に...
ファミコン風のスタイルを提供してくれるCSSフレームワーク・「NES.css」
NES.css NES.cssはファミコン（NES）ライクなスタイルを提供してくれるCSSフレームワークです。ダーシノ(@bc_rikko)さんの作られた国産フレームワークで、あくまでスタイルの提供となっています。僕自身もファミコン年...
シンプルで軽量、扱いやすいベーシックなCSSフレームワーク・「minstyle.io」
minstyle.io minstyle.ioはシンプルで軽量、扱いやすいCSSフレームワークです。minstyleの頭文字をプレフィクスに、要素の名称を付与する命名規則となっており、ユニーク且つ分かりやすい、学習コストを低くしつつも...
FlexboxベースのモバイルファーストなCSSフレームワーク・「Butter Cake」
Butter Cake Butter CakeはFlexboxベースのモバイルファーストなCSSフレームワークです。モジュール式で必要な機能は自身で追加していくタイプなので軽量に抑えることができます。よく必要とされるUIコンポーネント...
TEDが公開するオープンソースのAtomic CSSライブラリ・「shed.css」
shed.css shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれの...
CSSのClip Pathを直感的な操作で簡単に作成できる・「Clip Path Generator」
Clip Path Generator Clip Path Generatorはその名の通りClip Pathを作成できるジェネレーターです。直感的な操作でパスを生成、コードを発行してくれる、というもの。マウス操作でパスを生成したら即...
43のローダーをまとめた・「43 loaders」
43 loaders See the Pen 43 loaders by Subin (@meemaw1) on CodePen. 43 loadersは43のCSSローダーをまとめたCodepenです。CSSといってもアニメーショ...
Webサイト開発スピードをサポートするモダンなCSSフレームワーク・「BuddyCSS」
BuddyCSS BuddyCSSはWebサイトの制作、開発スピードをサポートするモダンな設計のCSSフレームワークです。同梱されるすべてのコンポーネントはレスポンシブ、SassベースでタスクランナーにはGulpが用いられています。コ...
沢山のコンポーネントを兼ね備えたOSSのBootstrap 4テンプレート・「Argon Design System」
Argon Design System Argon Design Systemはたくさんのコンポーネントを備えたオープンソースのBootstrap 4テンプレートです。開発スピードをサポートするのが目的との事でデザインは概ね完成されて...
シンプルなビジュアルで確認できるCSS Grid用のチートシート・「GRID」
GRID GRIDはCSS Grid用のチートシートです。シンプルなビジュアルもあるので、より分かりやすい印象で理解も早まりそうですね。各コードはクリックだけでコピーできます。Gridやflexboxは覚えることが多いので不慣れなうち...
軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」
Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...
シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」
Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...
CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」
gradient-backgrounds gradient-backgroundsはCSSのグラデーションの様々なサンプルを紹介する複数のWebサイトのハブページです。UigradientsやGrabient、Gradient hun...