RFS

Qu'est-ce que RFS ?

Le projet parallèle de Bootstrap RFS est un moteur de redimensionnement d'unité qui a été initialement développé pour redimensionner les tailles de police (d'où son abréviation pour Responsive Font Sizes). De nos jours, RFS est capable de redimensionner la plupart des propriétés CSS avec des valeurs unitaires telles que margin, padding, border-radiusou même box-shadow.

Le mécanisme calcule automatiquement les valeurs appropriées en fonction des dimensions de la fenêtre du navigateur. Il sera compilé en calc()fonctions avec un mélange d' remunités et de fenêtres pour permettre le comportement de mise à l'échelle réactif.

Utilisation de RFS

Les mixins sont inclus dans Bootstrap et sont disponibles une fois que vous avez inclus le fichier scss. RFS peut également être installé de manière autonome si nécessaire.

Utilisation des mixins

Le rfs()mixin a des raccourcis pour font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, et padding-left. Voir l'exemple ci-dessous pour la source Sass et le CSS compilé.

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

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

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

Toute autre propriété peut être transmise au rfs()mixin comme ceci :

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

!importantpeut également être simplement ajouté à la valeur de votre choix :

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

Utilisation des fonctions

Lorsque vous ne souhaitez pas utiliser les inclusions, il existe également deux fonctions :

• rfs-value()convertit une valeur en une remvaleur si une pxvaleur est passée, dans les autres cas, il renvoie le même résultat.
• rfs-fluid-value()renvoie la version fluide d'une valeur si la propriété doit être redimensionnée.

Dans cet exemple, nous utilisons l'un des mixins de points d'arrêt réactifs intégrés de Bootstrap pour appliquer uniquement le style sous le point d' lgarrêt.

.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 */
  }
}

Documentation étendue

RFS est un projet distinct de l'organisation Bootstrap. Vous trouverez plus d'informations sur RFS et sa configuration sur son référentiel GitHub .