シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」 Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...2018.07.16 | 11時03分14秒
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」 Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...2018.07.14 | 10時20分51秒
3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」 Three Dots Three Dotsは3つのドットで作れるCSSのローダーをまとめたプロジェクトです。それぞれbeforeとafterを使って作られているので1つの空要素と指定のclassを与えるだけで実装出来ます。色やサイズの...2018.06.18 | 10時15分44秒
60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」 60GS 60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。 60列用意したのは、60が2、3、4...2018.06.15 | 10時15分20秒
ミニマルなflexboxベースのCSSグリッドシステム・「Katana」 Katana KatanaはミニマルなflexboxベースのCSSグリッドシステムです。calcを使用して軽量化を実現しているみたいです。非圧縮でも1kbほど、.scssなら20行ほどです。clac便利ですねぇ。ライセンスはMITです...2018.06.13 | 10時15分07秒
ミニマルで軽量なFlexboxベースのCSSフレームワーク・「Flexy」 Flexy Flexyはミニマルで軽量なFlexboxベースのCSSフレームワークです。圧縮版で0.33KBほどになるとの事。IEにも対応させる場合はflexy-old.cssも読み込むhつ用があるようです。UIコンポーネント等の用意...2018.06.06 | 10時15分13秒
超軽量なCSS gridベースのフレームワーク・「Smart CSS Grid」 Smart CSS Grid Smart CSS Gridは超軽量なCSS gridベースのグリッドシステムです。0.5kbでレスポンシブ、ネストも不要でグリッドレイアウトを構築できる、というもの。HTMLも少なくて済むのでスマートな...2018.05.04 | 11時04分50秒
Bootstrapベースのスタイルガイド用テンプレート・「Bootstrap Style Guide Boilerplate」 Bootstrap Style Guide Boilerplate Bootstrap Style Guide BoilerplateはBootstrapベースのスタイルガイド用Boilerplateです。スタイルガイド作成の手間を省...2018.05.02 | 11時54分13秒
様々なレイアウトに対応できるよう設計されたflexboxベースのグリッドシステム・「Flexible Grid」 Flexible Grid Flexible Gridは様々なレイアウトでも対応できるよう設計されたflexboxベースのCSSグリッドシステムです。モバイルファーストでレスポンシブ且つ、セマンティックなマークアップにも使用可能でリー...2018.04.13 | 11時12分28秒
一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」 Mustard UI Mustard UIはWebサイト等で必要になりそうなUIコンポーネントを一通り取り揃えたCSSフレームワークです。モジュラー式なので必要なコンポーネントのCSSだけ読み込めばいいので軽量で済みます。スタイルはあ...2018.04.11 | 10時08分50秒
Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」 Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...2018.03.27 | 10時19分36秒
シンプルで直感的なSCSSフレームワーク・「FICTOAN」 FICTOAN FICTOANは直感的に使えるシンプルなSCSSフレームワークです。horizontal-center-thisなどといった分かりやすさ重視のclass命名、モジュール式で必要なものを必要な時に読み込むことでライトに使...2018.03.21 | 11時40分34秒
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」 tabler tablerはBootstrap 4ベースのシンプルなUIの管理画面テンプレートです。多くの場合は左カラムにメニューを配置するケースが多かった気がしますが、こちらは上部に配置されていますので操作性よりは視認性に優れている...2018.03.20 | 10時33分55秒
エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」 Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...2018.03.18 | 10時07分25秒
軽量でモバイルファーストなCSSフレームワーク・「Beauter」 Beauter Beauterは軽量でモバイルファーストなCSSフレームワークです。従来品と異なるのはBOLという実験的な命名規則を導入している点です。BOLは.base(基本クラス)、.-object(オブジェクトクラス)、._la...2018.03.15 | 11時00分23秒
デフォルトのスタイルを最小限に抑えられたシンプルなclassで管理する事を目指したCSSフレームワーク・「InvisCss」 InvisCss InvisCssはデフォルトのスタイルを最小限に抑えた、シンプルな命名規則で付けられたclassで管理できるCSSフレームワークです。Bootstrapを意識し、スタイルを作りこまないようにしつつもテーマを用意、cl...2018.03.12 | 10時50分47秒
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」 Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...2018.03.02 | 11時15分22秒
フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」 Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...2018.02.11 | 10時08分06秒
必要なものだけ揃えられたベーシックなCSSのboilerplate・「roolith」 roolith roolithは必要最低限のものだけ揃えたCSSのboilerplateです。タイポグラフィやボタン、カラースキーム、グリッドやRWDの為のブレークポイント、各ナビゲーションやフォームからヘルパークラスまで、分かりやす...2018.02.02 | 11時46分24秒
3本線のメニューアイコンのアニメーションパターンをいろいろ集めたサンプル集・「Half Second Hamburger Helper」 Half Second Hamburger Helper See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen. Half Sec...2018.01.22 | 10時29分40秒
iPhone Xや8、Galaxy S8、MacBookやApple Watchなど様々なデバイスのモックアップを作れるスタイルシート・「Devices.css」 Devices.css Devices.cssはiPhone Xや8、Galaxy S8、MacBookやApple Watch、Surfaceなどモダンなデバイスのモックアップを表現できるCSSのセットです。かなり大昔にご紹介したの...2018.01.21 | 10時01分17秒
他のミニマルなCSSフレームワークを参考にして作られた超軽量CSSフレームワーク・「lit」 lit litはSkeletonやMilligramなど、他のミニマルなCSSフレームワークの良い点を参考に作られたCSSフレームワークです。現段階で世界最小(398 bytes)だそうです。良い点を持った、というのは僕の勝手な解釈な...2018.01.13 | 10時26分24秒