Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」
Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...
Resource - CSS3
Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」
Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...
エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」
Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」
Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...
CSSグラデーションを直感的な操作で作成できる・「GradPad」
GradPad GradPadは直感的な操作でCSSグラデーションを作成できるツールです。よくあるジェネレーターと言われればそれまでなんですが、個人的には使用感が凄く良いと感じたので備忘録的に書いてます。2つのボタンを動かすことでグラ...
CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」
basicScroll See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen. basicScrollはCSS変数を利用して...
フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」
Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...
CSS Gridを使ったWebサイトのギャラリーサイト・「Grid Examples」
Grid Examples Grid ExamplesはCSS Gridを実際に使用してレイアウトを組んでいるWebサイトのギャラリーサイトです。実例を見て学ぼう、みたいな趣旨みたいです。が、まだほとんど集まってないみたいなですね。自...
必要なものだけ揃えられたベーシックなCSSのboilerplate・「roolith」
roolith roolithは必要最低限のものだけ揃えたCSSのboilerplateです。タイポグラフィやボタン、カラースキーム、グリッドやRWDの為のブレークポイント、各ナビゲーションやフォームからヘルパークラスまで、分かりやす...
3本線のメニューアイコンのアニメーションパターンをいろいろ集めたサンプル集・「Half Second Hamburger Helper」
Half Second Hamburger Helper See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen. Half Sec...
iPhone Xや8、Galaxy S8、MacBookやApple Watchなど様々なデバイスのモックアップを作れるスタイルシート・「Devices.css」
Devices.css Devices.cssはiPhone Xや8、Galaxy S8、MacBookやApple Watch、Surfaceなどモダンなデバイスのモックアップを表現できるCSSのセットです。かなり大昔にご紹介したの...
美しいグラデーションをリスト化、編集やCSSコードのコピーも出来る・「CSS GEARS」
CSS GEARS CSS GEARSは美しいグラデーションを公開しているプロジェクトサイトです。各グラデーションは編集も可能で、CSSコードをコピーする事も可能です。マウスホバーで左右にボタンが出ますので、カラーコードを直接編集する...
画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」
Instagram.css Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgram...
CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」
Hexi-Flexi-Grid Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こう...
clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」
Angled edges Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーン...
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」
Microtip MicrotipはCSSのみで実装できる超軽量（圧縮版で1kbだそう）なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-...
Bootstrap 4向けのモダンで軽量なUIキット・「Shards」
Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...
手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」
PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」
jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」
Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」
pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...
アイコンフォントとCSSをセットにしたツールキット・「Fontisto」
Fontisto Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSS...