「カラーミーキット（2カラム）」の基本
カラーミーショップで用意されているドキュメントはこちら
必要十分な情報が記載されているのですが、「CSSフレームワーク」を使ったことのある方以外は、取っ掛り難いかもしれません。
出来上がり想像してコーディングし易く、レスポンシブデザインが組みやすいように配慮して、予め沢山のclassが定義されたcssと考えればよいでしょう。
ワイヤーフレームで出来上がりをPC/タブレット/スマホで作って、それに合わせてフレームごとに作ったhtmlに必要なclassを並べていく感じで組みあげていけます。予め定義されたclassについては、テキストのスタイル、パディング、マージン、など沢山あります。cssを見れば、コメントもありますし、htmlでコーディングする最低限の知識があれば難しくないでしょう。
レスポンシブデザインで実際に組んだことがないとグリッドというのが意外にわかりにくいかもしれません。
デバイスのサイズに応じたclassの書き方は以下の表をご参照ください。
| class | 参照デバイス | デバイスサイズ |
.col-lg-[n] |
デスクトップ | 全てのデバイスサイズに適用 |
.col-md-[n] |
デスクトップ～タブレット | 980px以下のデバイスに適用 |
.col-sm-[n] |
タブレット～スマートフォン | 768px以下のデバイスに適用 |
.col-xs-[n] |
スマートフォン | 480px以下のデバイスに適用 |
それぞれの画面の幅を１２等分していますの、nは１～１２の数字になります。
n=12なら画面幅、n=3なら画面に残りn=9分横に並ぶ（n=3のフレームなら4つ横に並ぶ）
これを必要に応じでそれぞれの画面サイズごとにclassに並べていけばよいだけです。
例えば、
「デスクトップでは4列、タブレットでは2列、スマホなら1列にしたい」なら、「class=”col col-lg-3 col-md-6 col-sm-12″」とすればよいだけです。これらのグループを「<div class=”row”></div>」で括れば、この塊りの中で画面サイズに合わせて表示の並びが変わっていきます。
そのほか、タイポグラフィー、テーブル、ボタン、アイコンなどあります。これはカラーミーキットの説明で必要十分でしょう。
