ネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。
制作中に気づいた点・感じたことなどを書きます。
今回はその４回目。
カラーミーキットとは？
カラーミーショップには、「カラーミーキット」という公式のCSSフレームワークがあります。
Bootstrapの改変版・簡易版みたいなやつで、Bootstrapに慣れている人ならすぐに理解できると思います。
Bootstrapに比べるとバーツ群が貧弱ですが、とりあえずレスポンシブでグリッドだけ使いたいという人にはピッタリかもしれません。
導入は、設定のテンプレート追加画面から「カラーミーキット（2カラム）」を追加するだけでOKです。
PCファーストのグリッド
カラーミーキットのグリッドの記述方法は、クラス「col-xs-6」みたいな感じでBootstrapと同じですが、２つ大きな違いがあります。
まず１つ目。
全てのデバイスサイズに適用されるクラスは
Bootstrapの場合、
col-xs-[n]
となりますが、
カラーミーキットの場合は逆に、
col-lg-[n]
になってます。
そうなんです、逆なんですね。
Bootstrapの場合はモバイルファースト。
カラーミーキットの場合は、ECサイトという性質のためか、発想がPCファーストになってます。
ブレイクポイントとクラスの規定が違う
２つ目。
ブレイクポイントとクラスの規定が違います。
Bootstrap
- col-xs-[n]：767px以下
- col-sm-[n]：768px ～ 991px
- col-md-[n]：992px ～ 1119px
- col-lg-[n]：1200px以上
カラーミーキット
- col-lg-[n]：981px以上
- col-md-[n]：769px ～ 980px
- col-sm-[n]：481px ～ 768px
- col-xs-[n]：480px以下
モバイルファーストとPCファーストの違いのため、順番も逆に書いてます。
カラーミーキットはBootstrapに比べて、一段階小さめにブレイクポイントを規定していますね。
グリッドはミスにご注意
このようにカラーミキットは、Bootstrapが元になっているためによく似ていますが、大きな違いは、
◇グリッドの発想が逆（PCファースト）
◇ブレイクポイントとクラスの規定が違う
◇パーツが貧弱
この３つになります。
特にグリッドはBootstrapの感覚のままに使っていると、大きなミスにつながるのでご注意ください。
