TEDが公開するオープンソースのAtomic CSSライブラリ・「shed.css」 shed.css shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれの...2018.09.28 | 9時39分43秒
CSSのClip Pathを直感的な操作で簡単に作成できる・「Clip Path Generator」 Clip Path Generator Clip Path Generatorはその名の通りClip Pathを作成できるジェネレーターです。直感的な操作でパスを生成、コードを発行してくれる、というもの。マウス操作でパスを生成したら即...2018.09.09 | 10時06分20秒
Webサイト開発スピードをサポートするモダンなCSSフレームワーク・「BuddyCSS」 BuddyCSS BuddyCSSはWebサイトの制作、開発スピードをサポートするモダンな設計のCSSフレームワークです。同梱されるすべてのコンポーネントはレスポンシブ、SassベースでタスクランナーにはGulpが用いられています。コ...2018.08.17 | 10時38分40秒
シンプルなビジュアルで確認できるCSS Grid用のチートシート・「GRID」 GRID GRIDはCSS Grid用のチートシートです。シンプルなビジュアルもあるので、より分かりやすい印象で理解も早まりそうですね。各コードはクリックだけでコピーできます。Gridやflexboxは覚えることが多いので不慣れなうち...2018.08.11 | 10時10分17秒
軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」 Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...2018.07.27 | 10時02分55秒
Webページの任意の要素に設定されたCSSをチェック、コピーできるブラウザ拡張・「CSS Scan」 CSS Scan CSS ScanはWeページの任意の要素のCSSをチェックし、クリップボードにコピーできるブラウザ拡張です。ChromeとFirefox用が用意されていますが、この手のものにしては珍しく有料でgumroadにて3US...2018.07.26 | 10時44分49秒
シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」 Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...2018.07.22 | 9時51分14秒
CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」 gradient-backgrounds gradient-backgroundsはCSSのグラデーションの様々なサンプルを紹介する複数のWebサイトのハブページです。UigradientsやGrabient、Gradient hun...2018.07.19 | 10時00分26秒
シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」 Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...2018.07.16 | 11時03分14秒
CSSのコードと解説を共有できる・「CSS Playground」 CSS Playground CSSのコードと解説を共有できるPlaygroundツールです。左ペインに解説、右ペインにはjsfidleライクなエディタ兼ビューエリアが設置されており、解説を見ながら動作を確認、学習できる、というもの。...2018.07.15 | 10時19分11秒
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」 Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...2018.07.14 | 10時20分51秒
350以上あるWebフレンドリーでオープンソースなSVGアイコンセット・「BoxIcons」 BoxIcons BoxIconsはWebフレンドリーなオープンソースのSVGアイコンセットです。350以上のアイコンが用意されています。使い方はfont-awesomeライクでCSSを読み込み、classを付与すればいいだけです。 ...2018.06.22 | 10時18分19秒
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秒
完成形を見ながらインタラクティブにCSSグリッドのコードを生成する・「cssgr.id」 cssgr.id cssgr.idはCSSグリッドのコードをインタラクティブに生成するジェネレーターです。シンプルにそれ以上でも以下でもないものです。生成されるコードは以下のようなものです。 CSSグリッドはコンテナを並...2018.05.01 | 10時20分40秒
様々なレイアウトに対応できるよう設計された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秒
テキスト入力すると自動でマインドマップを作成できる・「Text2MindMap」 Text2MindMap Text2MindMapはテキスト入力だけでマインドマップを作成してくれるツールです。CSSとJavaScriptで出来ており、インデントすれば子のアイテムを作成します。非常に簡易的なもので、保存はプレーンテ...2018.04.03 | 10時20分33秒