カラーミーショップにてサイト制作中(その4)カラーミーキットとは?

カラーミーショップにてサイト制作中(その4)カラーミーキットとは?

ネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。

制作中に気づいた点・感じたことなどを書きます。
今回はその4回目。

カラーミーショップ

カラーミーキットとは?

カラーミーショップには、「カラーミーキット」という公式のCSSフレームワークがあります。

カラーミーキット

Bootstrapの改変版・簡易版みたいなやつで、Bootstrapに慣れている人ならすぐに理解できると思います。

Bootstrapに比べるとバーツ群が貧弱ですが、とりあえずレスポンシブでグリッドだけ使いたいという人にはピッタリかもしれません。

導入は、設定のテンプレート追加画面から「カラーミーキット(2カラム)」を追加するだけでOKです。

PCファーストのグリッド

カラーミーキットのグリッドの記述方法は、クラス「col-xs-6」みたいな感じでBootstrapと同じですが、2つ大きな違いがあります。

まず1つ目。

全てのデバイスサイズに適用されるクラスは
Bootstrapの場合、

col-xs-[n]

となりますが、
カラーミーキットの場合は逆に、

col-lg-[n]

になってます。

そうなんです、逆なんですね。

Bootstrapの場合はモバイルファースト。
カラーミーキットの場合は、ECサイトという性質のためか、発想がPCファーストになってます。

ブレイクポイントとクラスの規定が違う

2つ目。
ブレイクポイントとクラスの規定が違います。

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ファースト)
◇ブレイクポイントとクラスの規定が違う
◇パーツが貧弱

この3つになります。

特にグリッドはBootstrapの感覚のままに使っていると、大きなミスにつながるのでご注意ください。

 

関連記事

カラーミーショップにてサイト制作中(その7)ショップブログプラスのカスタマイズ

2016.12.07

カラーミーショップにてサイト制作中(その6)Bootstrapの実装方法

2016.12.02

カラーミーショップにてサイト制作中(その5)ショップ運営には販促用カレンダーが便利

2016.11.28

カラーミーショップにてサイト制作中(その3)トップと枝ページのレイアウトを変える

2016.11.14

カラーミーショップにてサイト制作中(その2)オリジナルデザインとスライドショー

2016.11.11

カラーミーショップにてサイト制作中(その1)HTMLとjQueryのバージョンに注意

2016.11.08