Deco

色や装飾・位置を調整する Utility を、ほぼすべてのモジュールに対して使えます。

Add Class.is-dark.is-dark-1.is-dark-2.is-dark-3.is-dark-4.is-dark-5.is-dark-6.is-dark-7.is-dark-8.is-dark-9
Text Alpha10.870.70.60.50.40.260.150.120.05
Add Class.is-light.is-light-1.is-light-2.is-light-3.is-light-4.is-light-5.is-light-6.is-light-7.is-light-8.is-light-9
Text Alpha10.870.70.60.50.40.260.150.120.05
Add Class.is-primary.is-info.is-success.is-warning.is-danger
Text Colorシアンブルーグリーンオレンジレッド
Add Class.is-normal.is-strong
Text Weight400700
Add Class.is-weight-100.is-weight-200.is-weight-300.is-weight-400.is-weight-500.is-weight-700.is-weight-900
Text Weight100200300400500700900
Add Class.is-italic.is-delete.is-capitalize.is-lowercase.is-uppercase
Text Styleイタリック打ち消しcapitalizelowercaseuppercase
Add Class.is-left.is-center.is-right.is-justify.is-baseline.is-top.is-middle.is-bottom
Text Positionleftcenterrightjustifybaselinetopmiddlebottom
Add Class.is-nowrap.is-break
Function文字が端で折り返さない文字が端で折り返す
Add Class.is-centering.is-scroll-x.is-ellipsis
Functionブロック要素を中央寄せ直下のコンテンツを横スクロール3点リーダーで省略

Responsive

.is-(xxxx)-(yy) 形式の class を加えることでレスポンシブにプロパティを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

left

.is-mobile-left

.is-fablet-left

.is-tablet-left

.is-desktop-left

.is-wide-left

center

.is-mobile-center

.is-fablet-center

.is-tablet-center

.is-desktop-center

.is-wide-center

right

.is-mobile-right

.is-fablet-right

.is-tablet-right

.is-desktop-right

.is-wide-right

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

left

.is-mobile-only-left

.is-fablet-only-left

.is-tablet-only-left

.is-desktop-only-left

center

.is-mobile-only-center

.is-fablet-only-center

.is-tablet-only-center

.is-desktop-only-center

right

.is-mobile-only-right

.is-fablet-only-right

.is-tablet-only-right

.is-desktop-only-right

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

left

.is-mobile-fablet-left

.is-mobile-tablet-left

.is-mobile-desktop-left

center

.is-mobile-fablet-center

.is-mobile-tablet-center

.is-mobile-desktop-center

right

.is-mobile-fablet-right

.is-mobile-tablet-right

.is-mobile-desktop-right

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

left

.is-landscape-left

.is-portrait-left

center

.is-landscape-center

.is-portrait-center

right

.is-landscape-right

.is-portrait-right

Last Updated: 11/6/2018, 1:24:05 AM