RFS

RFS እንታይ እዩ?

Bootstrap's side project RFS ኣብ መጀመርታ ንዓቐናት ቅርጺ ንምቕያር ዝተዳለወ ኣሃዱ ምቕያር ዝዓቐኑ ሞተር እዩ (ስለዚ እዩ ድማ Responsive Font Sizes ዝብል ኣሕጽሮተ ቃል ተዋሂብዎ። ኣብዚ ግዜ እዚ RFS ንመብዛሕትኦም CSS ንብረታት ብኣሃዳዊ ክብርታት ከም margin, padding, border-radius, ወይ ውን ከይተረፈ ዳግማይ ናይ ምዕባይ ዓቕሚ ኣለዎ box-shadow።

እቲ መካኒዝም ብኣውቶማቲክ ኣብ መለክዒታት ናይቲ መርበብ ሓበሬታ ርእይቶ መሰረት ብምግባር ነቶም ዝምጥን ክብርታት የስልጦም። ንሱ ድማ ናብ calc()ፋንክሽን ምስ ምትሕውዋስን remቪውፖርት ኣሃዱታትን ተጠርኒፉ ነቲ ምላሽ ዝህብ ናይ ምዕባይ ባህሪ ከኽእል እዩ።

RFS ምጥቃም

እቶም ሚክሲናት ኣብ Bootstrap ተኻቲቶም ኣለዉ፡ Bootstrap's ምስ ኣእተኻዮም ድማ ይርከቡ scss። RFS ኣድላዪ እንተኾይኑ ንበይኑ እውን ክተክል ይኽእል እዩ ።

እቶም ሚክሲናት ብምጥቃም

እቲ rfs()ሚክሲን ናይ font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ከምኡውን padding-left. ምንጪ Sassን ዝተጠርነፈ CSSን ኣብ ታሕቲ ዘሎ ኣብነት ርአ።

.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);
}

ተግባራት ምጥቃም

ነቲ includes ክትጥቀመሉ ኣብ ዘይትደልየሉ እዋን ክልተ ተግባራት እውን ኣለዉ፤

• rfs-value()remዋጋ እንተሓሊፉ ንሓደ ዋጋ ናብ ዋጋ ይቕይሮ px፣ ኣብ ካልእ ኩነታት ድማ ተመሳሳሊ ውጽኢት ይመልስ።
• rfs-fluid-value()እቲ ንብረት ዳግማይ ምዕቃን ዘድልዮ እንተኾይኑ ናይ ሓደ ዋጋ ፈሳሲ ስሪት ይመልስ።

ኣብዚ ኣብነት፡ ሓደ ካብቶም ኣብ ቡትስትራፕ ዝተሃንጹ ምላሽ ዝህቡ ናይ ምብታኽ ሚክሲናት ንጥቀም ፡ ትሕቲ እቲ ምብታኽ ቅዲ ጥራይ ንምትግባር 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 ኣብ ትሕቲ ትካል ቡትስትራፕ ዝተፈለየ ፕሮጀክት እዩ። ብዛዕባ RFSን ውቅርኡን ዝያዳ ኣብ መኽዘን GitHub ክትረኽቡ ትኽእሉ ኢኹም ።