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);}

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

Если Вы не хотите использовать include, есть еще две функции:

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

В этом примере мы используем одну из встроенных в Bootstrap responsive breakpoint mixins для применения стиля только ниже точки остановки 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.