Prop Responsive

レスポンシブ対応

Lism では、-{prop}_{bp}形式のクラスと--{prop}_{bp}形式の変数の組み合わせによって、レスポンシブ対応を行います。

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm: var(--s40); --p_md: var(--s50)">
  <p>Example</p>
</div>

<Lism p={[20, 40, 50]} bd>
  <p>Example</p>
</Lism>

SCSSファイルからカスタマイズを行うことで、プロパティごとにレスポンシブ対応を切り替えることもできます。

プロパティによってCSSの実装の中身が少し異なります

以下の２パターンがあります。

1. 基本: ブレイクポイントごとに単純に上書きされているプロパティ
2. 例外: 常に-{prop}変数で値が参照できるようになっているプロパティ

.-d {display: var(--d)}
@container (min-width: 480px) {
  .-d_sm {display: var(--d_sm)}
}
@container (min-width: 800px) {
  .-d_md {display: var(--d_md)}
}

.-p {padding: var(--p);}
@container (min-width: 480px) {
  .-p_sm {padding: var(--p); --p: var(--p_sm) !important;}
}
@container (min-width: 800px) {
  .-p_md {padding: var(--p); --p: var(--p_md) !important;}
}

例外系のプロパティは、常にCSS変数で値を参照できるようになっており、デフォルトでは非常に限られたプロパティ群のみ(c, bgc, p, m, bdrs)がこのパターンで実装されています。

コンテナクエリ・メディアクエリ

Lismでは、デフォルトでコンテナクエリを採用しています。

（Lism でコンテナ要素を定義するには、is--containerが便利です。）

また、SCSSファイルからカスタマイズを行うことで、コンテナクエリではなくメディアクエリに切り替えることもできます。

ブレイクポイント

ブレイクポイントはモバイルファーストで定義しており、数値としては480px,800px,1120pxを採用しています。 （特定のデバイスサイズに依存した数値は採用していません。）

これらのブレイクポイントを自身のプロジェクトで使用する場合、.scssであれば次のようにして利用できます。

@use '../path/to/node_modules/lism-css/scss/query' as query;

@include query.bp-up('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.bp-up('md') {
  // Your styles for md sizes(width >= 800px) ...
}