ピュアCSSなマテリアルデザインコンポーネント集・「Matter」
Matter See the Pen Pure CSS Material Components Showcase by Ben Szabo (@finnhvman) on CodePen. MatterはCSSのみで作...
Resource - CSS/HTML
モジュール式のモダンなフロントエンドコンポーネントライブラリ・「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...
シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」
Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」
Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...
3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」
Three Dots Three Dotsは3つのドットで作れるCSSのローダーをまとめたプロジェクトです。それぞれbeforeとafterを使って作られているので１つの空要素と指定のclassを与えるだけで実装出来ます。色やサイズの...
60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」
60GS 60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。 60列用意したのは、60が2、3、4...