RFS

RFS ezali nini?

Projet côté ya Bootstrap RFS ezali moteur ya kobongola bonene ya unité oyo esalemaki na ebandeli mpo na kobongola bonene ya bonene ya bafonte (yango wana bokuse na yango mpo na bonene ya bafonte oyo ekoki koyanola). Mikolo oyo RFS ezali capable ya ko rescaler mingi ya ba propriétés ya CSS na ba valeurs unité lokola margin, padding, border-radius, to même box-shadow.

Mecanisme yango e calculer automatiquement ba valeurs oyo ebongi na kotalela ba dimensions ya port de vue ya navigateur. Ekozala compilé na calc()ba fonctions na mélange ya remna ba unité ya viewport pona ko permettre comportement ya échelle réponse.

Kosalela RFS

Ba mixins ezali na kati ya Bootstrap mpe ezali disponible mbala moko okotisi Bootstrap's scss. RFS ekoki mpe kozala installé yango moko soki esengeli.

Kosalela ba mixins

Mixin rfs()ezali na ba mokuse ya font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, mpe padding-left. Tala ndakisa oyo ezali awa na nse mpo na source Sass mpe CSS oyo esangisi.

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

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

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

Propriété mosusu nionso ekoki koleka na rfs()mixin boye:

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

!importantekoki mpe kaka kobakisama na motuya nyonso oyo olingi:

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

Kosalela ba fonctions

Tango olingi kosalela ba includes te, ezali pe na ba fonctions mibale:

• rfs-value()ebongoli motuya na remmotuya soki pxmotuya eleki, na makambo mosusu ezongisaka mbano ndenge moko.
• rfs-fluid-value()ezongisaka version fluide ya valeur moko soki propriété esengeli na rescaling.

Na ndakisa oyo, tosalelaka moko ya ba mixins ya point de rupture ya réponse oyo etongami na kati ya Bootstrap mpo na kosalela kaka styling na se ya lgpoint de rupture.

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

Mikanda oyo ebakisami

RFS ezali projet ekeseni na se ya organisation ya Bootstrap. Makambo mingi na ntina ya RFS mpe bobongisi na yango ekoki kozwama na ebombelo na yango ya GitHub .