RFS we dɛn kɔl RFS

Wetin na RFS?

Bootstrap in sayd projɛkt RFS na wan yunit risayzin injin we dɛn bin dɔn divɛlɔp fɔs fɔ chenj di sayz fɔ font saiz dɛn (na dat mek dɛn kɔl am Rispɔnsiv Fɔnt Sayz dɛn). Nawde RFS ebul fɔ riskel mɔs CSS prɔpati dɛn wit yunit valyu dɛn lɛk margin, padding, border-radius, ɔ ivin box-shadow.

Di mɛkanism kin kɔl di valyu dɛn we fit bay di dimɛnshɔn dɛn we de na di brawza viupɔt ɔtomɛtik wan. I go kɔmpilayt insay calc()fɛnshɔn dɛn wit wan miks remɛn viupɔt yunit dɛn fɔ mek di rispɔnsiv skel bihayvya.

We yu de yuz RFS

Di mixins de insay Bootstrap ɛn dɛn de wans yu put Bootstrap’s scss. RFS kin instɔl bak fɔ insɛf if nid de.

Yuz di miksin dɛn

Di rfs()miksin gɛt shɔthand fɔ font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomɛn padding-left. Si di ɛgzampul dɔŋ ya fɔ sɔs Sass ɛn kɔmpilayt CSS.

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

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

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

Eni oda prɔpati kin pas to di rfs()mixin lɛk dis:

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

!importantkin jɔs ad pan ɛnitin bak we yu want:

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

Yuz di fɛnshɔn dɛn

We yu nɔ want fɔ yuz di inklud dɛn, tu wok dɛn de bak:

• rfs-value()kɔnvɔyt valyu to remvalyu if dɛn pxpas valyu, insay ɔda kes dɛn i de gi di sem rizɔlt bak.
• rfs-fluid-value()ritɔn di fluid vɛshɔn fɔ wan valyu if di prɔpati nid fɔ riskel.

Insay dis ɛgzampul, wi yuz wan pan Bootstrap in bilt-in rispɔnsiv brekpɔynt miksin dɛn fɔ jɔs aplay stayl dɔŋ di lgbrekpɔynt.

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

Ɛkstend dɔkyumɛnt dɛn

RFS na wan sɛpret prɔjek ɔnda di Bootstrap ɔganayzeshɔn. Yu kin fɛn mɔ bɔt RFS ɛn in kɔnfigyushɔn na in GitHub ripɔsitɔri .