RFS
Bootstrap ƒe mɔ̃ si trɔa asi le eƒe lolome ŋu la dzidzea CSS ƒe nɔnɔme siwo bɔ la ɖe ɖoɖo nu be wòawɔ teƒe si li ŋudɔ nyuie wu le nukpɔkpɔwo kple mɔ̃wo me.
Nukae nye RFS?
Bootstrap ƒe akpa dzi dɔ RFS nye unit resizing engine si wowɔ le gɔmedzedzea me be woatrɔ asi le ŋɔŋlɔdzesiwo ƒe lolome ŋu (eyatae wotsɔ eƒe kpukpui na Responsive Font Sizes). Fifia la RFS te ŋu trɔa asi le CSS ƒe nɔnɔme akpa gãtɔ ŋu kple unit values abe margin
, padding
, border-radius
, alo gɔ̃ hã box-shadow
.
Mɔ̃a bua asixɔxɔ siwo sɔ le eɖokui si le web-browser la ƒe nukpɔkpɔ ƒe didime nu. Woaƒoe nu ƒu ɖe calc()
dɔwɔwɔwo me kple tsakatsaka rem
kple nukpɔkpɔ ƒe akpawo be wòana ŋuɖoɖo ƒe dzidzedzekpɔkpɔ ƒe nuwɔna nawɔ dɔ.
RFS zazã
Mixins la le Bootstrap me eye woanɔ anyi ne ènya de Bootstrap ƒe scss
. Woateŋu aɖo RFS hã ɖe eɖokui si ne ehiã.
Mixin-awo zazã
rfs()
Mixin la ƒe nuŋɔŋlɔ kpuiwo le , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
kple padding-left
. Kpɔ kpɔɖeŋu si le ete hena dzɔtsoƒe Sass kple CSS si woƒo ƒu.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Woateŋu atsɔ nunɔamesi bubu ɖesiaɖe ayi na rfs()
mixin la ale:
.selector {
@include rfs(4rem, border-radius);
}
!important
ate ŋu atsɔe akpe ɖe asixɔxɔ ɖesiaɖe si nèdi hã ŋu ko:
.selector {
@include padding(2.5rem !important);
}
Dɔwɔwɔawo zazã
Ne mèdi be yeazã nusiwo le eme o la, dɔwɔwɔ eve hã li:
rfs-value()
trɔa asixɔxɔ aɖe wòzuarem
asixɔxɔ ne wotsɔpx
asixɔxɔ aɖe to eme, le go bubuwo me la, etrɔa emetsonu ma ke.rfs-fluid-value()
trɔa asixɔxɔ aɖe ƒe fluid version nenye be nunɔamesi la hiã rescaling.
Le kpɔɖeŋu sia me la, míezãa Bootstrap ƒe xɔtuɖoɖo ƒe breakpoint mixins siwo wotu ɖe eme la dometɔ ɖeka tsɔ wɔa atsyã ɖe lg
breakpoint te ko ŋudɔ.
.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 */
}
}
Nuŋlɔɖi siwo keke ta
RFS nye dɔ si le eɖokui si le Bootstrap habɔbɔa te. Àteŋu akpɔ nu geɖe tso RFS kple eƒe ɖoɖowo ŋu le eƒe GitHub nudzraɖoƒe .