no.hideout-lastation.com
Paradis For Designere Og Utviklere


10 Awesome PostCSS-plugins for å gjøre deg til en CSS-veiviser

PostCSS har nylig blitt den nye kule fyren i webutviklingssirkler, og med rette, da det gir en flott måte å øke hastigheten på arbeidsflyten i frontend-utviklingen, og forbedre kvaliteten på CSS . Det er et utrolig allsidig verktøy som gjør det mulig å transformere CSS-stiler med JavaScript-plugins . Dens fleksibilitet ligger i måten den er bygget på.

Kjernen i PostCSS er en Node.js-modul som du kan installere med npm, og den har et økosystem med mer enn 200 plugins du kan velge å bruke i prosjektet.

PostCSS er verken en forprosessor eller en postprosessor, da forskjellige PostCSS-plugins kan falle inn i en av disse kategoriene, eller begge deler; det avhenger helt av deg hva du gjør av det. Med PostCSS trenger du ikke å lære en annen syntaks som i tilfelle Sass eller LESS; Du kan umiddelbart begynne å bruke den.

PostCSS tar din eksisterende CSS-fil og endrer den til JavaScript-lesbare data, og JavaScript-pluginene utfører endringene, og PostCSS returnerer den endrede versjonen av den opprinnelige filen. Høres kult, ikke sant?

I dette innlegget vil vi se på 10 PostCSS-plugins for å gi deg et innblikk i noen av de flotte tingene du kan oppnå med dette fantastiske verktøyet.

#1. Autoprefixer

Autoprefixer er trolig den mest kjente PostCss-plugin, som den brukes av bemerkelsesverdige tekniske selskaper som Google, Twitter og Shopify. Det legger til leverandør prefikser til CSS regler der det er nødvendig .

Autoprefixer bruker data fra Kan jeg bruke. På denne måten blir det ikke datert, og kan alltid gjelde de siste reglene. Du kan sjekke hvordan det fungerer på sitt interaktive demo-nettsted.

# 2. CSSnext

CSSnext er en CSS-transpiler som lar deg bruke fremtidig CSS-syntaks på nåværende nettsteder . W3C har mange nye CSS-regler som ikke implementeres av nettlesere, men kan gjøre det mulig for utviklere å skrive mer sofistikert CSS raskere og enklere. CSSnext er laget for å bygge bro over dette gapet.

Det er verdt å se på funksjonene for å se hva du kan oppnå med det, for eksempel kan du bruke tilpassede mediaforespørsler, egendefinerte selektorer, fargemodifiseringer, SVG-filtre og nye pseudoklasser i designene dine.

# 3. PreCSS

PreCSS er et av PstCSS-pluginene som fungerer som en CSS preprocessor. Det gjør det mulig å dra nytte av en Sass-lignende markup i dine sytlesheet-filer .

Ved å introdusere PreCSS i arbeidsflyten din kan du bruke variabler, if-else setninger, for looper, mixins, @extend og @import regler, nesting og mange andre nyttige funksjoner i CSS-koden din. PreCSSs Github dokumentasjon gir deg detaljerte instruksjoner om hvordan du får mest mulig ut av det.

# 4. StyleLint

StyleLint er en moderne CSS-linter som korrekturviser og validerer CSS-koden din. Det gjør det enkelt å unngå feil og presser deg til å følge konsekvente kodekonvensjoner.

StyleLint forstår den nyeste CSS-syntaksen, så den kan brukes sammen med det tidligere nevnte PreCSS-plugin. Det lar deg også lage din egen konfigurasjon, og kontrollerer selv om innstillingene dine er gyldige.

# 7. Font magiker

Hvis du er en fan av sofistikert typografi, vil du helt sikkert likte Font Magician PostCSS-plugin. Den magiske Font-magiker er avhengig av sin evne til automatisk å generere alle nødvendige regler for @font-face .

Slik fungerer det ganske greit, du trenger bare å legge til font-family: "My Fav Font"; CSS-regel til et HTML-element, og Font Magician gjør resten av arbeidet. Det kan legge til Google Fonter, den lokale kopien av en skrift, Bootstrap-typografi, og kan også laste fonter asynkront. Her er det interaktive demonstrasjonsstedet.

# 8. Skriv SVG

Har du noen gang lurt på hvor kult det ville være å skrive SVG rett inn i CSS-filene dine? Ved hjelp av skrive SVG PostCSS-plugin kan du enkelt nå dette målet.

Dette praktiske pluginet gjør det mulig å lagre SVG-bakgrunnene og -ikonene i CSS-filen, og legg dem senere til det relevante HTML-elementet på følgende måte:

 @svg square {@rect {fill: var (- farge, svart); bredde: 100%; høyde: 100%; }} .eksempel {bakgrunn: hvit svg (kvadrat param (-farge # 00b1ff)) deksel; } 
# 10. PostCSS Sprites

PostCSS Sprite plugin gjør det enkelt å generere bilde sprites, dvs. samlinger av bilder plassert i en enkelt fil. Etter at du har satt inn noen få alternativer, tar plugin bildene fra stilarkfilen din, fusjonerer dem til en sprite, og oppdaterer deretter bildedistribusjonene hvor det er nødvendig.

Du kan bruke forskjellige filtre og gruppere til å bestemme hvilke bilder du vil legge inn i sprite, og du kan også angi dimensjonene til utdatabildet.

Er jobben din utskiftbar av maskiner?

Er jobben din utskiftbar av maskiner?

De fleste av oss vet ganske godt at produksjonslinjer kommer til å være maskin-dominert industri. Men de fleste av oss kan ikke innse at jobbene våre like like kan erstattes av automatisering eller maskiner.Her er en infographic av Pokerstars som forteller deg at oddsene dine blir erstattet av en maskin på jobben din. Mu

(Tekniske og design tips)

Tilpass SoundCloud Audio Player med ToneDen SDK

Tilpass SoundCloud Audio Player med ToneDen SDK

Audio streaming har eksistert på Internett siden 1990, og det er ikke mange populære lyd streaming plattformer å velge mellom nå. En av de mest populære er SoundCloud som har noen distinkte fordeler over sine konkurrenter, inkludert å være enkel å legge inn.Mens den innebygde spilleren er veldig brukervennlig og responsiv - du kan sette den på sidelinjen, på et innlegg eller en hjemmeside - du kan begrense når det gjelder å tilpasse spilleren. Du kan bar

(Tekniske og design tips)