RFS jedhamuun beekama

RFS jechuun maali?

Pirojektiin cinaa Bootstrap RFS motora safara yuunitii jijjiiru yoo ta'u jalqaba irratti hammangaa qubee jijjiiruuf kan hojjetamedha (kanarraa ka'uun gabaabduu isaa Responsive Font Sizes jedhamee waamameera). Yeroo ammaa RFS qabeentota CSS irra caalaan gatiiwwan yuunitii akka margin, padding, border-radius, ykn illee irra deebi'anii safaruu danda'a box-shadow.

Akkaataan ofumaan gatiiwwan barbaachisoo safara mul'ata biraawwaaraa irratti hundaa'uun shallaga. calc()Amala iskeelii deebii kennuu dandeessisuuf gara faankishiniiwwan walmakaa remfi yuunitii buufata ilaalchaa qabanitti ni qindaa'a .

RFS fayyadamuudhaan

Miksiin Bootstrap keessatti kan hammataman yoo ta'u, erga Bootstrap's dabaltee booda ni argamu scss. RFS yoo barbaachise of danda'ee fe'amuus ni danda'ama .

Miksiinota fayyadamuun

Miksiin rfs()qubee gabaabaa font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, fi padding-left. Madda Sass fi CSS qindaa'eef fakkeenya armaan gadii ilaali.

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

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

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

Qabeenyi biraa kamiyyuu rfs()akkasitti gara mixin darbuun ni danda'ama:

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

!importantakkasumas gatii barbaaddetti qofa dabalamuu danda'a:

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

Faankishiniiwwan fayyadamuu

Yeroo includes fayyadamuu hin barbaanne, akkasumas faankishiniiwwan lamatu jiru:

• rfs-value()gatii gara gatiitti jijjiira remyoo gatii tokko pxdarbe, haalawwan biroo keessatti bu'aa walfakkaataa deebisa.
• rfs-fluid-value()yoo qabeentiin irra deebi'amee safaruu barbaadu gosa dhangala'aa gatii deebisa.

Fakkeenya kana keessatti, Bootstrap's built-in responsive breakpoint mixins keessaa tokko fayyadamnee styling breakpoint jalatti qofa hojiirra oolchina 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 */
  }
}

Dokumantarii dheerate

RFS pirojektii addaa dhaabbata Bootstrap jalatti argamudha. Waa'ee RFS fi qindeessaa isaa caalaatti kuusaa GitHub isaa irratti argachuu dandeessa .