RFS

Naon RFS?

Proyék samping Bootstrap RFS nyaéta mesin pangubah ukuran unit anu mimitina dikembangkeun pikeun ngatur ukuran font (ku kituna singketan pikeun Ukuran Font Responsif). Kiwari RFS mampuh rescaling paling sipat CSS jeung nilai unit kawas margin, padding, border-radius, atawa malah box-shadow.

mékanisme otomatis ngitung nilai luyu dumasar kana diménsi viewport browser. Éta bakal disusun kana calc()fungsi sareng campuran remsareng unit viewport pikeun ngaktifkeun paripolah skala responsif.

Ngagunakeun RFS

Campuran kalebet dina Bootstrap sareng sayogi saatos anjeun kalebet Bootstrap's scss. RFS ogé tiasa dipasang mandiri upami diperyogikeun.

Ngagunakeun mixins

Mixin rfs()ngabogaan singkatan pikeun font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, jeung padding-left. Tempo conto di handap pikeun sumber Sass jeung CSS disusun.

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

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

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

Sakur harta anu sanés tiasa dikirimkeun ka rfs()mixin sapertos kieu:

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

!importantbisa ogé ngan ditambahkeun kana nilai naon rék:

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

Ngagunakeun fungsi

Nalika anjeun henteu hoyong nganggo kalebet, aya ogé dua fungsi:

• rfs-value()ngarobah nilai kana remnilai lamun nilai a pxdiliwatan, dina kasus séjén eta mulih hasil sarua.
• rfs-fluid-value()mulih versi cairan tina nilai a lamun harta perlu rescaling.

Dina conto ieu, urang ngagunakeun salah sahiji Bootstrap urang diwangun-di breakpoint mixins responsif pikeun ngan nerapkeun styling handap lgbreakpoint nu.

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

Dokuméntasi ngalegaan

RFS mangrupakeun proyék misah dina organisasi Bootstrap. Langkung seueur ngeunaan RFS sareng konfigurasina tiasa dipendakan dina gudang GitHub na .