新たな機能が追加されました→
ドキュメント
CSS Framework
ヘルパークラス

Helper classes

私たちはテンプレートに対してセマンティックなアプローチを使用しています。つまり、人間が判読できる意味のある用語 (.button、.header-nav、.section など) をクラスに付ける傾向があります。 これはさまざまな理由 (opens in a new tab)から重要です。

Containers

ClassDescription
.containerLarge container (1080px wide)
.container-smSmall container (896px)
.container-xsSmaller container (620px)

Typography

ClassDescription

.h1, .h2, .h3, .h4, .h5, .h6

To make the text look like headings

.h1-mobile, .h2-mobile, .h3-mobile, .h4-mobile, .h5-mobile, .h6-mobile

To make the text look like headings on smaller screens only

.text-sm, .text-xs, .text-xxs

To make the text look smaller

.ta-l, .ta-c, .ta-r

Adds a text-align property (left, center, right)

.ta-l-mobile, .ta-c-mobile, .ta-r-mobile

Same as above, but for smaller screens only

.fw-400, .fw-500, .fw-600, .fw-700

To change the font-weight property with the corresponding value

.text-color-high, .text-color-mid, .text-color-low

To change the text contrast

.text-color-primary, .text-color-secondary, .text-color-error, .text-color-warning, .text-color-success

To change the default text color
.tt-uTransforms text to uppercase

Spacing

ClassDescription

.m-0, .m-4, .m-8, .m-12, .m-16, .m-24, .m-32

Sets the margin property to the corresponding value

.mt-0, .mt-4, .mt-8, .mt-12, .mt-16, .mt-24, .mt-32

Sets the margin-top property to the corresponding value

.mr-0, .mr-4, .mr-8, .mr-12, .mr-16, .mr-24, .mr-32

Sets the margin-right property to the corresponding value

.ml-0, .ml-4, .ml-8, .ml-12, .ml-16, .ml-24, .ml-32

Sets the margin-left property to the corresponding value

.mb-0, .mb-4, .mb-8, .mb-12, .mb-16, .mb-24, .mb-32

Sets the margin-bottom property to the corresponding value

.p-0, .p-4, .p-8, .p-12, .p-16, .p-24, .p-32

Sets the padding property to the corresponding value

.pt-0, .pt-4, .pt-8, .pt-12, .pt-16, .pt-24, .pt-32

Sets the padding-top property to the corresponding value

.pr-0, .pr-4, .pr-8, .pr-12, .pr-16, .pr-24, .pr-32

Sets the padding-right property to the corresponding value

.pl-0, .pl-4, .pl-8, .pl-12, .pl-16, .pl-24, .pl-32

Sets the padding-left property to the corresponding value

.pb-0, .pb-4, .pb-8, .pb-12, .pb-16, .pb-24, .pb-32

Sets the padding-bottom property to the corresponding value

.spacer-4, .spacer-8, .spacer-12, .spacer-16, .spacer-24, .spacer-32, .spacer-48, .spacer-64

Very helpful when used on an empty div as vertical spacer.
Sets a padding-top property with the corresponding value

.spacer-4-mobile, .spacer-8-mobile, .spacer-12-mobile, .spacer-16-mobile, .spacer-24-mobile, .spacer-32-mobile, .spacer-48-mobile, .spacer-64-mobile

Same as above, but for smaller screens only

Other utility classes

ClassDescription
.screen-reader

Makes content invisible but accessible to screen reader users (opens in a new tab)

.list-reset

Resets the default style of unordered (<ul>) and ordered lists (<ol>)

.has-bg-color

Inverts the background-color of an element.
Useful if you want to turn the light background-color of a section to dark, and vice-versa

.invert-color

Inverts the color of an element and its descendants (i.e. the color of text).
This class is often used in combination with .has-bg-color

.center-contentCenter aligns the element and its descendants
.center-content-mobileSame as above, but for smaller screens only
.center-content-desktopSame as above, but for larger screens only

.has-top-divider, .has-bottom-divider

Adds a top and/or a bottom line divider to an element.
Often used for sections

.image-full

Ensure that an image width is 100%

.image-larger

Makes an image overflow its parent container of a certain number of pixels.
Variable for exceeding pixels is $image-larger--extra-width
and can be found in settings/base/_misc.scss

.has-shadow

Adds some box-shadow to an element, and the value can be found
in settings/base/_colors.scss ($bg--color array)

テンプレートのカスタマイズイラスト