Ved hjelp av en Mixin å Ta Matte ut av Responsive skriftstørrelse

0
25

Responsive skriftstørrelse (RFS) er en motor som automatisk beregner og oppdateringer font-size eiendom på elementer basert på mål for nettleser vinduet.

Hvis du tenker på at lyder kjent, det er fordi det er en slew av verktøy der ute som tilbyr ulike tilnærminger for væske typografi. Faktisk, Chris samlet en haug av dem en liten stund tilbake. Sjekk det ut fordi det er alltid godt å vite hva som er der ute, og hva som passer best for en bestemt oppgave.

RFS er forskjellige i at det gjør å skrive kode for væske type føles mye liker å skrive native CSS (eller, mer nøyaktig, som å skrive med en preprocessor) direkte i stylesheet du allerede arbeider i — bare uten å måtte argumentere for og administrere en haug av media queries. Det er også kompatibel med Sass, Mindre, Stylus og PostCSS, så det settes inn bare om noen stakk.

Hvor integrert er det? Vel, la oss sammenligne en kodebit for væske typografi som bruker calc () – funksjonen,…

html {
font-size: 16px;
}

@media-skjerm, og (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw – 320px) / 680));
}
}

@media-skjerm, og (min-width: 1200px) {
html {
font-size: 22px;
}
}

…med et lignende eksempel på hvordan det kan gjøres med RFS i Sass:

.tittel {
@inkluderer font-size(4rem);
}

Som kompilerer til:

.tittel {
font-size: 4rem;
}

@media (maks bredde: 1200px) {
.tittel {
font-size: calc(1.525 rem + 3.3 vw);
}
}

Nysgjerrig på hvordan det fungerer? La oss sjekke det ut og deretter gå inn i hvordan du skal sette den opp for et prosjekt.

Magien bak automatisk re-skalering

Her er en graf for å få en bedre forståelse av hvordan RFS re-skalaer skriftstørrelser:

Hver farge representerer en skriftstørrelse som blir formidlet til font-size() mixin gitt av RFS. Y-aksen i diagrammet representerer skriftstørrelse (px) og x-aksen representerer bredden av viewport (igjen, i px).

La oss fokusere på den grønne linjen, som er generert ved å bruke en mixin til et element:

.tittel {
@inkluderer font-size(40);
}

I dette tilfellet, en skriftstørrelse på 40px er gått inn i mixin. At verdiene som maksimum skriftstørrelsen av element og når størrelsen når viewport 1200px eller større, på hvilket tidspunkt det holder seg på den størrelsen.

I motsatt fall, skriftstørrelse vil bunnen ut på 20 piksler, aldri kommer nedenfor som merket.

Alt annet? Vel, det er der skriftstørrelse verdien beregnes automatisk, ved hjelp av en funksjon bak kulissene for å bestemme antall i henhold til gjeldende bredden på vinduet.

RFS er også litt sta på at det begrenser seg til å skriftstørrelser som er 20 piksler og over. Begrunnelsen er at mindre tekst (f.eks. normal kropp tekst) som normalt ikke trenger å bøye så mye og er mye enklere å administrere enn større deler av innholdet, som titler og slikt. Det er veldig mye i tråd med FitText, som også foretrekker å bli brukt på stor tekst (selv om det ikke stopper deg fra å gjøre det).

Hvis du er den typen person som liker å ta en titt under panseret, mixin for hver preprosessor som er tilgjengelig for visning i RFS GitHub-repo. For eksempel, her er en direkte link til SCSS versjon. Det er mye matematikk!

Merk at hver skriftstørrelse er generert i en kombinasjon av rem-og vw-enheter, men de er tilordnet til px i grafen for å gjøre det enklere å forstå. Med andre ord, det tar virkelig alle mathwork ut av miksen.

Alt er konfigurerbare

Seriøst. Hver. Enkelt. Ting.

For eksempel, du har kanskje lurt på hvorfor skriftstørrelse avkortet ut på viewports 1200px og bredere i forrige eksempel. Som kan endres, samt massevis av andre ting, blant annet:

  • Base font-size: Den laveste skriftstørrelse verdi.
  • Skriftstørrelsen enhet: type enhet til bruk i produksjon-verdi (px eller em).
  • Stoppunkt: Den maksimale bredden av vinduet der skriftstørrelsen av elementet når sin maksimale verdi.
  • Stoppunkt enhet: enheten som brukes for media query at mixin genererer (px, em eller rem).
  • Faktor: Dette fungerer som en sorta volumkontroll som informerer mixin hvor stor den bør være i beregning font-størrelser fra maksimalt viewport bredde hele veien ned.
  • Rem-verdi: Dette definerer verdien av 1rem i piksler (px) enheter.
  • To-dimensjonale: En funksjon som sniffs ut den minste siden av et vindu og bruker den til å beregne skriftstørrelse verdi. Dette kommer i hendig når du sier at du ønsker å holde skriften blir mindre når en enhet roteres fra stående til liggende.
  • Klasse: Gir klasse navn som kan bli lagt til et element i HTML-enten aktivere eller deaktivere væske dimensjonering.

Så, ja. En rekke alternativer og fleksibilitet her. Det som er viktig å vite er at alle disse alternativene er variabler som kan være definert i din stilark.

Alt dette sagt, det standardinnstillingene er ganske trygt å bruke, og de vil hindre en mye lengre ord truncating fra viewport. Dette er spesielt sant for noen språk, som tysk eller nederlandsk — som inneholder mange av sammensatte ord.

Ved hjelp av RFS i et prosjekt

La oss dykke rett inn i koden. Det ville være uttømmende for å se på koden for hver preprosessor, så jeg skal forklare alt i den .scss syntaks. Men hvis du foretrekker noe annet, kan du sjekke ut eksempler på andre språk i GitHub repo i Bruk-delen.

Først og fremst, RFS må være installert på prosjektet. Det er tilgjengelig i npm og Garn:

## npm
npm installere rfs

## Garn
garn legge til rfs

## Stua er tilgjengelig, men har blitt avskrevet
stua installere rfs –spare

Deretter må sørge for at mixin er importert med resten av stiler, uansett hvor du gjør ditt import for andre partials:

@import “~rfs/scss”;

Nå, kan vi begynne matlaging med mixin!

.tittel {
color: #333;
@inkluderer font-size(64px);
}

.undertittel {
color: #666;
@inkluderer font-size(48px);
}

.avsnitt {
@inkluderer font-size(16px);
}

Jeg passerte verdier i px, men rem-enheter støttes også. Hvis en verdi uten en enhet som er gått, px brukes som standard. Skriften størrelser er alltid gjengitt i rem (i kombinasjon med vw) for å kontrollere at skriftstørrelser også øke når standard skriftstørrelse er økt i nettleseren (dette er en funksjon som ofte brukes av synshemmede).

Resultatet er:

.tittel {
color: #333;
font-size: 4rem;
}

@media (maks bredde: 1200px) {
.tittel {
font-size: calc(1.525 rem + 3.3 vw);
}
}

.undertittel {
color: #666;
font-size: 3rem;
}

@media (maks bredde: 1200px) {
.undertittel {
font-size: calc(1.425 rem + 2.1 vw);
}
}

.avsnitt {
font-size: 1rem;
}

Legg merke til at mixin er font-size(), men RFS vil også la deg bruke det på to andre måter:

.tittel {
@inkluderer font-size(4rem);
// eller
@inkluderer responsiv-font-size(64px);
// eller
@inkluderer rfs(64);
}

RFS er bakt rett inn Bootstrap

Her er en liten historie for deg.

En dag, hadde jeg denne utrolig impulsive idé å sette RFS i Bootstrap. Jeg faktisk gjorde ikke bruk Bootstrap på den tiden, men trodde det var en funksjon Bootstrap kunne definitivt bruke. Jeg har gjort et trekk forespørsel og ventet et par måneder for å se hva som ville skje.

I mellomtiden, jeg begynte å bli mer og mer fascinert av Bootstrap og versjon 4 hadde nettopp blitt lansert. Sakte, men sikkert, fikk jeg mer involvert i å bidra til prosjektet, og en helt ny verden åpnet seg for meg da jeg oppdaget samfunnet bak det. Det var under hacktoberfest (oh yes, jeg fikk min t-skjorte) i oktober 2018 at jeg ble spurt om å bli Bootstrap team av mdo-en.

Jeg tror bidra til åpen kildekode-prosjekter er en så morsom og givende ting. Andrés Galante har et flott innlegg om temaet hvis du er interessert i å bli en bidragsyter.

Siden da, RFS har blitt et prosjekt av Bootstrap-team, og på 11. februar i år lanserte vi Bootstrap 4.3 som inkluderer RFS rett ut av boksen. Det er for øyeblikket deaktivert som standard, men kan lett bli slått på ved å sette Sass variabelen $aktiver-responsiv-font-størrelser: sant.

Men ta ikke feil: RFS kan fortsatt brukes på egen hånd. Like kult som det er bakt rett inn i en mye brukt rammeverket.

Oh ja, la oss snakke nettleserstøtte

Støtte er ganske darn bra! Faktisk, RFS vil jobbe hvor som helst som støtter media queries og viewport enheter. RFS vil angi en skriftstørrelse for Eldre nettlesere, som Internet Explorer 8, men flyt vil ikke være det. Med andre ord, skal være trygt for produksjon!

Hva er det neste for RFS

Den neste store versjonen av Bootstrap er versjon 5, og vi planlegger å aktivere RFS som standard. Vi har ikke noen planer om å endre måten det fungerer for nå. Mer enn sannsynlig, $aktiver-responsiv-font-størrelser variabel vil rett og slett bli satt til sann, og det er det.

I fremtiden håper jeg at jeg kan gjøre bruk av min () – funksjonen, fordi det ville medføre mindre CSS og gjøre ting mye mindre komplisert. Nettlesere ikke synes å støtte denne funksjonen alt for godt ennå, men hvis du er interessert i denne funksjonen, og du kan følge fremdriften i dette GitHub problemet.

Noe annet? Nei, men jeg kan forlate deg med litt sang og dans: Na Na na na na na na na, hei hei hei farvel!

SHARE
Previous articleDen Serif Skatt
Next articleThe Serif Tax