サイズ変更を行う Utility を、すべてのモジュールに対して使えます。
Add Class | .is-xxs | .is-xs | .is-sm | .is-md | .is-lg | .is-xl | .is-xxl |
Change Size | 62.5% | 75% | 87.5% | 100% | 125% | 150% | 200% |
.is-(xxxx)-(yy)
形式の class を加えることでレスポンシブにサイズを変化させられます。
Mobile | Fablet | Tablet | Desktop | Wide | |
---|---|---|---|---|---|
62.5% | .is-mobile-xxs | .is-fablet-xxs | .is-tablet-xxs | .is-desktop-xxs | .is-wide-xxs |
75% | .is-mobile-xs | .is-fablet-xs | .is-tablet-xs | .is-desktop-xs | .is-wide-xs |
87.5% | .is-mobile-sm | .is-fablet-sm | .is-tablet-sm | .is-desktop-sm | .is-wide-sm |
100% | .is-mobile-md | .is-fablet-md | .is-tablet-md | .is-desktop-md | .is-wide-md |
125% | .is-mobile-lg | .is-fablet-lg | .is-tablet-lg | .is-desktop-lg | .is-wide-lg |
150% | .is-mobile-xl | .is-fablet-xl | .is-tablet-xl | .is-desktop-xl | .is-wide-xl |
200% | .is-mobile-xxl | .is-fablet-xxl | .is-tablet-xxl | .is-desktop-xxl | .is-wide-xxl |
Mobile Only | Fablet Only | Tablet Only | Desktop Only | |
---|---|---|---|---|
62.5% | .is-mobile-only-xxs | .is-fablet-only-xxs | .is-tablet-only-xxs | .is-desktop-only-xxs |
75% | .is-mobile-only-xs | .is-fablet-only-xs | .is-tablet-only-xs | .is-desktop-only-xs |
87.5% | .is-mobile-only-sm | .is-fablet-only-sm | .is-tablet-only-sm | .is-desktop-only-sm |
100% | .is-mobile-only-md | .is-fablet-only-md | .is-tablet-only-md | .is-desktop-only-md |
125% | .is-mobile-only-lg | .is-fablet-only-lg | .is-tablet-only-lg | .is-desktop-only-lg |
150% | .is-mobile-only-xl | .is-fablet-only-xl | .is-tablet-only-xl | .is-desktop-only-xl |
200% | .is-mobile-only-xxl | .is-fablet-only-xxl | .is-tablet-only-xxl | .is-desktop-only-xxl |
Mobile ~ Fablet | Mobile ~ Tablet | Mobile ~ Desktop | |
---|---|---|---|
62.5% | .is-mobile-fablet-xxs | .is-mobile-tablet-xxs | .is-mobile-desktop-xxs |
75% | .is-mobile-fablet-xs | .is-mobile-tablet-xs | .is-mobile-desktop-xs |
87.5% | .is-mobile-fablet-sm | .is-mobile-tablet-sm | .is-mobile-desktop-sm |
100% | .is-mobile-fablet-md | .is-mobile-tablet-md | .is-mobile-desktop-md |
125% | .is-mobile-fablet-lg | .is-mobile-tablet-lg | .is-mobile-desktop-lg |
150% | .is-mobile-fablet-xl | .is-mobile-tablet-xl | .is-mobile-desktop-xl |
200% | .is-mobile-fablet-xxl | .is-mobile-tablet-xxl | .is-mobile-desktop-xxl |
Landscape | Portrait | |
---|---|---|
62.5% | .is-landscape-xxs | .is-portrait-xxs |
75% | .is-landscape-xs | .is-portrait-xs |
87.5% | .is-landscape-sm | .is-portrait-sm |
100% | .is-landscape-md | .is-portrait-md |
125% | .is-landscape-lg | .is-portrait-lg |
150% | .is-landscape-xl | .is-portrait-xl |
200% | .is-landscape-xxl | .is-portrait-xxl |