シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」
Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...
Resource - CSS/HTML
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...
ミニマルなflexboxベースのCSSグリッドシステム・「Katana」
Katana KatanaはミニマルなflexboxベースのCSSグリッドシステムです。calcを使用して軽量化を実現しているみたいです。非圧縮でも1kbほど、.scssなら20行ほどです。clac便利ですねぇ。ライセンスはMITです...
ミニマルで軽量なFlexboxベースのCSSフレームワーク・「Flexy」
Flexy Flexyはミニマルで軽量なFlexboxベースのCSSフレームワークです。圧縮版で0.33KBほどになるとの事。IEにも対応させる場合はflexy-old.cssも読み込むhつ用があるようです。UIコンポーネント等の用意...
超軽量なCSS gridベースのフレームワーク・「Smart CSS Grid」
Smart CSS Grid Smart CSS Gridは超軽量なCSS gridベースのグリッドシステムです。0.5kbでレスポンシブ、ネストも不要でグリッドレイアウトを構築できる、というもの。HTMLも少なくて済むのでスマートな...
Bootstrapベースのスタイルガイド用テンプレート・「Bootstrap Style Guide Boilerplate」
Bootstrap Style Guide Boilerplate Bootstrap Style Guide BoilerplateはBootstrapベースのスタイルガイド用Boilerplateです。スタイルガイド作成の手間を省...
様々なレイアウトに対応できるよう設計されたflexboxベースのグリッドシステム・「Flexible Grid」
Flexible Grid Flexible Gridは様々なレイアウトでも対応できるよう設計されたflexboxベースのCSSグリッドシステムです。モバイルファーストでレスポンシブ且つ、セマンティックなマークアップにも使用可能でリー...
一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」
Mustard UI Mustard UIはWebサイト等で必要になりそうなUIコンポーネントを一通り取り揃えたCSSフレームワークです。モジュラー式なので必要なコンポーネントのCSSだけ読み込めばいいので軽量で済みます。スタイルはあ...
Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」
Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...
シンプルで直感的なSCSSフレームワーク・「FICTOAN」
FICTOAN FICTOANは直感的に使えるシンプルなSCSSフレームワークです。horizontal-center-thisなどといった分かりやすさ重視のclass命名、モジュール式で必要なものを必要な時に読み込むことでライトに使...
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」
tabler tablerはBootstrap 4ベースのシンプルなUIの管理画面テンプレートです。多くの場合は左カラムにメニューを配置するケースが多かった気がしますが、こちらは上部に配置されていますので操作性よりは視認性に優れている...
エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」
Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...
軽量でモバイルファーストなCSSフレームワーク・「Beauter」
Beauter Beauterは軽量でモバイルファーストなCSSフレームワークです。従来品と異なるのはBOLという実験的な命名規則を導入している点です。BOLは.base(基本クラス)、.-object(オブジェクトクラス)、._la...
デフォルトのスタイルを最小限に抑えられたシンプルなclassで管理する事を目指したCSSフレームワーク・「InvisCss」
InvisCss InvisCssはデフォルトのスタイルを最小限に抑えた、シンプルな命名規則で付けられたclassで管理できるCSSフレームワークです。Bootstrapを意識し、スタイルを作りこまないようにしつつもテーマを用意、cl...
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」
Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...
フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」
Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...
必要なものだけ揃えられたベーシックな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フレームワーク・「lit」
lit litはSkeletonやMilligramなど、他のミニマルなCSSフレームワークの良い点を参考に作られたCSSフレームワークです。現段階で世界最小（398 bytes）だそうです。良い点を持った、というのは僕の勝手な解釈な...