CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
Post on:2015年10月15日
sponsors
Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。
スニペットに登録したり、ブックマークしておくと便利ですね。
Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的に利用できるようSCSSでダウンロードできます。
参考として、更に掘り下げた記事もピックアップしました。
Flexboxを使った汎用性に優れたグリッド。
参考: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
%, vhを使ったサイズ指定。
参考: ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
コンテナの中に自由に配置できるclass指定。
よく使用されるアイテムが揃ったシンプルなフォーム。
参考: フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート
各種ボタン（デフォルト・大・小・極小・第二・アウトライン）
1px, 2px, 3pxのボーダー。
背景とインライン画像のサイズ・ポジション・アタッチメントの実用的なclassのまとめ。
通常利用するブレイクポイントの設定。
参考: しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
表示・非表示、インライン、オーバーフロー、スクロールバーなど、ユーティリティ関連。
キーフレームで動作するアニメーションのコレクション。
sponsors
