RFS

Xana RFS i yini?

Bootstrap’s side project RFS i njhini yo cinca sayizi ya tiyuniti leyi eku sunguleni yi endliweke ku cinca sayizi ya tifonto (hikwalaho ka yona yi pfuxetiwile ya Responsive Font Sizes). Sweswi RFS yi kota ku tlhela yi ringanisa swihlawulekisi swo tala swa CSS hi mimpimo ya yuniti yo fana na margin, padding, border-radius, kumbe hambi ku ri box-shadow.

Endlelo ri hlayela hi ku tisungulela mimpimo leyi faneleke hi ku ya hi swipimelo swa xivono xa xihlamusela-marito. Yi ta hlengeletiwa eka calc()mintirho leyi nga na ku hlanganisiwa ka remna tiyuniti ta viewport ku endla leswaku ku va na mahanyelo ya ku ringanisa lama hlamulaka.

Ku tirhisa RFS

Ti mixins ti katsiwile eka Bootstrap naswona ti kumeka loko u katsa Bootstrap's scss. RFS yi nga tlhela yi nghenisiwa yi tiyimele loko swi laveka.

Ku tirhisa ti mixins

rfs()Mixin yi na switlhokovetselo swa , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomna padding-left. Vona xikombiso lexi nga laha hansi xa xihlovo xa Sass na CSS leyi hlengeletiweke.

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

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

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

Nhundzu yin’wana na yin’wana yi nga hundziseriwa eka rfs()mixin hi ndlela leyi:

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

!importantu nga ha tlhela u engeteriwa ntsena eka nkoka wihi na wihi lowu u wu lavaka:

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

Ku tirhisa mintirho

Loko u nga lavi ku tirhisa swikatsa, ku tlhela ku va ni mintirho yimbirhi:

• rfs-value()yi hundzula ntikelo wu va remntikelo loko pxntikelo wu hundziseriwe, eka swiyimo swin’wana wu vuyisa mbuyelo lowu fanaka.
• rfs-fluid-value()yi vuyisa vuhundzuluxeri bya fluid bya ntikelo loko nhundzu yi lava ku ringanisiwa nakambe.

Eka xikombiso lexi, hi tirhisa yin’wana ya ti mixin ta ku hlamula ta breakpoint leti akiweke endzeni ta Bootstrap ku tirhisa ntsena xitayili ehansi ka 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 */
  }
}

Maphepha lama andlariweke

RFS i phurojeke leyi hambaneke ehansi ka nhlangano wa Bootstrap. Swin'wana mayelana na RFS na vukorhokeri bya yona swi nga kumeka eka vuhlayiselo bya yona bya GitHub .