メインコンテンツへスキップ

RFS v5.0.0-alpha1更新


Bootstrapのサイズ変更エンジンがビューポートとデバイス間で利用可能なより良いスペースにするために共通のCSSプロパティをレスポンシブに拡縮する。

RFSとは?(What is RFS?)

BootstrapのサイドプロジェクトであるRFSは、当初はフォントサイズを変更するために開発されたユニットサイズ変更エンジンであった(故にResponsive Font Sizesの略でRFSと命名)。最新のRFSでは、margin, padding, border-radius, box-shadow などのユニットで、ほとんどのCSSプロパティの値を再拡縮することが可能である。

このメカニズムは、ブラウザのビューポートの寸法に基づいて適切な値を自動的に計算する。レスポンシブで拡大縮小する動作を可能にするために、rem とビューポートの単位の組み合わせで calc() 関数にコンパイルされる。

【変更履歴】
  • 【v5.0.0-alpha1】
    • デフォルトでレスポンシブで自動的にフォントサイズの拡大縮小が可能に。
      これに伴い、見出し<h1><h4>, .h1.h4)、表示見出し.display-1.display-6)、フォーム<legend>閉じるボタン.close)ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される
    • フォントサイズだけでなく、marginpadding の大きさなどもレスポンシブで拡大縮小可能に。
      これに伴うデフォルトで空白ユーティリティの定義済みクラスの拡大縮小は現在のところ行われていない
  • 【v5.0.0-alpha2】
    • 閉じるボタンクラスが .close から .btn-close に変更され、アイコンボタンがSVGになったのでRFSは不要になった

 

RFSを使用(Using RFS)

mixinはBootstrapに組み込まれており、Bootstrapの scss を組み込むと利用可能になる。必要に応じてRFSを単体でインストールすることも可能。

mixinを使用(Using the mixins)

rfs() mixinには、font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left の省略形がある。Sassソースとコンパイル済みのCSSについては、以下の例に記載。

設定例
Sass.title {
	@include font-size(4rem);
}
CSS.title {
	font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
	.title {
		font-size: 4rem;
	}
}

他のプロパティは、次のように rfs() mixinに渡すことが可能。

Sass.selector {
  @include rfs(4rem, border-radius);
}

!important(優先順位を上げる)はどんな値にでも追加可能:

Sass.selector {
	@include padding(2.5rem !important);
}

関数を使用(Using the functions)

インクルードを使用したくない場合、以下の2つの関数もある:

  • rfs-value()は、px 値が渡されると値を rem 値に変換する。それ以外の場合は、同じ結果値を返す。
  • rfs-fluid-value() は、プロパティの再拡縮が必要な場合、流動的な値を返す。

以下の例では、Bootstrapに組み込まれているレスポンシブ・ブレークポイントmixinの1つを使用して、lg(大)のブレークポイントより下のスタイルのみに適用。

設定例
Sass.selector {
	@include media-breakpoint-down(lg) {
		 padding: rfs-fluid-value(2rem);
		 font-size: rfs-fluid-value(1.125rem);
	}
}
出力例
CSS@media (max-width: 991.98px) {
	.selector {
		padding: calc(1.325rem + 0.9vw);
		font-size: 1.125rem; /* 1.125remは十分小さいので、RFSはこれを拡大縮小しない */
	}
}

 

拡張ドキュメント(Extended documentation)

RFSは、Bootstrap組織下の独立したプロジェクトである。RFSとその設定についての詳細はGitHubレポジトリに記載。