آر ایف ایس

RFS کیا ہے؟

بوٹسٹریپ کا سائیڈ پراجیکٹ RFS ایک یونٹ ریزائز کرنے والا انجن ہے جسے ابتدائی طور پر فونٹ سائز کو تبدیل کرنے کے لیے تیار کیا گیا تھا (اس لیے اس کا مخفف ریسپانسیو فونٹ سائزز)۔ آج کل RFS زیادہ تر CSS پراپرٹیز کو یونٹ ویلیوز جیسے margin, padding, border-radius, یا یہاں تک کہ ری اسکیل کرنے کی صلاحیت رکھتا ہے box-shadow۔

میکانزم براؤزر ویو پورٹ کے طول و عرض کی بنیاد پر خود بخود مناسب قدروں کا حساب لگاتا ہے۔ جوابی اسکیلنگ رویے کو فعال کرنے کے لیے اسے اور ویوپورٹ یونٹس calc()کے مرکب کے ساتھ فنکشنز میں مرتب کیا جائے گا ۔rem

RFS استعمال کرنا

مکسینز بوٹسٹریپ میں شامل ہیں اور آپ کے Bootstrap's کو شامل کرنے کے بعد دستیاب ہیں scss۔ اگر ضرورت ہو تو آر ایف ایس کو اسٹینڈ اکیلے بھی انسٹال کیا جا سکتا ہے۔

مکسنس کا استعمال

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

افعال کا استعمال کرتے ہوئے

جب آپ شامل کو استعمال نہیں کرنا چاہتے ہیں تو، دو افعال بھی ہیں:

• 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 ریپوزٹری پر پایا جا سکتا ہے ۔