Utilities

Responsive Design

すべてのutility classには4つのブレイクポイントに対応した接尾辞（@sm,@md,@lg,@xl）が用意されており、これらを付与することによりブレイクポイント別にstyleを適用させることができます。

Useage

font:xs font:xl@lg font:2xl@xl

1<div className="font:xs font:xl@lg font:2xl@xl">...</div>

text:center text:left@sm

1<div className="text:center text:left@sm">...</div>

cols:6
cols:4@md
cols:2@xl

1<div className='cols'>
2  <div className="cols:6 cols:4@md cols:2@xl">...</div>
3  <div className="cols:6 cols:4@md cols:2@xl">...</div>
4  <div className="cols:6 cols:4@md cols:2@xl">...</div>
5  <div className="cols:6 cols:4@md cols:2@xl">...</div>
6</div>

Settings

ブレイクポイントの値については "settings/custom-media.css" で定義します。

Learn more