MUSUBii 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 Alpha | 1 | 0.87 | 0.7 | 0.6 | 0.5 | 0.4 | 0.26 | 0.15 | 0.12 | 0.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 Alpha | 1 | 0.87 | 0.7 | 0.6 | 0.5 | 0.4 | 0.26 | 0.15 | 0.12 | 0.05 |
| Add Class | .is-primary | .is-info | .is-success | .is-warning | .is-danger |
| Text Color | シアン | ブルー | グリーン | オレンジ | レッド |
| Add Class | .is-normal | .is-strong |
| Text Weight | 400 | 700 |
| Add Class | .is-weight-100 | .is-weight-200 | .is-weight-300 | .is-weight-400 | .is-weight-500 | .is-weight-700 | .is-weight-900 |
| Text Weight | 100 | 200 | 300 | 400 | 500 | 700 | 900 |
| Add Class | .is-italic | .is-delete | .is-capitalize | .is-lowercase | .is-uppercase |
| Text Style | イタリック | 打ち消し | capitalize | lowercase | uppercase |
| Add Class | .is-left | .is-center | .is-right | .is-justify | .is-baseline | .is-top | .is-middle | .is-bottom |
| Text Position | left | center | right | justify | baseline | top | middle | bottom |
| Add Class | .is-nowrap | .is-break |
| Function | 文字が端で折り返さない | 文字が端で折り返す |
| Add Class | .is-centering | .is-scroll-x | .is-ellipsis |
| Function | ブロック要素を中央寄せ | 直下のコンテンツを横スクロール | 3点リーダーで省略 |
Responsive
.is-(xxxx)-(yy) 形式の class を加えることでレスポンシブにプロパティを変化させられます。
Mobile | Fablet | Tablet | Desktop | Wide | |
|---|---|---|---|---|---|
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 | Fablet Only | Tablet Only | Desktop Only | |
|---|---|---|---|---|
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 | Mobile ~ Tablet | Mobile ~ Desktop | |
|---|---|---|---|
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 | Portrait | |
|---|---|---|
left | .is-landscape-left | .is-portrait-left |
center | .is-landscape-center | .is-portrait-center |
right | .is-landscape-right | .is-portrait-right |