Size

size の Utility クラスです。

Width

width は 0px ~ 384px までの固定値や、full (100%) や screen size や、min-content, max-content で設定することも可能です。

• ab-w-x: x は 2px で、以下の値があります。
  • 1,2,3...8: 1 刻み
  • 10,12,14~24: 2 刻み
  • 28,32...40: 4 刻み
  • 48,56,64...128: 8 刻み
  • 144,160...192: 16 刻み
• ab-w-full: 100%;
• ab-w-screen: 100vw;
• ab-w-min: min-content;
• ab-w-max: max-content;

MinWidth

min-width は full (100%) や screen size や、min-content, max-content, fit-content で設定可能です。

• ab-min-w-full: 100%;
• ab-min-w-screen: 100vw;
• ab-min-w-min: min-content;
• ab-min-w-max: max-content;
• ab-min-w-fit: fit-content;

MaxWidth

max-width は full (100%) や screen size や、min-content, max-content, fit-content で設定可能です。

• ab-max-w-full: 100%;
• ab-max-w-screen: 100vw;
• ab-max-w-min: min-content;
• ab-max-w-max: max-content;
• ab-max-w-fit: fit-content;

Height

height は 0px ~ 384px までの固定値や、full (100%) や screen size や、min-content, max-content で設定することも可能です。

• ab-h-x: x は 2px で、以下の値があります。
  • 1,2,3...8: 1 刻み
  • 10,12,14~24: 2 刻み
  • 28,32...40: 4 刻み
  • 48,56,64...128: 8 刻み
  • 144,160...192: 16 刻み
• ab-h-full: 100%;
• ab-h-screen: 100vh;
• ab-h-min: min-content;
• ab-h-max: max-content;

MinHeight

min-height は full (100%) や screen size や、min-content, max-content, fit-content で設定可能です。

• ab-min-h-full: 100%;
• ab-min-h-screen: 100vh;
• ab-min-h-min: min-content;
• ab-min-h-max: max-content;
• ab-min-h-fit: fit-content;

MaxHeight

max-height は full (100%) や screen size や、min-content, max-content, fit-content で設定可能です。

• ab-max-h-full: 100%;
• ab-max-h-screen: 100vh;
• ab-max-h-min: min-content;
• ab-max-h-max: max-content;
• ab-max-h-fit: fit-content;

Responsive

各種 class は ab-{breakpoint}-{property} でレスポンシブ対応しています。