RFS

Cos'è RFS?

Il progetto collaterale di Bootstrap RFS è un motore di ridimensionamento delle unità che è stato inizialmente sviluppato per ridimensionare le dimensioni dei caratteri (da cui la sua abbreviazione di Responsive Font Sizes). Al giorno d'oggi RFS è in grado di ridimensionare la maggior parte delle proprietà CSS con valori di unità come margin, padding, border-radiuso anche box-shadow.

Il meccanismo calcola automaticamente i valori appropriati in base alle dimensioni della finestra del browser. Verrà compilato in calc()funzioni con un mix di remunità viewport per abilitare il comportamento di ridimensionamento reattivo.

Utilizzo di RFS

I mixin sono inclusi in Bootstrap e sono disponibili dopo aver incluso Bootstrap's scss. RFS può anche essere installato standalone, se necessario.

Usando i mixin

Il rfs()mixin ha scorciatoie per font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, e padding-left. Vedere l'esempio seguente per Sass sorgente e CSS compilato.

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

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

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

Qualsiasi altra proprietà può essere passata al rfs()mixin in questo modo:

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

!importantpuò anche essere semplicemente aggiunto a qualsiasi valore desideri:

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

Utilizzo delle funzioni

Quando non vuoi usare include, ci sono anche due funzioni:

• rfs-value()converte un valore in un remvalore se pxviene passato un valore, negli altri casi restituisce lo stesso risultato.
• rfs-fluid-value()restituisce la versione fluida di un valore se è necessario ridimensionare la proprietà.

In questo esempio, utilizziamo uno dei mixin di punti di interruzione reattivi incorporati di Bootstrap per applicare lo stile solo al di sotto del punto di lginterruzione.

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

Documentazione estesa

RFS è un progetto separato nell'ambito dell'organizzazione Bootstrap. Maggiori informazioni su RFS e la sua configurazione possono essere trovate sul suo repository GitHub .