RFS

O le a le RFS?

O le poloketi a le Bootstrap o le RFS o se afi e sui ai le iunite lea na muamua fausia e sui ai le tele o le vai (o lona uiga o lona faapuupuuga mo le Responsive Font Sizes). I aso nei, ua mafai e le RFS ona toe fa'afo'i le tele o meatotino CSS fa'atasi ai ma fa'atauga o iunite pei ole margin, padding, border-radius, po'o le box-shadow.

E otometi lava ona fa'atatau e le masini ia tau talafeagai e fa'atatau i le fua ole su'esu'ega va'aiga. O le a tu'ufa'atasia i calc()galuega fa'atasi ma le fa'afefiloi o remiunite va'ava'ai ina ia mafai ai ona fa'agasolo le fa'agasologa o amioga.

Faʻaaogaina RFS

O mea faʻafefiloi o loʻo aofia i totonu Bootstrap ma e avanoa pe a e aofia ai Bootstrap's scss. E mafai foi ona faʻapipiʻi le RFS pe a manaʻomia.

Faʻaaogaina o mea faʻafefiloi

O le rfs()mixin e iai fa'apuupuu mo font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ma padding-left. Va'ai le fa'ata'ita'iga o lo'o i lalo mo le puna Sass ma CSS tu'ufa'atasi.

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

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

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

So'o se isi mea totino e mafai ona tu'uina atu i le rfs()mixin pei o lenei:

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

!importante mafai foi ona faʻaopoopo i soʻo se tau e te manaʻo ai:

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

Fa'aaogaina o galuega

Afai e te le manaʻo e faʻaoga mea e aofia ai, e lua foi galuega:

• rfs-value()liua se tau i se remtau pe a pxpasia se tau, i isi tulaga e toe faʻafoʻi mai ai le iʻuga tutusa.
• rfs-fluid-value()toe fa'afo'i mai le su'esu'ega o se tau pe a mana'omia le toe fa'aleleia o le meatotino.

I lenei faʻataʻitaʻiga, matou te faʻaogaina se tasi o mea faʻapipiʻi faʻapipiʻi tali a Bootstrap e naʻo le faʻaogaina o le sitaili i lalo o le lgvaʻa.

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

Fa'aopoopo fa'amaumauga

O le RFS o se galuega e ese mai i lalo o le faalapotopotoga Bootstrap. E tele faʻamatalaga e uiga i le RFS ma lona faʻatulagaina e mafai ona maua i lona GitHub repository .