RFS

Что такое RFS?

Побочный проект Bootstrap - RFS, - это механизм изменения размеров модулей, изначально разработанный для изменения размеров шрифтов (отсюда и его сокращение от Responsive Font Sizes). Теперь RFS способен масштабировать большинство свойств CSS с помощью значений единиц, таких как margin, padding, border-radius или box-shadow.

Механизм автоматически рассчитывает соответствующие значения на основе размера окна просмотра браузера. Он будет скомпилирован в функции calc() со смесью блоков rem и единиц просмотра для обеспечения адаптивного масштабирования.

Использование RFS

Миксины включены в Bootstrap и станут доступны после того, как вы добавите scss в Bootstrap. RFS также может быть установлен автономно при необходимости.

Использование миксинов

Миксин rfs() имеет сокращение для font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom и padding-left. Смотрите пример ниже для исходного кода Sass и скомпилированного CSS.

.title{@include font-size(4rem);}

.title{font-size:calc(1.525rem+3.3vw);}@media(min-width:1200px){.title{font-size:4rem;}}

Любое другое свойство может быть передано в миксин rfs() следующим образом:

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

!important может быть добавлен к любому значению:

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

Использование функций

Если вы не хотите использовать даные включения, то есть также две другие функции:

• Функция rfs-value() преобразует значение в значение rem если передается значение px в других случаях возвращается тот же результат.
• Функция rfs-fluid-value() возвращает текучую версию значения, если свойство требует масштабирования.

В этом примере мы используем один из встроенных в Bootstrap адаптивных миксинов контрольных точек чтобы применять стилирование только ниже контрольной точки lg.

.selector{@include media-breakpoint-down(lg){padding:rfs-fluid-value(2rem);font-size:rfs-fluid-value(1.125rem);}}

@media(max-width:991.98px){.selector{padding:calc(1.325rem+0.9vw);font-size:1.125rem;/* 1.125rem достаточно мал, поэтому RFS не масштабирует это */}}

Расширенная документация

RFS - это отдельный проект в рамках организации Bootstrap. Больше о RFS и его конфигурации можно найти в репозитории GitHub.