Share
Under hela serien har vi gått igenom många olika kategorier av PostCSS-plugins, som erbjuder alla möjliga fördelar för din CSS-utveckling. Men några av de allra bästa PostCSS-pluginsna passar inte in i kategorierna som vi har täckt i våra tidigare serier.
I denna handledning kommer du att lära dig om fem av dessa "diverse godisar". Vi täcker:
Låt oss börja!
Som alltid är det första du behöver göra med att ställa in ditt projekt för att använda antingen Gulp eller Grunt, beroende på vad du föredrar. Om du inte redan föredrar en eller annan, rekommenderar jag att du använder Gulp eftersom du behöver mindre kod för att uppnå samma ändamål, så du borde hitta det lite enklare att arbeta med.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill installera ditt projekt manuellt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp. Sedan kör kommandot med en terminal eller kommandotolk som pekas på mappen npm installera.
Nu måste vi installera fem plugins i ditt projekt. Oavsett om du använder Gulp eller Grunt, kör följande kommando i din projektmapp för att installera plugins som vi ska använda:
npm installera borttappad postcss-colorblind postcss-pxtorem postcss-style-guide -save-dev
Förutom dessa fem använder vi också rtlcss, men eftersom det fungerar lite annorlunda än andra PostCSS-plugins använder vi det via motsvarande Gulp eller Grunt plugins.
Om du använder Gulp, installera gulp-rtlcss med kommandot:
npm installera gulp-rtlcss gulp-rename -save-dev
Och om du använder Grunt installerar du grunt-rtlcss med kommandot:
npm installera grunt-rtlcss - save-dev
Nu är vi redo att ladda plugin till ditt projekt.
Om du använder Gulp, lägg till dessa variabler under de variabler som redan finns i filen:
Accentsconagua
var förlorad = kräver ("förlorad"); var colorblind = kräver ('postcss-colorblind'); var pxtorem = kräver ("postcss-pxtorem"); var styleGuide = kräver ("postcss-style-guide"); var rtlcss = kräver ("gulp-rtlcss"); var rename = kräver ('gulp-rename');Lägg nu till var och en av de nya variabla namnen i din processorer array:
var processorer = [förlorade, // colorblind, pxtorem, styleGuide];
Notera: färgblind Kommenteras, vilket kommer att förklaras senare.
Gör ett snabbt test att allt fungerar genom att köra kommandot gulp css Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
processorer: [kräver ("förlorad") (), // kräver ('postcss-colorblind') (), kräver ('postcss-pxtorem') (), kräver ('postcss-style-guide')Notera: kräver ( 'postcss-färgblind') (), Kommenteras, vilket kommer att förklaras senare.
Gör ett snabbt test att allt fungerar genom att köra kommandot grunt postcss Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Lost är ett helt PostCSS-baserat nätgenereringssystem av Cory Simmons, skaparen av Jeet, ett annat mycket framgångsrikt rutsystem som är skrivet i Stylus. Den har en lång lista med imponerande funktioner, men dess implementering är väldigt rakt framåt.
Börja med att skapa en fil med namnet "index.html" i din "dest" -mapp. Vi lägger upp en grundläggande rutnätlayout i den här filen. Lägg till följande kod för den:
Huvudområde
Sidebar
Lägg sedan till den här koden till din "src / style.css" för att ställa in en grundläggande två kolumnradslayout, med en huvudområdeskolumn och sidofältet:
@lost gutter 1.618rem; .row lost-center: 75rem; .main lost-column: 3/5; .sidebar förlorad kolumn: 2/5;
Låt oss bryta ner vad vi har gjort här.
Först använder vi a @förlorat at-rule för att ställa in vårt eget värde för en av Losts alternativ: rännstorlek. Som standard är rännor (luckor mellan kolumner) 30px. Jag gillar alltid att använda 1.618rem för avstånd i mönster, så jag har bestämt det för att vara den nya rännstorleken med linjen @lost gutter 1.618rem;.
Därefter har vi setup a .rad klass som vi sätter ihop runt våra kolumner. Detta kräver bara att du använder fastigheten förlorade centrum och specificerar en bredd för raden. Pluggen tar hand om att ställa in en maximal bredd på klassen, centrera den och rensa den.
Därefter, i .huvud och .sidofältet klasser, vi har skapat våra kolumner.
Förlorade begränsar dig inte till att arbeta med ett förutbestämt antal kolumner som tolv eller sexton; Du kan ha ett antal kolumner du vill ha. Kolumnbredder bestäms genom att använda egenskapen förlorade-kolonn och ange en bråkdel som värdet. I vår kod .huvud klassen använder en inställning av 3/5 så det tar upp 3 av 5 kolumner, och .sidofältet användningar 2/5 så det tar 2 av 5 kolumner.
Kompilera din fil och i din "dest / style.css" -fil bör du nu se den här koden:
.rad * zoom: 1; maxbredd: 75rem; marginal-vänster: auto; marginal-höger: auto; .row: före innehåll: "; display: tabell; .row: efter innehåll:"; display: bord; klara: båda; .main bredd: calc (99,99% * 3/5 - (1,618rem - 1,618rem * 3/5)); .main: nth-child (n) float: left; marginal-höger: 1.618rem; rensa: ingen; .main: sista barn marginal-höger: 0; .main: nth-child (5n) margin-right: 0; .main: nth-child (5n + 1) clear: left; .sidebar bredd: calc (99,99% * 2/5 - (1,618rem - 1,618rem * 2/5)); .sidebar: nth-child (n) float: left; marginal-höger: 1.618rem; rensa: ingen; .sidebar: sista barn marginal-höger: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: nth-child (5n + 1) clear: left;
Och när du tittar i en webbläsare bör din "dest / index.html" -fil nu presentera en layout med två kolumner så här:
Det är lite svårt att se exakt vad som händer med vårt rutnät här, vilket är orsaken till att Lost också ger lost-utility: redigera; att markera ditt rutnät för enkel visualisering under utveckling.
Lägg till det här i varje klass som vi hittills har skapat:
.rad lost-center: 75rem; lost-utility: redigera; .main lost-column: 3/5; lost-utility: redigera; .sidebar förlorad kolumn: 2/5; lost-utility: redigera;
Nu när du kompilerar och uppdaterar din sida bör du se ditt rutnät markerat så här:
Låt oss göra allt lite tydligare för att se igen med lite extra styling (vilket också hjälper oss med senare avsnitt i denna handledning). Uppdatera din "src / style.css" -fil till följande, lägga till ett par extrafunktioner som vaddering i kolumnerna och några bakgrunds- och textfärger:
@lost gutter 1.618rem; * box-size: border-box; html, kropp höjd: 100%; marginal: 0; font-family: "Open Sans"; html vaddering: 0; kropp vaddering: 1.618rem; bakgrund: # 16a085; .row lost-center: 75rem; .main, .sidebar padding: 1.618rem; minhöjd: 500px; .main lost-column: 3/5; bakgrund: vit; färg: # 232323; .sidebar förlorad kolumn: 2/5; bakgrund: # 2c3e50; färg vit;
Kompilera din CSS igen och ladda om din sida och du borde nu ha en klassisk två kolumnlayout så här:
Vad vi har täckt här skimmar bara ytan på vad som kan göras med Lost, så var noga med att läsa om alla övriga funktioner på: https://github.com/corysimmons/lost
Färgblindhet påverkar en större andel av webbplatsens besökare än du kanske inser. Till exempel är den vanligaste typen av färgblindhet deuteranomali, vilket medför 6% av alla män och 0,4% av kvinnorna. För att uttrycka det i perspektiv är det uppskattat att IE9 och IE10 kombineras används av cirka 4% av all webtrafik. Man kan föreslå att om vi kan lägga betydande tid i att stödja specifika webbläsare, kan vi lägga lika stor tid åt att stödja människor.
Brian Holts postcss-colorblind-plugin hjälper omedelbart att bedöma hur tillgänglig en design är för personer med olika former av färgblindhet, eftersom det låter dig själv se hur dina färgscheman skulle se ut om du hade samma visuella uppfattning. Det låter dig skapa versioner av ditt stilark som simulerar åtta olika slags färgblindhet. Låt oss se hur du kan använda den.
Först lägger vi till några extra färger i vår design så långt att vi lättare kan se effekten av de olika stylesheets som vi ska generera. Vi lägger till fem "Metro Style" -plattor, genom att lägga till följande HTML under den rad som vi redan har i vår "Dest / Index.htm" -fil:
Detta är en kakelDetta är en kakelDetta är en kakelDetta är en kakelDetta är en kakel
Lägg nu till följande kod i din "src / style.css" -fil för att stile dessa plattor med fem olika färger:
.rad margin-bottom: 1.618rem; .tile lost-column: 1/5; vaddering: 3,75rem 1,618rem; text-align: center; fontstorlek: 1,25rem; färg vit; .tile: nth-of-type (1) bakgrund: # f39c12; .tile: nth-of-type (2) bakgrund: # c0392b; .tile: nth-of-type (3) bakgrund: # 8e44ad; .tile: nth-of-type (4) bakgrund: # 2980b9; .tile: nth-of-type (5) bakgrund: # d35400;
Efter sammanställning borde du se din fil ser så här ut i en webbläsare:
Du kanske har märkt det när vi installerar vår processorer array tidigare posten för färgblind kommenterades. Det beror på att så snart plugin är aktiv kommer det att applicera färgblindimulering i ditt stilark så att du inte vill slå på den tills du är redo att använda den. Okänt det i processorer array nu.
För att simulera någon av de åtta typerna av färgblindhet, skicka alternativet metod för det här pluginet i din Gulpfile eller Gruntfile, tillsammans med namnet på den typ av färgblindhet du vill kolla på.
Till exempel, för att simulera deuteranomaly, ställ det här alternativet:
/ * Gulpfile * / colorblind (metod: 'deuteranomaly'), / * Gruntfile * / require ('postcss-colorblind') (metod: 'deuteranomaly')Nu kompilera ditt stilark och uppdatera din sida och du kommer att se din design som en person med deuteranomaly gör:
Du märker att färgerna ser väldigt annorlunda ut. En person med deuteranomali ser röd och grön annorlunda, så medan du märker att blåen är nästan densamma, är röda och gröna ganska annorlunda.
För att visualisera protanopi, sätt detta alternativ:
/ * Gulpfile * / colorblind (metod: 'protanopia'), / * Gruntfile * / kräver ('postcss-colorblind') (metod: 'protanopia')Kompilera ditt stilark och nu ser du detta:
En person med protanopi ser i huvudsak inte röd alls och ser grön på ett annat sätt. Du märker igen att den starka bluesen inte är alltför kraftig, men lila har blivit rentblå och de återstående färgerna har blivit variationer av samma gulaktiga bruna färger. Det har blivit mycket svårt att skilja de röda och två orangefärgade plattorna från varandra.
Denna förmåga att generera alla olika typer av colorblind-simuleringar är otroligt inblick och hjälper oss att se till att de färgscheman vi har valt inte litar på uppfattningen av en viss nyans och därigenom är tillgänglig för alla.
Läs mer om postcss-colorblind på: https://github.com/btholt/postcss-colorblind
I nästan alla mönster finns det väldigt bra skäl till rem enhet för att spela en framträdande roll. Men det är svårt att tänka på rem enheter, och mycket lättare att tänka på px enheter när du skapar layouter. Postcss-pxtorem-plugin hjälper till med denna speedbump, genom att automatiskt konvertera px enheter till rem enheter.
Pluggen använder en vit lista över egenskaper som den gäller, så som standard px enheter kommer att konverteras till rem när den används på:
Du kan lägga till extra egenskaper till den här vita listan genom att ställa in en prop_white_list alternativ. Uppdatera din Gulpfile eller Gruntfile för att lägga till bredd egendom som så:
/ * Gulpfile * / pxtorem (prop_white_list: ['bredd', 'font', 'fontstorlek', 'linjehöjd', 'brevavstånd']) / * Gruntfile * / kräver ('postcss- pxtorem ") (prop_white_list: ['width', 'font', 'fontstorlek', 'linjehöjd', 'brevavstånd']),Lägg nu till följande kod i din "src / style.css" -fil så att vi kan testa konverteringsprocessen:
.convert_this width: 500px; typsnittstorlek: 18px;
Kompilera din fil och i din "dest / style.css" -fil ska du nu se den resulterande rem värden:
.convert_this width: 31.25rem; fontstorlek: 1.125rem;
Läs mer om postcss-pxtorem på: https://github.com/cuth/postcss-pxtorem
Om du är catering till en global publik kan du behöva ge stöd för skript som läses från höger till vänster i stället för vänster till höger, till exempel arabiska och hebreiska. När orienteringen av skriptet vänds, bör också layouten på din webbplats så att hela designen är meningsfull för dem som tittar på höger sida av skärmen först.
Rtlcss-plugin av Mohammad Younes gör processen att skapa en rätt till vänster layout mycket enklare, eftersom den automatiskt kan skanna ditt stilark och konvertera orienteringen, byta ordet "vänster" för "rätt" och vice versa.
Detta plugin fungerar faktiskt lite annorlunda än andra PostCSS-plugins, eftersom vi inte kan lägga till det i vårt processorer array. Istället under installationen installerade vi Gulp and Grunt-plugins för rtlcss, och vi ska ställa in separata uppgifter för att utföra det.
Om du använder Gulp, lägg till den här koden i din Gulpfile:
gulp.task ('rtl', funktion () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (rename (suffix: '-rtl')). rör (gulp.dest ('./ dest')););Om du använder Grunt, lägg till den här raden efter din befintliga grunt.loadNpmTasks linje:
grunt.loadNpmTasks ( 'grunt-rtlcss');
Lägg sedan till ett komma , efter din postcss uppgift och klistra in i det här nya rtlcss uppgift:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Nu, om du använder Gulp kör kommandot gulp rtl, och om du använder Grunt kör kommandot grunt rtlcss för att skapa ett höger mot vänster stilark med namnet "style-rtl.css" i din "dest" -mapp.
Redigera din "dest / index.html" -fil för att ladda "style-rtl.css" istället för "style.css", uppdatera din webbplats och du bör se din layout har blivit vänd runt:
Du kommer märka att texten fortfarande är vänsterjusterad, men det här kan enkelt lösas genom att bara lägga till text-align: left; i ditt standardstilark, vilken rtlcss konverterar till textjustera: höger;.
Läs mer om rtlcss och dess Gulp and Grunt motsvarigheter på:
Postcss-style-guide plugin är ett fantastiskt verktyg skapat av Masaaki Morishita. Det låter dig skapa en styleguide automatiskt baserat på ditt stilark. Allt du behöver göra är att lägga till några kommentarer till din CSS, och dessa kommentarer kommer att analyseras som Markdown och brukade fylla i din styleguide.
Det första vi ska göra är att konfigurera ett par alternativ för vår styleguide. Vi ska ställa in namnet på vårt projekt så att det kan visas i sidledet på styleguiden, och vi ska också använda ett eget tema med namnet 1 kolumn.
För att installera det anpassade temat vi använder till ditt projekt, kör kommandot:
npm installera psg-theme-1column --save-dev
Uppdatera nu din Gulpfile eller Gruntfile för att skicka ett namn och tema alternativ enligt följande:
/ * Gulpfile * / styleGuide (namn: 'Auto Style Guide', tema: '1column') / * Gruntfile * / kräver ('postcss-style-guide') (namn: 'Auto Style Guide' '1 kolumn')Hur postcss-styleguide fungerar är att det kommer att leta efter dina kommentarer i ditt stylesheet och vända var och en som den finner i en styleguide-post. Det antar att någon kommentar rör den CSS som följer den, hela vägen till en annan kommentar eller slutet av dokumentet.
Av den anledningen ska alla CSS som du vill visa upp i din styleguide flyttas längst ner i ditt stilark. Vi kommer att få våra färgade kakel fram i styleguiden, liksom en h1 element, så vi behöver dem båda för att vara i slutet av vårt dokument.
Börja med att flytta alla klasser som påverkar våra plattor längst ner i ditt stylesheet; det är .bricka klass och fem .kakel: n: te-of-typ () stilar. Lägg sedan till en liten kod för att kontrollera h1 element så att botten av ditt stilark ser ut så här (the .kakel: n: te-of-typ () stilar visas inte för att spara utrymme):
h1 font-size: 42px; .tile lost-column: 1/5; vaddering: 3,75rem 1,618rem; text-align: center; fontstorlek: 1,25rem; färg vit;
Nu kan vi lägga till några kommentarer för att beskriva dessa stilar. Varje html som läggs till i dessa kommentarer kommer att göras som html i styleguiden, och CSS som följer en kommentar kommer att visas i en bildskärm.
Lägg till några kommentarer i ditt stilark som beskriver h1 stil och .bricka klass och med några exempel html så slutar du med följande:
/ * Detta är h1-stilenRubrik 1
* / h1 fontstorlek: 42px; / * Dessa använder .tile-klassen* / .tile förlorad kolumn: 1/5; vaddering: 3,75rem 1,618rem; text-align: center; fontstorlek: 1,25rem; färg vit;Detta är en kakelDetta är en kakelDetta är en kakelDetta är en kakelDetta är en kakel
Kompilera nu ditt stilark, kolla in projektets rotmapp och öppna filen "styleguide.html" du hittar i en webbläsare:
Hej presto, omedelbar styleguide!
För tillfället ser det lite funky ut eftersom det har tagit upp den gröna kroppens bakgrundsfärg från vårt stilark. Vad vi vill är att vårt innehåll ska vara på en vit bakgrund, och vi kan få styleguiden att hämta någon annan kod från vårt stilark så att det händer.
Den centrala delen av denna styleguide mall använder a sektion element, så ovan den kommentar som beskriver din h1 element, lägg till den här koden:
avsnitt padding: 1rem; bakgrund: vit;
Kompilera din kod, uppdatera din styleguide, så ser du att den nu använder sig av den stil som vi just lagt till sektion element och ser så här ut:
Det är mycket bättre.
Läs mer om postcss-style-guide på: https://github.com/morishitter/postcss-style-guide
Sammanfattar allt vi har täckt ovan:
px enheter men har automatiskt konverterats till rem enheter under bearbetningen.I nästa och sista installationen av denna PostCSS Deep Dive lär du dig att låsa upp en av de största fördelarna som PostCSS erbjuder; det är möjligheten att använda det för att skapa vilken typ av funktionalitet du vill ha.
Du lär dig hur du skapar ditt eget grundläggande plugin, och för det förhoppningsvis fortsätter du med att göra många fler plugins för vad som helst som kan uppstå i framtiden.
Jag ser dig i den slutliga handledningen!
