RFS

Šta je RFS?

Bootstrap-ov sporedni projekat RFS je mehanizam za promjenu veličine jedinice koji je prvobitno razvijen za promjenu veličine fonta (otuda njegova skraćenica za Responsive Font Sizes). Danas je RFS sposoban da promeni veličinu većine CSS svojstava sa jediničnim vrednostima kao što su margin, padding, border-radius, ili čak box-shadow.

Mehanizam automatski izračunava odgovarajuće vrijednosti na osnovu dimenzija okvira za pregled pretraživača. Biće kompajliran u calc()funkcije sa mešavinom remjedinica prikaza i prikaza kako bi se omogućilo odzivno ponašanje skaliranja.

Koristeći RFS

Miksini su uključeni u Bootstrap i dostupni su kada uključite Bootstrap scss. RFS se takođe može instalirati samostalno ako je potrebno.

Koristeći miksine

Miksin rfs()ima skraćenice za font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, i padding-left. Pogledajte primjer ispod za izvorni Sass i kompajlirani CSS.

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

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

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

Bilo koje drugo svojstvo se može proslijediti rfs()mixinu na sljedeći način:

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

!importanttakođer se može dodati bilo kojoj vrijednosti koju želite:

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

Korištenje funkcija

Kada ne želite koristiti uključene, postoje i dvije funkcije:

• rfs-value()pretvara vrijednost u remvrijednost ako je pxvrijednost proslijeđena, u drugim slučajevima vraća isti rezultat.
• rfs-fluid-value()vraća fluidnu verziju vrijednosti ako je svojstvu potrebno ponovno skaliranje.

U ovom primjeru koristimo jedan od ugrađenih Bootstrap-ovih miksina za tačku prekida da bismo primijenili stil samo ispod lgtačke prekida.

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

Proširena dokumentacija

RFS je poseban projekat pod Bootstrap organizacijom. Više o RFS-u i njegovoj konfiguraciji možete pronaći u njegovom GitHub spremištu .