RFS

Нәрсә ул RFS?

Bootstrap ягыннан проект RFS - шрифт зурлыкларын үзгәртү өчен эшләнгән берәмлек размерын үзгәртүче двигатель (димәк аның шрифт размерлары өчен кыскартылуы). Хәзерге вакытта RFS күпчелек CSS үзлекләрен, яки, хәтта берәмлек кыйммәтләре белән marginкоткарырга сәләтле .paddingborder-radiusbox-shadow

Механизм автоматик рәвештә браузер күренешенең үлчәмнәренә карап тиешле кыйммәтләрне исәпли. Ул җаваплы масштаб тәртибен булдыру calc()өчен функцияләргә тупланачак .rem

RFS куллану

Миксиннар Bootstrap эченә кертелгән һәм Bootstrap'ны керткәч була scss. Кирәк булса, RFSны үзенчәлекле урнаштырырга мөмкин .

Миксиннарны куллану

rfs()Миксинның ,,,,,,,,, һәм font-sizeөчен стенограммалары marginбар . _ margin-top_ margin-right_ margin-bottom_ margin-left_ padding_ Sass чыганагы һәм тупланган CSS өчен түбәндәге мисалны карагыз.padding-toppadding-rightpadding-bottompadding-left

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

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

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

Башка теләсә нинди милек rfs()миксинга мондый күчерелергә мөмкин:

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

!importantтеләсә нинди кыйммәткә генә өстәп була:

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

Функцияләрне куллану

Керүләрне кулланырга теләмәгәндә, ике функция дә бар:

• rfs-value()remкыйммәт узса, кыйммәтне кыйммәткә әйләндерә, pxбүтән очракларда ул шул ук нәтиҗәне кире кайтара.
• rfs-fluid-value()мөлкәтне коткарырга кирәк булса, кыйммәтнең сыеклык версиясен кире кайтара.

Бу мисалда, без Bootstrap-ның урнаштырылган реакцион нокта миксиннарының берсен кулланабыз, алар тукталыш ноктасы астындагы стилизацияне кулланалар lg.

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

Киңәйтелгән документлар

RFS - Bootstrap оешмасы астында аерым проект. RFS һәм аның конфигурациясе турында күбрәк GitHub складында табып була .