RFS

Што е RFS?

Страничниот проект на Bootstrap RFS е мотор за промена на големината на единицата, кој првично беше развиен за промена на големината на фонтот (оттука и неговата кратенка за Responsive Font Sizes). Во денешно време RFS е способен да ги рескалира повеќето својства на CSS со единечни вредности како margin, padding, border-radius, или дури box-shadow.

Механизмот автоматски ги пресметува соодветните вредности врз основа на димензиите на приказот на прелистувачот. Ќе биде компајлиран во calc()функции со мешавина од remединици и пристаништа за поглед за да се овозможи однесување на скалирање со одговор.

Користење на RFS

Миксините се вклучени во Bootstrap и се достапни откако ќе го вклучите Bootstrap's scss. 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 is small enough, so RFS won't rescale this */
  }
}

Проширена документација

RFS е посебен проект под организацијата Bootstrap. Повеќе за RFS и неговата конфигурација може да најдете на неговото складиште GitHub .