マージン（margin）、パディング（padding）、フォントサイズ（font-size）の3つの主なセレクタに焦点を絞り、コーディング時にゴリゴリレイアウトを調整することが出来るCSSフレームワークを作ってみました。

用途としては、そうですね。
bootstrapベースのモックアップを作る時、レイアウトの間隔や文字サイズを調整したい時などにbootsrapと同様にクラス名を当てるだけで、ササッと調整できるようになります。

ちなみにadjustment.cssの名の由来は正直なんでも良かったり。

ダウンロード

CSSフレームワーク adjustment.css（仮）
※ファイルサイズが役割に対して大きいです、すみません。

使い方

ダウンロードしたadjustment.cssを任意のディレクトリに設置して読み込ませて下さい。

仕組みとしてはmargin、padding、font-sizeの3つしか主なセレクタがないので非常に単純です。
全てのクラス名は規則的に命名し、以下の通りになります。
（単位はpxにしましたが、今後変わるかもしれません。）

Nに1〜100までの任意の数字を入れることで機能します。100までが、1刻みが適切かはまだわからなかったのですが、最初のバージョンはひとまずこんな感じになっちゃいました。
また、bootstrapと合わせて使うことを想定したので、メディアクエリの指定はbootstrapに準拠しています。
◯◯-sm-◯◯は991px以下の時に適用、
◯◯-xs-◯◯は767px以下の時に適用するようになっています。

例えばスマートフォンで少し文字サイズを小さくしたいときはfs-xs-12のクラス名を当てるとスマートフォン時にフォントサイズが12pxで表示されるようになります。

そのほかスマートフォンだとコンテンツの間隔が狭いときにmt-xs-40やpb-xs-40などのクラス名を当てて間隔を簡単に調整することが可能です。

使用例

このフレームワークを作った経緯として、外国産のHTMLテンプレートなどをカスタマイズしていると、このようなCSSが設定されていることが多かった（しかも結構半端に）のと、どこかに調整用のCSS転がっていないかなと探したら、意外に無かったのでそこまで手間ではなさそうなので自分で作ってしまいました。探せば実は似たようなCSSフレームワークはあるかもしれないですけどね。