Container

画面表示の基本となるコンテナの定義です。
最大幅を設定した箱(表示領域)を設定するのに使用します。
Class
kk-container コンテナ
Attribute
size-ss max-width: 480px
size-s max-width: 720px
指定なし max-width: 1200px
size-l max-width: 1600px
left 左寄せになる

Container

コンテナ

devなどのclassにkk-containerを指定してください。
size-*の属性を合わせて指定することでコンテナサイズを指定できます。
基本は中央揃えですが、left属性を指定することで左寄せにできます。
下記サンプルで、ウィンドウ幅を変えながらサイズ指定の挙動をご確認いただけます。
<div class="kk-container kk-margin-top" size-ss>
  <div class="kk-box-dashed kk-align-center kk-bg-color-attention">
    size-ss (max-width: 480px)
  </div>
</div>
<div class="kk-container kk-margin-top" size-s>
  <div class="kk-box-dashed kk-align-center kk-bg-color-attention">
    size-s (max-width: 720px)
  </div>
</div>
<div class="kk-container kk-margin-top">
  <div class="kk-box-dashed kk-align-center kk-bg-color-attention">
    default (max-width:1200px)
  </div>
</div>
<div class="kk-container kk-margin-top" size-l>
  <div class="kk-box-dashed kk-align-center kk-bg-color-attention">
    size-l (max-width:1600px)
  </div>
</div>
<div class="kk-container kk-margin-top" size-ss left>
  <div class="kk-box-dashed kk-align-center kk-bg-color-attention">
    left
  </div>
</div>
size-ss (max-width: 480px)
size-s (max-width: 720px)
default (max-width:1200px)
size-l (max-width:1600px)
left