CSSで出来る小技やTips等をまとめた・「.css{tricks}」
.css{tricks} .css{tricks}はCSSで出来るTipsや小技をまとめているプロジェクトサイトです。ローディングやタブ、リセットやテキストの省略などなど、特に一貫性はなく、地味に便利な小技を収集してる印象でした。中国...
Resource - フレームワーク
ピュア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パターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...
スマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプト・「Shiny」
Shiny Shinyはスマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプトです。モバイルデバイスで加速度センサーの値を取得し、コンテンツにリフレクションエフェクトを付与する、というもの。上gifはデスクトップブラウザのシ...
three.jsよりも軽量なJavaScript 3Dライブラリ・「Shree.js」
Shree.js Shree.jsは3D描画ライブラリの代表ともいえるthree.jsよりも軽量な3Dライブラリです。豊かな機能性の代償にサイズが大きくなりがちですが、もう少し機能を抑えても良いので軽くしてほしい、というニーズは少なく...
Webサイトに訪問したユーザーの行動を記録し、再生できるライブラリ・「rrweb」
rrweb rrwebはWebサイトに訪問したユーザーの行動を記録、再生する為のWebセッションリプレイライブラリです。主に行動分析やバグの再現によるフィードバック向上、Webサイト上におけるユーザーとの対話(チャット等)の記録などを...
flexboxベースの軽量なCSSマイクロフレームワーク・「Strawberry」
Strawberry Strawberryはflexboxベースの軽量なCSSフレームワークです。圧縮版で30kbほどのようです。グラフィックに関わるスタイルは無く、各classにはプリフィクスが付いているので既存CSSに組み込んでも...
ミニマルを意識しつつ、出来る限り使いやすいCSSフレームワークを目指した・「boba」
boba bobaはミニマル設計を意識しつつも、必要最低限ではなく、出来る限り使いやすさを追求した、バランスの取れたCSSフレームワークです。有名なCSSフレームワークは肥大化しすぎ、敬遠したフレームワークはミニマルすぎる等、世にある...
Webサイト制作におけるワークフローを邪魔しない超シンプルなCSSデバッグ・「DebuCSSer」
DebuCSSer See the Pen DebuCSSer by Lucagez (@lucagez) on CodePen. DebuCSSerは超シンプルなCSSデバッグツールです。Webサイト制作時のワークフローを邪魔しな...
SRPGのようなターン制のシミュレーションゲームフレームワーク・「Zemeroth」
Zemeroth ZemerothはSRPGのようなターン制のシミュレーションゲームを構築する為のフレームワークです。Rustで書かれているそう。FEシリーズとかディスガイアのようにマスを進めて相手の陣地を得る、みたいなもの。マスはヘ...
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の頭文字をプレフィクスに、要素の名称を付与する命名規則となっており、ユニーク且つ分かりやすい、学習コストを低くしつつも...
任意のコンテンツを他言語に対応するための軽量なスクリプト・「Translater.JS」
Translater.JS See the Pen WYJevW by kachibito (@kachibito) on CodePen. Translater.JSはWebページ内の任意のコンテンツを他言語対応にするためのライブ...
ドラッグ&ドロップでWebページを作成できるスクリプト・「VvvebJs」
VvvebJs VvvebJsはWebページをD&Dで作成できるスクリプトです。jQueryに依存、bootstrap4をベースとしています。パーツやコンポーネント等を組み合わせて、コードを書かずにWebサイトを作成できる、というよく...
モバイルフレンドリーで軽量、高速なコンテンツスライダーを実装できるスクリプト・「Glider.js」
Glider.js Glider.jsはモバイルフレンドリーなコンテンツスライダーを実装できる軽量で高速なスクリプトです。使い方も簡単で動作も軽量(圧縮版で2.5kbほど)、マークアップもシンプルな状態を保てますので使い勝手も良い印象...
軽量で使いやすい非依存のオートコンプリートライブラリ・「autoComplete.js」
autoComplete.js autoComplete.jsはinput要素で自動補完を実装するためのシンプルなスクリプトです。非依存で軽量、高速なのが特徴みたいです。自動補完用のリストも簡単に作れますので個人的にも扱いやすそうとい...
シンプルで見やすいBootstrapベースの管理画面テンプレート・「Lath」
Lath Lathはシンプルで美しく見やすいBootstrapベースのadminテンプレートです。スタイルも完成されている印象で、プロジェクトのキックスタートに使って欲しいとの事で、管理画面のスタイリングをしなくても済ませられる、とい...
MediumやDropbox Paperなどのようなリッチテキストエディタを実装する為のフレームワーク・「Slate」
Slate Slateはリッチテキストエディタを作るためのフレームワークです。MediumやDropbox PaperやGoogle Docsといった、性質の異なる様々なリッチテキストエディタの構築をサポートしてくれます。Draft....
レスポンシブなWebページを簡単に作成できるWebページビルダーを作るためのスクリプト・「GrapesJS」
GrapesJS GrapesJSはWebページを簡単な操作で作成できるWebページビルダーを構築する為のスクリプトです。CMS等に内蔵させて管理画面内で動作させるのが主な目的のようです。以前からありましたが、非依存型になる等かなり改...
FlexboxベースのモバイルファーストなCSSフレームワーク・「Butter Cake」
Butter Cake Butter CakeはFlexboxベースのモバイルファーストなCSSフレームワークです。モジュール式で必要な機能は自身で追加していくタイプなので軽量に抑えることができます。よく必要とされるUIコンポーネント...