RFS a ni

RFS chu eng nge ni?

Bootstrap-a side project RFS hi unit resizing engine a ni a, a tir lamah chuan font size thlak danglam nan an siam a ni (chuvangin Responsive Font Sizes tih a tawifel a ni). marginTunah chuan RFS hian CSS property tam zawk chu unit value , padding, border-radius, emaw even ang chi hmangin a rescal thei tawh a box-shadowni.

Mecanism hian browser viewport dimension a zirin value dik tak chu a chhut chhuak nghal vek a ni. Responsive scaling behavior tih theihna turin calc()mix of leh viewport unit nei function -ah compile a ni ang .rem

RFS hmangin

Mixins te hi Bootstrap ah hian a tel a, Bootstrap’s te i dah tel veleh a awm thei scssbawk. RFS pawh a tul chuan standalone-in install theih a ni bawk .

Mixins te hmangin

rfs()Mixin hian font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomleh padding-left. Source Sass leh compiled CSS te chu a hnuaia entirnan hian en rawh.

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

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

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

rfs()Property dang eng pawh mixin ah hian hetiang hian pass theih a ni :

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

!importantpawh i duh ang value-ah dah mai theih a ni bawk:

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

Function hrang hrang hmangin

Incluces i hman duh loh chuan function pahnih a awm bawk:

• rfs-value()value pass a remnih chuan value chu value-ah a chantir a , a dang erawh chuan result ang chiah a pe chhuak leh thin.px
• rfs-fluid-value()property chu rescaling a mamawh chuan value pakhat fluid version a rawn pe kir leh thin.

He entirnan hian Bootstrap-a built-in responsive breakpoint mixin pakhat kan hmang a, breakpoint hnuai lama styling chauh kan hmang a lgni.

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

Documentation tihzauh a ni bawk

RFS hi Bootstrap organization hnuaia project hran a ni a. RFS leh a configuration chungchang hi a GitHub repository ah hian hmuh theih a ni .