Shopify無料テーマ　timber.scss.cssの幅の考え方

Shopify Debut Theme Code Documentation

timber.scss.cssの幅の指定について

Shopifyの無料テーマであるBrooklynのカスタマイズをしていると、テーマ内のCSSをカスタマイズする機会があり、BrooklynだけではなくDebutにもtimber.scss.cssが使われているので、幅の考え方が少し特殊で、まるでホールケーキと同じ概念でした。幅はCSSのグリッドを使用していると思います。

ケーキ1ホールは、幅では100％で、
ケーキ1ホールのハーフサイズは、幅では50%といった考え方です。
また分数のようにも考えられます。
例えば、one-thirdの場合、1/3なので、幅にすると33%になります。
ケーキを分割するという考え方よりも分数だと思った方が理解しやすいと思います。

さらに左側に余白を追加したい場合は「PUSH」を分数の前につけると、余白をあけることができます。※「PUSH」は左側に余白をあけること
どれくらい左に余白を作るか？を指定できるのがPUSHの役割です。

（例）push-one-half { left: 50%; }
　　　push-one-third { left: 33%; }

①Whole（ホール）
one-whole　→　幅　100%

②Halves（ハーフ）
one-half　→　幅　50%

③Thirds（サード）
one-third　→　幅　33%
two-thirds　→　幅　66%

④Quarters（クオーター）
one-quarter　→　幅　25%
two-quarters　→　幅　50%
three-quarters →　幅　75%

⑤Fifths（5）
one-fifth　→　幅　20%
two-fifths　→　幅　40%
three-fifths　→　幅　60%
four-fifths　→　幅　80%

⑥Sixths（6）
one-sixth　→　幅　16.6%
two-sixths　→　幅　33.2%
three-sixths　→　幅　49.8%
four-sixths　→　幅　66.4%
five-sixths　→　幅　83%

⑧Eighths（8）
one-eighth　→　幅　12.5%
two-eighths　→　幅　25%
three-eighths　→　幅　37.5%
four-eighths　→　幅　50%
five-eighths　→　幅　62.5%
six-eighths　→　幅　75%
seven-eighths　→　幅　87.5%

⑩Tenths（10）
one-tenth　→　幅　10%
two-tenths　→　幅　20%
three-tenths　→　幅　30%;
four-tenths　→　幅　40%
five-tenths　→　幅　50%
six-tenths　→　幅　60%
seven-tenths　→　幅　70%
eight-tenths　→　幅　80%
nine-tenths　→　幅　90%

⑫Twelfths（12）
one-twelfth　→　幅　8.3%
two-twelfths　→　幅　16.6%
three-twelfths　→　幅　24.9%
four-twelfths　→　幅　33.2%
five-twelfths　→　幅　41.5%
six-twelfths　→　幅　49.8%
seven-twelfths 　→　幅　58.1%
eight-twelfths　→　幅　66.4%
nine-twelfths　→　幅　74.7%
ten-twelfths　→　幅　83%
eleven-twelfths　→　幅　91.3%

※上記の幅の指定するコードの前にPUSHをつけると左に余白をつくることができます。