RFS

Apa itu RFS?

Proyek sampingan Bootstrap RFS adalah mesin pengubahan ukuran unit yang awalnya dikembangkan untuk mengubah ukuran ukuran font (maka singkatannya adalah Responsive Font Sizes). Saat ini RFS mampu mengubah skala sebagian besar properti CSS dengan nilai unit seperti margin, padding, border-radius, atau bahkan box-shadow.

Mekanisme secara otomatis menghitung nilai yang sesuai berdasarkan dimensi viewport browser. Ini akan dikompilasi ke dalam calc()fungsi dengan campuran remdan unit viewport untuk mengaktifkan perilaku penskalaan responsif.

Menggunakan RFS

Mixin disertakan dalam Bootstrap dan tersedia setelah Anda menyertakan file scss. RFS juga dapat diinstal secara mandiri jika diperlukan.

Menggunakan mixin

Mixin rfs()memiliki singkatan untuk font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, dan padding-left. Lihat contoh di bawah untuk Sass sumber dan CSS yang dikompilasi.

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

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

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

Properti lain apa pun dapat diteruskan ke rfs()mixin seperti ini:

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

!importantjuga dapat ditambahkan ke nilai apa pun yang Anda inginkan:

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

Menggunakan fungsi

Saat Anda tidak ingin menggunakan penyertaan, ada juga dua fungsi:

• rfs-value()mengubah nilai menjadi remnilai jika pxnilai dilewatkan, dalam kasus lain mengembalikan hasil yang sama.
• rfs-fluid-value()mengembalikan versi nilai yang dapat disesuaikan jika properti perlu diubah skalanya.

Dalam contoh ini, kami menggunakan salah satu mixin breakpoint responsif bawaan Bootstrap untuk hanya menerapkan gaya di bawah 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 yang diperluas

RFS adalah proyek terpisah di bawah organisasi Bootstrap. Lebih lanjut tentang RFS dan konfigurasinya dapat ditemukan di repositori GitHub -nya .