RFS

čo je RFS?

Bootstrap bočný projekt RFS je nástroj na zmenu veľkosti jednotiek, ktorý bol pôvodne vyvinutý na zmenu veľkosti písma (odtiaľ jeho skratka pre Responsive Font Sizes). V súčasnosti je RFS schopný zmeniť mierku väčšiny vlastností CSS s hodnotami jednotiek ako margin, padding, border-radius, alebo dokonca box-shadow.

Mechanizmus automaticky vypočíta príslušné hodnoty na základe rozmerov výrezu prehliadača. Bude skompilovaný do calc()funkcií so zmesou jednotiek rema jednotiek zobrazenia, aby sa umožnilo citlivé správanie pri škálovaní.

Pomocou RFS

Mixiny sú súčasťou Bootstrapu a sú dostupné, keď zahrniete Bootstrap's scss. RFS možno v prípade potreby nainštalovať aj samostatne .

Pomocou mixinov

The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, and padding-left. See the example below for source Sass and compiled CSS.

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

.title {
  font-size: calc(1.525rem + 3.3vw);
}

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

Any other property can be passed to the rfs() mixin like this:

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

!important can also just be added to whatever value you want:

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

Using the functions

When you don’t want to use the includes, there are also two functions:

• rfs-value() converts a value into a rem value if a px value is passed, in other cases it returns the same result.
• rfs-fluid-value() returns the fluid version of a value if the property needs rescaling.

In this example, we use one of Bootstrap’s built-in responsive breakpoint mixins to only apply styling below the lg breakpoint.

.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 */
  }
}

Rozšírená dokumentácia

RFS je samostatný projekt pod organizáciou Bootstrap. Viac o RFS a jeho konfigurácii nájdete v jeho úložisku GitHub .