RFS

Apa iku RFS?

Proyek sisih Bootstrap RFS yaiku mesin ukuran unit sing wiwitane dikembangake kanggo ngowahi ukuran font (mulane singkatan kanggo Ukuran Font Responsif). Saiki, RFS bisa ngowahi ukuran properti CSS kanthi nilai unit kaya margin, padding, border-radius, utawa malah box-shadow.

Mekanisme kasebut kanthi otomatis ngetung nilai sing cocog adhedhasar ukuran tampilan browser. Bakal dikompilasi dadi calc()fungsi kanthi campuran remlan unit viewport kanggo ngaktifake prilaku skala responsif.

Nggunakake RFS

Campuran kasebut kalebu ing Bootstrap lan kasedhiya yen sampeyan kalebu Bootstrap's scss. RFS uga bisa diinstal kanthi mandiri yen perlu.

Nggunakake mixins

rfs()Mixin nduweni singkatan kanggo , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomlan padding-left. Deleng conto ing ngisor iki kanggo sumber Sass lan kompilasi CSS.

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

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

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

Sembarang properti liyane bisa ditransfer menyang rfs()mixin kaya iki:

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

!importantbisa uga mung ditambahake menyang nilai apa wae sing dikarepake:

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

Nggunakake fungsi

Yen sampeyan ora pengin nggunakake kalebu, ana uga rong fungsi:

• rfs-value()Ngonversi nilai dadi remnilai yen pxnilai liwati, ing kasus liyane ngasilake asil sing padha.
• rfs-fluid-value()ngasilake versi adi saka nilai yen properti perlu rescaling.

Ing conto iki, kita nggunakake salah siji saka Bootstrap kang dibangun ing campuran breakpoint responsif kanggo mung aplikasi noto ngisor lgbreakpoint.

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

Dokumentasi lengkap

RFS minangka proyek kapisah ing organisasi Bootstrap. Luwih lengkap babagan RFS lan konfigurasi bisa ditemokake ing repositori GitHub .