Share
Gjennom hele denne serien har vi vært gjennom mange forskjellige kategorier av PostCSS-plugins, og tilbyr alle slags forskjellige fordeler for CSS-utviklingen. Men noen av de aller beste PostCSS-pluginene passer ikke inn i kategoriene vi har dekket i våre tidligere serieoppføringer.
I denne opplæringen skal du lære om fem av disse "diverse godbiter". Vi vil dekke:
La oss begynne!
Som alltid, er det første du må gjøre, å sette opp prosjektet ditt for å bruke enten Gulp eller Grunt, avhengig av dine preferanser. Hvis du ikke allerede har en preferanse for den ene eller den andre, anbefaler jeg at du bruker Gulp, da du trenger mindre kode for å oppnå samme mål, så du bør finne det litt enklere å jobbe med.
Du kan lese om hvordan du konfigurerer Gulp eller Grunt-prosjekter for PostCSS i de tidligere opplæringsprogrammene
henholdsvis.
Hvis du ikke vil opprette prosjektet manuelt fra starten, kan du laste ned kildefilene som er vedlagt denne opplæringen, og trekke ut enten det forsynte Gulp eller Grunt-startprosjektet i en tom prosjektmappe. Deretter kjører kommandoen med en terminal eller kommandoprompt på mappen npm installasjon.
Nå må vi installere fem plugins i prosjektet. Enten du bruker Gulp eller Grunt, kjør følgende kommando inne i prosjektmappen din for å installere pluginene vi skal bruke:
npm installer mistet postcss-colorblind postcss-pxtorem postcss-stil-guide - save-dev
I tillegg til disse fem bruker vi også rtlcss, men som det virker litt annerledes enn andre PostCSS-plugins, bruker vi det via sine tilhørende Gulp eller Grunt-plugins.
Hvis du bruker Gulp, installerer du gulp-rtlcss med kommandoen:
npm installer gulp-rtlcss gulp-rename - save-dev
Og hvis du bruker Grunt installere grunt-rtlcss med kommandoen:
npm installere grunt-rtlcss - save-dev
Nå er vi klare til å laste inn pluginene i prosjektet ditt.
Hvis du bruker Gulp, legger du til disse variablene under variablene som allerede finnes i filen:
Accentsconagua
var tapt = krever ('tapt'); var colorblind = krever ('postcss-colorblind'); var pxtorem = krever ('postcss-pxtorem'); var styleGuide = krever ('postcss-style-guide'); var rtlcss = krever ('gulp-rtlcss'); var rename = krever ('gulp-rename');Legg nå til hver av de nye variabelenavnene i din prosessorer matrise:
var prosessorer = [tapt, // colorblind, pxtorem, styleGuide];
Merk: fargeblind er kommentert, som vil bli forklart senere.
Gjør en rask test at alt fungerer ved å kjøre kommandoen gulp css og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Hvis du bruker Grunt, oppdaterer du prosessorer objekt, som er nestet under opsjoner objekt til følgende:
prosessorer: [krever ('tapt') (), // krever ('postcss-colorblind') (), krever ('postcss-pxtorem') (), krever ('postcss-style-guide')Merk: kreve ( 'postcss-fargeblinde') (), er kommentert, som vil bli forklart senere.
Gjør en rask test at alt fungerer ved å kjøre kommandoen grunt postcss og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Lost er et helt PostCSS-basert gridgenereringssystem av Cory Simmons, skaperen av Jeet, et annet svært vellykket grid-system skrevet i Stylus. Den har en lang liste over imponerende funksjoner, men utplasseringen er veldig rett frem.
Start med å lage en fil med navnet "index.html" i "dest" -mappen din. Vi oppretter et grunnleggende gridoppsett i denne filen. Legg til følgende kode for det:
Hovedområde
sidebar
Deretter legger du til denne koden i "src / style.css" for å sette opp en grunnleggende to kolonne grid layout, med en hovedområde kolonne og sidebar kolonne:
@lost gutter 1.618rem; .row lost-center: 75rem; .main lost-column: 3/5; .sidebar tapt kolonne: 2/5;
La oss bryte ned det vi har gjort her.
Først bruker vi a @tapt at-regelen for å sette vår egen verdi for en av Lost's alternativer: rennestørrelse. Som standard er gutters (gap mellom kolonner) 30px. Jeg liker alltid å bruke 1.618rem for avstand i design, så jeg har satt det for å være den nye gutterstørrelsen med linjen @lost gutter 1.618rem;.
Deretter har vi oppsett a .rad klasse som vi vil pakke rundt våre kolonner. Dette krever bare å bruke eiendommen fraværs sentrum og angir en bredde for raden. Pluggen tar seg av å sette inn en max bredde på klassen, sentrere den og rydde den.
Etter det, i .hoved- og .sidebar klasser, vi har laget våre kolonner.
Lost begrenser ikke deg til å jobbe med et forhåndsbestemt antall kolonner som tolv eller seksten; Du kan ha et hvilket som helst antall kolonner du vil ha. Kolonnebredder bestemmes ved å bruke eiendommen fraværs kolonne og sette en brøkdel som verdien. I vår kode .hoved- klassen bruker en innstilling av 3/5 så det vil ta opp 3 av 5 kolonner, og .sidebar bruker 2/5 så det vil ta 2 av 5 kolonner.
Kompilér filen din og i filen "dest / style.css" bør du nå se denne koden:
.rad * zoom: 1; maksimal bredde: 75rem; margin-left: auto; margin-høyre: auto; .row: før innhold: "; display: tabell; .row: etter innhold:"; skjerm: bord; klare: begge; .main width: calc (99,99% * 3/5 - (1.618rem - 1.618rem * 3/5)); .main: nth-child (n) float: left; margin-høyre: 1.618rem; klare: ingen; .main: siste barn margin-right: 0; .main: nth-child (5n) margin-right: 0; .main: nth-child (5n + 1) clear: left; .sidebar bredde: calc (99,99% * 2/5 - (1,618rem - 1,618rem * 2/5)); .sidebar: nth-barn (n) float: left; margin-høyre: 1.618rem; klare: ingen; .sidebar: siste barn margin-høyre: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: nth-barn (5n + 1) clear: left;
Og når du ser på en nettleser, skal filen "dest / index.html" nå presentere et to-kolonneoppsett som dette:
Det er litt vanskelig å se nøyaktig hva som skjer med vårt rutenett her, noe som er årsaken til at Lost også gir tapt verktøy: rediger; å markere rutenett for enkel visualisering under utvikling.
Legg til dette i hver av klassene vi har laget så langt:
.rad lost-center: 75rem; tapt verktøy: rediger; .main lost-column: 3/5; tapt verktøy: rediger; .sidebar tapt kolonne: 2/5; tapt verktøy: rediger;
Nå når du kompompillerer og oppdaterer siden din, bør du se rutenettet uthevet slik:
La oss gjøre det litt bedre for å se igjen med litt ekstra styling (som også hjelper oss med senere seksjoner i denne opplæringen). Oppdater filen "src / style.css" til følgende, legg til et par ekstraelementer som polstring i kolonnene og noen få bakgrunns- og tekstfarger:
@lost gutter 1.618rem; * box-size: border-box; html, kropp høyde: 100%; margin: 0; font-family: "Open Sans"; html polstring: 0; kropp polstring: 1.618rem; bakgrunn: # 16a085; .row lost-center: 75rem; .main, .sidebar polstring: 1.618rem; Min høyde: 500px; .main lost-column: 3/5; bakgrunn: hvit; farge: # 232323; .sidebar tapt kolonne: 2/5; bakgrunn: # 2c3e50; farge: hvit;
Kompil CSS igjen og last siden på nytt, og du burde nå ha en klassisk to kolonneoppsett som dette:
Det vi har dekket her, skinner bare overflaten av det som kan gjøres med Lost, så vær sikker på at du leser om alle de andre funksjonene på: https://github.com/corysimmons/lost
Fargeblindhet påvirker en større del av nettstedets besøkende enn du kanskje skjønner. For eksempel er den vanligste typen fargeblindhet deuteranomali, noe som gir 6% av alle menn og 0,4% av hunnene. For å sette det i perspektiv, er det anslått at IE9 og IE10 kombineres brukes av rundt 4% av all webtrafikk. Man kan foreslå at hvis vi kan legge betydelig tid i å støtte bestemte nettlesere, kan vi sette like tid til å støtte folk.
Postboks-colorblind-plugin av Brian Holt hjelper uimotståelig til å vurdere hvor lett et design er for mennesker med ulike former for fargeblindhet, da det gir deg mulighet til å se selv hvordan fargevalgene dine ville se ut hvis du hadde samme visuelle oppfatning. Den lar deg generere versjoner av stilarket som simulerer åtte forskjellige typer fargeblindhet. La oss se hvordan du kan bruke den.
Først vil vi legge til noen ekstra farger i vårt design så langt for å hjelpe oss med å se tydeligere effekten av de forskjellige stilarkene vi skal generere. Vi legger til fem "metro stil" fliser, ved å legge til følgende html under raden vi allerede har i vår "dest / index.htm" -fil:
Dette er en flisDette er en flisDette er en flisDette er en flisDette er en flis
Legg nå følgende kode i filen "src / style.css" for å formatere disse fliser med fem forskjellige farger:
.rad margin-bunn: 1.618rem; .tile lost-column: 1/5; polstring: 3,75rem 1,618rem; tekst-align: center; fontstørrelse: 1,25rem; farge: hvit; .tile: nth-of-type (1) bakgrunn: # f39c12; .tile: nth-of-type (2) bakgrunn: # c0392b; .tile: nth-of-type (3) bakgrunn: # 8e44ad; .tile: nth-of-type (4) bakgrunn: # 2980b9; .tile: nth-of-type (5) bakgrunn: # d35400;
Etter samling bør du se at filen din nå ser ut som dette i en nettleser:
Du har kanskje lagt merke til at når vi setter opp vår prosessorer array tidligere oppføringen for fargeblind ble kommentert. Det er fordi så snart plugin er aktiv, vil det bruke fargeblind simulering til stilarket ditt, slik at du ikke vil slå den på før du er klar til å bruke den. Uncent det i prosessorer array nå.
For å simulere noen av de åtte typer fargeblindhet, passere alternativet metode for dette pluginet i din Gulpfile eller Gruntfile, sammen med navnet på typen fargeblindhet du vil sjekke på.
For eksempel å simulere deuteranomaly angi dette alternativet:
/ * Gulpfile * / colorblind (metode: 'deuteranomaly'), / * Gruntfile * / require ('postcss-colorblind') (metode: 'deuteranomaly')Nå kompilere stilarket ditt og oppdatere siden din, og du vil se designen din som en person med deuteranomaly gjør:
Du vil legge merke til at fargene ser spesielt annerledes ut. En person med deuteranomali ser rødt og grønt annerledes, så mens du ser det blå er nesten det samme, er røde og grønne ganske forskjellige.
For å visualisere protanopi angi dette alternativet:
/ * Gulpfile * / colorblind (metode: 'protanopia'), / * Gruntfile * / krever ('postcss-colorblind') (metode: 'protanopia')Rekompilere stilarket ditt og nå ser du dette:
En person med protanopi ser i det hele tatt ikke rødt ut, og ser grønt på en annen måte. Du vil merke igjen at den sterke bluen ikke er for tungt påvirket, men lilla har blitt renblå, og de gjenværende fargene har blitt variasjoner av de samme gulbrune farger. Det har blitt veldig vanskelig å skille de røde og to oransjefargede fliser fra hverandre.
Denne muligheten til å generere alle forskjellige typer colorblind-simuleringer er utrolig innsiktende og hjelper oss med å sikre at fargevalgene vi har valgt ikke stole på oppfatning av en bestemt nyanse og dermed er tilgjengelig for alle.
Les mer om postcss-colorblind på: https://github.com/btholt/postcss-colorblind
I nesten alle design er det veldig gode grunner til rem enhet for å spille en fremtredende rolle. Men det er vanskelig å tenke på rem enheter, og mye enklere å tenke på px enheter når du lager oppsett. Postcss-pxtorem plugin hjelper med denne speedbumpen, ved automatisk konvertering px enheter til rem enheter.
Pluggen bruker en hvit liste over egenskaper som den gjelder, så som standard px enheter vil bli konvertert til rem når den brukes på:
Du kan legge til ekstra egenskaper til denne hvite listen ved å sette inn en prop_white_list alternativ. Oppdater Gulpfile eller Gruntfile for å legge til bredde eiendom som slik:
/ * Gulpfile * / pxtorem (prop_white_list: ['bredde', 'font', 'fontstørrelse', 'linjehøyde', 'brevavstand']) / / Gruntfile * / krever ('postcss- pxtorem ') (prop_white_list: [' width ',' font ',' fontstørrelse ',' linjehøyde ',' brevavstand ']),Legg nå følgende kode i filen "src / style.css", slik at vi kan teste konverteringsprosessen:
.convert_this width: 500px; skriftstørrelse: 18px;
Kompilér filen din og i filen "dest / style.css" bør du nå se den resulterende rem verdier:
.convert_this bredde: 31.25rem; skriftstørrelse: 1,125rem;
Les mer om postcss-pxtorem på: https://github.com/cuth/postcss-pxtorem
Hvis du er catering til et globalt publikum, kan det hende du må gi støtte for skript som leses fra høyre til venstre i stedet for fra venstre til høyre, for eksempel arabisk og hebraisk for eksempel. Når orienteringen av skriptet er vendt, bør også layoutet på nettstedet ditt slik at hele designet gir mening for de som ser på høyre side av skjermen først.
Rtlcss plugin av Mohammad Younes gjør prosessen med å lage en høyre til venstre layout mye enklere, da den automatisk kan skanne stilarket ditt og konvertere orienteringen, bytte ordet "left" for "right" og vice versa.
Dette pluginet fungerer egentlig litt annerledes enn andre PostCSS-plugins, fordi vi ikke kan legge det til vår prosessorer array. I stedet, under prosjektoppsettet installerte vi Gulp and Grunt-pluginene for rtlcss, og vi skal sette opp separate oppgaver for å utføre det.
Hvis du bruker Gulp, legg til denne koden i Gulpfile:
gulp.task ('rtl', funksjon () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (rename (suffix: '-rtl')). rør (gulp.dest ('./ dest')););Hvis du bruker Grunt, legg til denne linjen etter din eksisterende grunt.loadNpmTasks linje:
grunt.loadNpmTasks ( 'grov-rtlcss');
Legg deretter til et komma , etter din postcss oppgave og lim inn i denne nye rtlcss oppgave:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Nå, hvis du bruker Gulp, kjør kommandoen gulp rtl, og hvis du bruker Grunt, kjør kommandoen grunt rtlcss å generere et stilark til høyre til venstre som heter "style-rtl.css" i "dest" -mappen din.
Rediger "dest / index.html" -filen din for å laste "style-rtl.css" i stedet for "style.css", oppdatere nettstedet ditt, og du bør se at layoutet ditt har blitt vendt rundt:
Du vil legge merke til at teksten fortsatt er venstrejustert, men dette kan lett løses ved å bare legge til tekstjustering: venstre; i standard stilarket, som rtlcss vil konvertere til tekstjustering: høyre;.
Les mer om rtlcss og dets Gulp and Grunt kolleger på:
Postcss-style-guide plugin er et fantastisk verktøy laget av Masaaki Morishita. Den lar deg generere et styleguide automatisk basert på stilarket ditt. Alt du trenger å gjøre er å legge til noen kommentarer til CSS, og disse kommentarene vil bli analysert som Markdown og brukes til å fylle ut din styleguide.
Det første vi skal gjøre er å konfigurere et par alternativer for vårt styleguide. Vi skal sette navnet på prosjektet vårt slik at det kan vises i overskriften til styleguide, og vi skal også bruke et tilpasset tema kalt 1 kolonne.
For å installere det egendefinerte temaet bruker vi prosjektet ditt, kjør kommandoen:
npm installere psg-theme-1column --save-dev
Oppdater nå Gulpfile eller Gruntfile for å passere en Navn og tema alternativer som følger:
/ * Gulpfile * / styleGuide (navn: 'Auto Style Guide', tema: '1column') / * Gruntfile * / krever ('postcss-style-guide') (navn: 'Auto Style Guide', tema: '1 kolonne')Måten postcss-styleguide fungerer på, er at den vil se etter dine kommentarer i stilarket ditt og slå hver den finner i en styleguideoppføring. Det vil anta at noen kommentar vedrører CSS som følger den, helt til en annen kommentar eller slutten av dokumentet.
Av denne grunn, vil noen CSS du vil presentere i styleguide, flyttes til bunnen av stilarket. Vi skal ha våre fargede fliser vises i styleguide, så vel som en h1 element, så vi trenger begge disse til å være på slutten av dokumentet vårt.
Begynn med å flytte alle klassene som påvirker flisene våre ned til bunnen av stilarket ditt. det er .flis klassen og de fem .flis: n-te-of-type () stiler. Deretter legger du også til en liten kode for å kontrollere h1 elementer slik at bunnen av stilarket ser slik ut (den .flis: n-te-of-type () stiler vises ikke for å spare plass):
h1 skriftstørrelse: 42px; .tile lost-column: 1/5; polstring: 3,75rem 1,618rem; tekst-align: center; fontstørrelse: 1,25rem; farge: hvit;
Nå kan vi legge til i noen kommentarer for å beskrive disse stilene. Eventuell html lagt til i disse kommentarene vil bli gjengitt som html i styleguiden, og CSS som følger en kommentar vil vises i en displayboks.
Legg til noen kommentarer i stilarket som beskriver h1 stil og .flis klasse, og med noen eksempler html, slik at du ender opp med følgende:
/ * Dette er h1-stilenOverskrift 1
* / h1 skriftstørrelse: 42px; / * Disse bruker .tile-klassen* / .tile lost-column: 1/5; polstring: 3,75rem 1,618rem; tekst-align: center; fontstørrelse: 1,25rem; farge: hvit;Dette er en flisDette er en flisDette er en flisDette er en flisDette er en flis
Sett sammen stilarket ditt, se i prosjektets rotmappe og åpne filen "styleguide.html" du finner i en nettleser:
Hei presto, øyeblikkelig styleguide!
For øyeblikket ser det ut litt funky fordi det har plukket opp den grønne kroppens bakgrunnsfarge fra vårt stilark. Det vi ønsker er at innholdet vårt skal være på en hvit bakgrunn, og vi kan få styleguide til å hente annen kode fra stilarket for å få dette til å skje.
Det sentrale området av denne styleguide-malen bruker a seksjon element, så ovenfor kommentaren beskriver din h1 element, legg til denne koden:
avsnitt polstring: 1rem; bakgrunn: hvit;
Kompil koden din, oppdater din styleguide, og du vil se at den nå bruker stilen vi nettopp har lagt til seksjon elementer og ser slik ut:
Der, mye bedre.
Les mer om postcss-stil-guide på: https://github.com/morishitter/postcss-style-guide
Oppsummering alt vi har dekket over:
px enheter, men har dem automatisk konvertert til rem enheter under behandling.I neste og siste installasjon av denne PostCSS Deep Dive lærer du hvordan du låser opp en av de største fordelene som PostCSS tilbyr; det er evnen til å bruke den til å skape hvilken som helst type funksjonalitet du vil ha.
Du lærer hvordan du lager din egen grunnleggende plugin, og fra det grunnlaget vil du forhåpentligvis fortsette å lage mange flere plugins for hva som måtte oppstå i fremtiden.
Jeg ser deg i den endelige opplæringen!
