आर एफ एस

आरएफएस इति किम् ?

Bootstrap इत्यस्य पार्श्वप्रकल्पः RFS एकः इकाई आकारान्तरण इञ्जिनः अस्ति यत् प्रारम्भे फॉन्ट आकारान्तरणार्थं विकसितम् आसीत् (अतः Responsive Font Sizes इति संक्षिप्तरूपम्) अधुना RFS अधिकांशं CSS गुणं margin, padding, border-radius, अथवा अपि इत्यादिभिः यूनिट् मूल्यैः सह पुनः स्केल कर्तुं समर्थः अस्ति box-shadow|

तन्त्रं स्वयमेव ब्राउजर् दृश्यपोर्ट् इत्यस्य आयामानां आधारेण समुचितमूल्यानां गणनां करोति । प्रतिक्रियाशीलं स्केलिंग् व्यवहारं सक्षमं कर्तुं viewport units calc()इत्यस्य मिश्रणेन सह functions इत्यत्र संकलितं भविष्यति ।rem

RFS इत्यस्य उपयोगेन

मिक्सिन्स् Bootstrap इत्यस्मिन् समाविष्टाः सन्ति तथा च एकवारं भवन्तः Bootstrap इत्यस्य समावेशं कृत्वा उपलभ्यन्ते 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()यदि गुणस्य पुनः मापनस्य आवश्यकता अस्ति तर्हि मूल्यस्य द्रवसंस्करणं ददाति ।

अस्मिन् उदाहरणे वयं केवलं breakpoint इत्यस्य अधः स्टाइलिंग् प्रयोक्तुं Bootstrap इत्यस्य built-in responsive breakpoint mixinslg इत्यस्य एकस्य उपयोगं कुर्मः ।

.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 इति Bootstrap संस्थायाः अन्तर्गतं पृथक् परियोजना अस्ति । RFS इत्यस्य विषये अधिकं तस्य विन्यासस्य च विषये अधिकं तस्य GitHub भण्डारे द्रष्टुं शक्यते |