RFS

RFS kye ki?

Bootstrap's side project RFS ye yingini ekyusa obunene bwa yuniti eyasooka okukolebwa okukyusa obunene bw'empandiika (wano we wava okufupimira kwa Responsive Font Sizes). Ennaku zino RFS esobola okuddamu okugerageranya eby'obugagga bya CSS ebisinga obungi n'emiwendo gya yuniti nga margin, padding, border-radius, oba wadde box-shadow.

Enkola eno ebalirira emiwendo egy’enjawulo okusinziira ku bipimo by’ekifo eky’okulabamu bbulawuzi. Kijja kukuŋŋaanyizibwa mu calc()mirimu n’okutabula remn’ebitundu by’okulaba okusobozesa enneeyisa y’okugerageranya eddamu.

Okukozesa RFS

Mixins zibeera mu Bootstrap era zibeerawo nga omaze okussaamu Bootstrap's scss. RFS nayo esobola okuteekebwawo nga yeetongodde bwe kiba kyetaagisa.

Nga tukozesa ebirungo ebiyitibwa mixins

Mixin rfs()erina ennukuta ennyimpimpi ezitegeeza font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ne padding-left. Laba ekyokulabirako wansi ku source Sass ne CSS ekunganyiziddwa.

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

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

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

Eky'obugagga ekirala kyonna kiyinza okuyisibwa ku rfs()mixin nga kino:

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

!importantera osobola okumala okugattibwa ku muwendo gwonna gw’oyagala:

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

Okukozesa emirimu

Bw’oba ​​toyagala kukozesa includes, waliwo n’emirimu ebiri:

• rfs-value()ekyusa omuwendo mu remmuwendo singa pxomuwendo guyisibwa, mu mbeera endala guzzaayo ekivaamu kye kimu.
• rfs-fluid-value()ezzaayo enkyusa y'amazzi ey'omuwendo singa eky'obugagga kyetaaga okuddamu okupima.

Mu kyokulabirako kino, tukozesa emu ku Bootstrap’s built-in responsive breakpoint mixins okusiiga sitayiro yokka wansi lgw’okumenya.

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

Ebiwandiiko ebigaziyiziddwa

RFS pulojekiti ya njawulo wansi w'ekitongole kya Bootstrap. Ebisingawo ku RFS n'ensengeka yaayo osobola okubisanga ku tterekero lyayo erya GitHub .