HTML内で使われていないCSS記述を削除して、CSSファイルのダイエットができるサイト。自分の場合、過去に作ったサイトをフレームワーク代わりにして新規にサイト作る事とかあるので、こういうとっても助かります。HTMLの削除だけ手動でやって、CSSの削除はこうしたジェネレーターに任せる事ができれば、作業時間大幅に短縮できますからね。というわけで早速コード突っ込んでみたんですが、なぜかタイムアウトしちゃいました・・・。なんか条件とかあるのかもしんないです。ぬふぅ。
汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。
Javascript使わなくてもCSSだけでできるYO！という作例集。例えばイメージスライダーやModal、ビュースイッチャー（タブ切り替え）、ファイルアップロード、フォームバリデーション、アコーディオン、Lightboxなどを、JSを使わずにCSSだけで実現する方法が紹介されています。CSSはSCSS形式で記述されているので、通常のCSSの方が使いやすいという人はSassMeisterあたりを使えばエンコードできます。JS使わなくてもわりと色々できちゃうんですよね。
テキストを使ったローディングアニメーション。導入はリンク行を1行追記するだけ。配置はClass付けたspanタグを置けばイイみたいです。アニメーションさせるのに使っているのがテキストデータなので、ロードにはほとんど時間がかからないものと思われます。興味深いのが絵文字を使ったアニメーション。月の満ち欠けや地球の自転、走る人など、絵ヅラ的に連続している絵文字をアニメーションのコマに使っている点です。また「How it works」の項を見ると、どういう仕組みで動作しているのか分かります（これがまた超シンプル）。特にJSを使う事もなく、CSSだけで簡単に導入できる点も使い勝手が良さそうです。
FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。
CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。
最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。
罫線のデザイン作例。hrタグに対してCSS適用するだけなので簡単に導入できます。自分の場合Webで罫線デザインするのって結構やりかた忘れるので（borderだっけheightだっけみたいな）、これ系のコードスニペット用意しておくとサクっと使えるのでわりと重宝してます。地味ですけどね。けど大事ですよねこういうネタ帳。
