Webデベロッパーのための便利なリソースが20例まとめられた記事。内容はJS、CSSなど、主にコーディングを行う人にとって便利なものが紹介されています。CSSやSVGを使ったローディングアニメーションや、全画面オーバーレイのエフェクト、スワイプ可能なフォトギャラリーなど、最近のWebにおけるトレンドみたいなものも押さえられてるという印象です。
レスポンシブグリッドのCSSジェネレーター。このサイトすごい便利です。グリッドの数、グリッド内のパディング、ガター（グリッド間のマージン）などの基本的な指定の他に、任意の位置でブレイクポイントを指定できます。数はいくつでもイイみたい。これらを一通り指定できたら、ページ左下にある「Download your Gridpak」をクリックする事で、ファイル一式をまとめてダウンロードできます。Zipファイル内にはCSSファイルの他にLESSとSCSSファイル、デザイン用のPNG、動作デモなどが同梱されており、デザイナー、コーダーの双方が幸せになれる内容となっております。サイトデザイン始める時にこれ使うのアリだなーと思いました。
CSS3を使って描画できる様々なアニメーション作例をまとめた記事。多くの作例はCodePenにリンクしており、仕組みを見る事ができます。いくつか見てみたんだけど、凝ったアニメーション作例多いっす。色々と応用できそうな感じ。
Webでよく使われるアコーディオンメニューの作例をまとめた記事。各作例をクリックすると、素材の配布先に行けます。ものによってPSDを配布してたりコードそのものを掲載してたり色々です。CodePenにリンクしているものもあるので、それ系だと導入がとっても楽ですね。開閉する仕組みも縦方向だったり横方向だったり、またサブメニューを用意しているものなど色々あるので、アコーディオン素材が欲しい時に便利そうです。
メディアクエリーの、各デバイスごとのブレイクポイントをまとめた記事。レスポンシブレイアウト組む際、デバイスごとに微調整するのに使えそうです。紹介されているデバイスはiOS系では各種iPhoneとiPad、Android系ではGalaxy S3, S4, S5。まぁ一般的という意味でAppleとSamsungの各種デバイスが紹介されています。自分の場合は最近はブレイクポイント1箇所、ランドスケープでPCレイアウトで見せたい場合は767px以下、ランドスケープでもスマホレイアウトで見せたい場合は480px以下にしてます。ブレイクポイント何個も作ると作るのめんどいんですよね。
クールなWebサイトのデザインギャラリー。見た感じ結構多くのサイトが紹介されています。Pinterestでフォローする事もできるので、Pinterestヘビーユーザーの人は日々のチェックも楽にできそうです。紹介されているサイトの質も高いので、ネタ帳としてなかなかナイス。
CSSだけで描画する事のできる、トグル型のチェックボックス。CodePenで書かれているので、ここからHTMLとCSSを確認できます。フォームパーツの装飾ってJSを使って行う場合が多いけど、これはCSSだけで反映されるので使い勝手が良さそうです。
Yahooの提供するPure.cssのサイト内に、よく使われるレイアウト紹介のページがあるんだけど、これが結構よく出来ててイイ感じなんです。目的別にいくつかのレイアウトが紹介されており、例えばブログやランディングページ、フォトギャラリーなどでよくあるレイアウトが一覧で紹介されています。各レイアウトはソース一式をまるっとダウンロードする事ができ、シンプルかつ必要な要素がだいたい揃っているので、サイト制作の初動にかかる時間を節約できそうです。pure.cssはオンライン上のものを読み込む仕組みで、同梱はされていません。自分は普段Bootstrap使う事が多いけど、これだけよく出来たテンプレートが用意されてるならPureも今度使ってみようかな、とか思いました。LPのテンプレートがなかなか素晴らしいです。
