Share
In deze reeks hebben we veel verschillende categorieën PostCSS-plug-ins doorlopen, die allerlei verschillende voordelen bieden voor uw CSS-ontwikkeling. Maar sommige van de allerbeste PostCSS-plug-ins passen niet in de categorieën die we in onze eerdere serie-items hebben behandeld.
In deze tutorial leer je over vijf van deze "diverse goodies". We behandelen:
Laten we beginnen!
Zoals altijd, is het eerste wat u moet doen uw project instellen om Gulp of Grunt te gebruiken, afhankelijk van uw voorkeur. Als je nog geen voorkeur hebt voor Gulp, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken, dus je zou het wat eenvoudiger moeten vinden om met Gulp te werken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap. Voer vervolgens de opdracht uit met een terminal of opdrachtprompt die naar de map wijst npm installeren.
Nu moeten we vijf plug-ins in uw project installeren. Of je nu Gulp of Grunt gebruikt, voer de volgende opdracht in je projectmap uit om de plug-ins te installeren die we zullen gebruiken:
npm install lost postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev
Evenals deze vijf zullen we ook rtlcss gebruiken, maar omdat het een beetje anders werkt dan andere PostCSS-plug-ins, zullen we het gebruiken via de bijbehorende Gulp- of Grunt-plug-ins.
Als u Gulp gebruikt, installeer dan gulp-rtlcss met de opdracht:
npm install gulp-rtlcss gulp-hernoemen --save-dev
En als je Grunt gebruikt, installeer dan grunt-rtlcss met de opdracht:
npm install grunt-rtlcss --save-dev
Nu zijn we klaar om de plug-ins in uw project te laden.
Als u Gulp gebruikt, voegt u deze variabelen toe onder de variabelen die al in het bestand staan:
Accentsconagua
var lost = require ('lost'); var colorblind = require ('postcss-colorblind'); var pxtorem = require ('postcss-pxtorem'); var styleGuide = require ('postcss-style-guide'); var rtlcss = require ('gulp-rtlcss'); var rename = require ('gulp-rename');Voeg nu elk van die nieuwe variabelenamen toe aan uw processors array:
var processors = [lost, // colorblind, pxtorem, styleGuide];
Notitie: kleurenblind is becommentarieerd, die later zal worden uitgelegd.
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren slok css controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
processors: [require ('lost') (), // require ('postcss-colorblind') (), require ('postcss-pxtorem') (), require ('postcss-style-guide') ()]Notitie: vereisen ( '-postcss kleurenblind') (), is becommentarieerd, die later zal worden uitgelegd.
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren grunt postcss controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Lost is een volledig op PostCSS gebaseerd systeem voor het genereren van rasters van Cory Simmons, de maker van Jeet, een ander zeer succesvol rastersysteem dat is geschreven in de Stylus. Het heeft een lange lijst van indrukwekkende functies, maar de implementatie is zeer eenvoudig.
Begin met het maken van een bestand met de naam "index.html" in uw map "dest". We zullen een eenvoudige rasterindeling in dit bestand opzetten. Voeg de volgende code eraan toe:
Hoofdgebied
sidebar
Voeg vervolgens deze code toe aan uw "src / style.css" om een basisopmaak in twee kolommen in te stellen, met een hoofdgebiedkolom en zijbalkkolom:
@lost goot 1.618rem; .row lost-center: 75rem; .main lost-column: 3/5; .sidebar lost-column: 2/5;
Laten we opsplitsen wat we hier hebben gedaan.
Ten eerste hebben we een @verloren at-rule om onze eigen waarde in te stellen voor een van Lost's opties: rugmarge. Standaard zijn dakgoten (openingen tussen kolommen) dat wel 30px. Ik gebruik altijd graag 1.618rem voor spaties in ontwerpen, dus ik heb dat ingesteld als de nieuwe rugmarge met de lijn @lost goot 1.618rem;.
Vervolgens hebben we een .rij klasse die we om onze columns wikkelen. Dit vereist alleen het gebruik van de eigenschap verloren-center en specificeren een breedte voor de rij. De plug-in zorgt voor het instellen van een Maximale wijdte in de klas, centreren en opruimen.
Daarna in de .hoofd en .zijbalk klassen, we hebben onze kolommen gemaakt.
Verloren beperkt u niet tot werken met een vooraf bepaald aantal kolommen zoals twaalf of zestien; je kunt elk gewenst aantal kolommen gebruiken. Kolombreedten worden bepaald met behulp van de eigenschap verloren-column en het instellen van een breuk als de waarde. In onze code de .hoofd klasse gebruikt een instelling van 3/5 dus het duurt 3 van de 5 kolommen, en de .zijbalk toepassingen 2/5 dus het duurt 2 van de 5 kolommen.
Compileer je bestand en in je "dest / style.css" -bestand zou je nu deze code moeten zien:
.rij * zoom: 1; maximale breedte: 75rem; marge links: auto; marge-rechts: auto; .row: vóór content: "; display: table; .row: after content:"; weergave: tafel; beiden opschonen; .main width: calc (99,99% * 3/5 - (1,618rem - 1,618rem * 3/5)); .main: nth-child (n) float: left; margin-right: 1.618rem; duidelijk: geen; .main: last-child margin-right: 0; .main: nth-child (5n) margin-right: 0; .main: nth-child (5n + 1) clear: left; .sidebar width: calc (99.99% * 2/5 - (1.618rem - 1.618rem * 2/5)); .sidebar: nth-child (n) float: left; margin-right: 1.618rem; duidelijk: geen; .sidebar: last-child margin-right: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: nth-child (5n + 1) clear: left;
En wanneer het in een browser wordt bekeken, zou uw "dest / index.html" -bestand nu een indeling met twee kolommen moeten weergeven, zoals deze:
Het is een beetje moeilijk om precies te zien wat er aan de hand is met ons raster hier, wat de reden is dat Lost ook voorziet lost-utility: edit; om uw raster te markeren voor eenvoudige visualisatie tijdens de ontwikkeling.
Voeg dit toe aan elk van de klassen die we tot nu toe hebben gemaakt:
.rij lost-center: 75rem; lost-utility: edit; .main lost-column: 3/5; lost-utility: edit; .sidebar lost-column: 2/5; lost-utility: edit;
Wanneer u uw pagina opnieuw compileert en vernieuwt, ziet uw rooster er als volgt uit:
Laten we dat allemaal een beetje duidelijker maken om opnieuw te zien met wat extra styling (wat ons ook zal helpen met latere secties in deze tutorial). Werk je "src / style.css" -bestand bij naar het volgende, voeg een paar extra's toe, zoals opvulling in de kolommen en een paar achtergrond- en tekstkleuren:
@lost goot 1.618rem; * box-sizing: border-box; html, body height: 100%; marge: 0; font-family: "Open Sans"; html opvulling: 0; lichaam opvulling: 1.618rem; achtergrond: # 16a085; .row lost-center: 75rem; .main, .sidebar padding: 1.618rem; minimale hoogte: 500 px; .main lost-column: 3/5; achtergrond: wit; kleur: # 232323; .sidebar lost-column: 2/5; achtergrond: # 2c3e50; kleur wit;
Compileer uw CSS opnieuw en laad uw pagina opnieuw en u zou nu een klassieke twee kolomlay-out als dit moeten hebben:
Wat we hier hebben behandeld, scheert gewoon de oppervlakte van wat er met Lost kan worden gedaan. Lees daarom ook alle andere functies op: https://github.com/corysimmons/lost
Kleurenblindheid beïnvloedt een groter deel van de bezoekers van uw site dan u wellicht zou realiseren. Het meest voorkomende type kleurenblindheid is bijvoorbeeld deuteranomalie, waardoor 6% van alle mannen en 0,4% van de vrouwen voorkomt. Om dat in perspectief te plaatsen, wordt geschat dat IE9 en IE10 gecombineerd worden gebruikt door ongeveer 4% van al het internetverkeer. Men zou kunnen stellen dat als we een aanzienlijke hoeveelheid tijd kunnen besteden aan het ondersteunen van specifieke browsers, we evenveel tijd kunnen besteden aan het ondersteunen van mensen.
De postcss-kleurenblinde plug-in van Brian Holt helpt enorm bij het beoordelen van hoe toegankelijk een ontwerp is voor mensen met verschillende vormen van kleurenblindheid, omdat je hierdoor zelf kunt zien hoe je kleurenschema eruit zou zien als je dezelfde visuele waarneming zou hebben. Hiermee kunt u versies van uw stylesheet genereren die acht verschillende soorten kleurenblindheid simuleren. Laten we kijken hoe je het kunt gebruiken.
Eerst voegen we wat extra kleur toe aan ons ontwerp tot nu toe om ons te helpen het effect van de verschillende stylesheets die we gaan genereren, duidelijker te zien. We voegen vijf "metrostijl" -tegels toe door de volgende html toe te voegen onder de rij die we al hebben in ons "dest / index.htm" -bestand:
Dit is een tegelDit is een tegelDit is een tegelDit is een tegelDit is een tegel
Voeg nu de volgende code toe aan je "src / style.css" -bestand om deze tegels op te fleuren met vijf verschillende kleuren:
.rij margin-bottom: 1.618rem; .tile lost-column: 1/5; opvulling: 3.75rem 1.618rem; text-align: center; lettergrootte: 1.25rem; kleur wit; .tile: nth-of-type (1) background: # f39c12; .tile: nth-type (2) background: # c0392b; .tile: nth-of-type (3) background: # 8e44ad; .tile: nth-of-type (4) background: # 2980b9; .tile: nth-of-type (5) background: # d35400;
Na het compileren zou je bestand er nu als volgt uit moeten zien in een browser:
Je hebt misschien gemerkt dat toen we onze processors array eerder het item voor kleurenblind werd becommentarieerd. Dat komt omdat zodra de plug-in actief is, hij kleurenblinde simulatie op uw stylesheet toepast, dus u wilt hem niet aanzetten totdat u klaar bent om hem te gebruiken. Maak een commentaar in de processors array nu.
Om een van de acht soorten kleurenblindheid te simuleren, geeft u de optie door methode voor deze plug-in in uw Gulpfile of Grunt-bestand, samen met de naam van het type kleurenblindheid dat u wilt controleren.
Als u bijvoorbeeld deuteranomalie wilt simuleren, stelt u deze optie in:
/ * Gulpfile * / colorblind (method: 'deuteranomaly'), / * Gruntfile * / require ('postcss-colorblind') (method: 'deuteranomaly')Compileer nu uw stylesheet en ververs uw pagina en u zult uw ontwerp zien als een persoon met deuteranomaly:
Je zult merken dat de kleuren er opvallend anders uitzien. Een persoon met deuteranomalie ziet rood en groen anders, dus hoewel je zult zien dat het blauw bijna hetzelfde is, zijn de rode en groene kleuren behoorlijk verschillend.
Om protanopia te visualiseren, stelt u deze optie in:
/ * Gulpfile * / colorblind (method: 'protanopia'), / * Gruntfile * / require ('postcss-colorblind') (method: 'protanopia')Hercompileer je stylesheet en nu zie je dit:
Een persoon met protanopie ziet in essentie helemaal geen rood en ziet groen op een andere manier. Je zult opnieuw merken dat de sterke blues niet te zwaar wordt beïnvloed, maar paars is puur blauw geworden en de overgebleven kleuren zijn variaties geworden van dezelfde geelachtige bruinachtige kleuren. Het is erg moeilijk geworden om de rode en twee oranjekleurige tegels van elkaar te onderscheiden.
Dit vermogen om alle verschillende soorten kleurenblindsimulaties te genereren, is ongelooflijk inzichtelijk en helpt ons ervoor te zorgen dat de kleurenschema's die we hebben gekozen niet afhankelijk zijn van de perceptie van een bepaalde tint en daardoor toegankelijk zijn voor iedereen.
Lees meer over postcss-kleurenblind op: https://github.com/btholt/postcss-colorblind
In bijna alle ontwerpen zijn er zeer goede redenen voor de rem eenheid om een prominente rol te spelen. Het is echter moeilijk om erover na te denken rem eenheden, en veel gemakkelijker om in te denken px eenheden bij het maken van lay-outs. De postcss-pxtorem-plug-in helpt bij deze snelheidsoverschrijding door automatisch te converteren px eenheden naar rem units.
De plug-in gebruikt een witte lijst met eigenschappen waarop deze van toepassing is, dus standaard px eenheden worden geconverteerd naar rem indien gebruikt op:
U kunt extra eigenschappen aan deze witte lijst toevoegen door een prop_white_list keuze. Werk uw Gulpfile of Gruntfile bij om de. Toe te voegen breedte eigendom zoals zo:
/ * Gulpfile * / pxtorem (prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']), / * Gruntfile * / require ('postcss- pxtorem ') (prop_white_list: [' width ',' font ',' font-size ',' line-height ',' letter-spacing ']),Voeg nu de volgende code toe aan uw "src / style.css" -bestand, zodat we het conversieproces kunnen testen:
.convert_this width: 500px; lettergrootte: 18px;
Compileer je bestand en in je "dest / style.css" bestand zou je nu de resulterende moeten zien rem waarden:
.convert_this width: 31.25rem; lettergrootte: 1.125rem;
Lees meer over postcss-pxtorem op: https://github.com/cuth/postcss-pxtorem
Als u zich richt op een wereldwijd publiek, moet u mogelijk ondersteuning bieden voor scripts die van rechts naar links worden gelezen in plaats van van links naar rechts, zoals Arabisch en Hebreeuws. Wanneer de oriëntatie van het script wordt omgedraaid, moet de lay-out van uw site zo zijn dat het hele ontwerp zinvol is voor degenen die eerst naar de rechterkant van het scherm kijken.
De rtlcss-plug-in door Mohammad Younes maakt het proces van het maken van een lay-out van rechts naar links veel eenvoudiger, omdat het je stylesheet automatisch kan scannen en de oriëntatie ervan kan converteren, het woord "left" kan verwisselen voor "right" en vice versa.
Deze plugin werkt eigenlijk een beetje anders dan andere PostCSS-plug-ins, omdat we deze niet aan onze plug-ins kunnen toevoegen processors matrix. In plaats daarvan hebben we tijdens de projectconfiguratie de Gulp- en Grunt-plug-ins voor rtlcss geïnstalleerd en gaan we afzonderlijke taken instellen om het uit te voeren.
Als u Gulp gebruikt, voegt u deze code toe aan uw Gulpfile:
gulp.task ('rtl', function () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (hernoemen (suffix: '-rtl')). pipe (gulp.dest ('./ dest')););Als je Grunt gebruikt, voeg je deze regel toe na je bestaande grunt.loadNpmTasks lijn:
grunt.loadNpmTasks ( 'grunt-rtlcss);
Voeg vervolgens een komma toe , na jouw postcss taak en plak deze in dit nieuwe rtlcss taak:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Nu, als Gulp het commando gebruikt slurpen rtl, en als je Grunt gebruikt, voer je het commando uit gegrom rtlcss om een stylesheet van rechts naar links genaamd "style-rtl.css" te genereren in uw "dest" -map.
Bewerk je "dest / index.html" bestand om "style-rtl.css" te laden in plaats van "style.css", ververs je site, en je zou moeten zien dat je layout is omgedraaid:
Je zult zien dat de tekst nog steeds uitgelijnd is, maar dit kan eenvoudig worden verholpen door het gewoon toe te voegen text-align: left; in je standaard stylesheet, waar rtlcss naar zal converteren text-align: right;.
Lees meer over rtlcss en zijn Gulp en Grunt tegenhangers bij:
De postcss-style-guide plug-in is een fantastische tool gemaakt door Masaaki Morishita. Hiermee kunt u automatisch een styleguide genereren op basis van uw stylesheet. Het enige wat u hoeft te doen is enkele opmerkingen toevoegen aan uw CSS, en die opmerkingen zullen worden ontleed als Markdown en worden gebruikt om uw styleguide te vullen.
Het eerste dat we gaan doen, is een paar opties configureren voor onze styleguide. We gaan de naam van ons project instellen zodat het in de kop van de styleguide kan worden weergegeven en we gaan ook een aangepast thema met de naam 1column gebruiken.
Als u het aangepaste thema wilt installeren dat we in uw project zullen gebruiken, voert u de opdracht uit:
npm installeer psg-theme-1column --save-dev
Werk nu je Gulpfile of Gruntfile bij om een a te halen naam en thema opties als volgt:
/ * Gulpfile * / styleGuide (naam: 'Auto Style Guide', thema: '1column') / * Gruntfile * / require ('postcss-style-guide') (name: 'Auto Style Guide', thema: '1column')De manier waarop postcss-styleguide werkt, is dat het naar uw opmerkingen in uw stylesheet zal zoeken en van elke gevonden tekst een styleguidingang zal maken. Er wordt vanuit gegaan dat elke opmerking betrekking heeft op de CSS die erop volgt, helemaal tot aan een andere opmerking of het einde van het document.
Om deze reden moet elke CSS die u in uw styleguide wilt presenteren naar de onderkant van uw stylesheet worden verplaatst. We gaan onze gekleurde tegels laten verschijnen in de styleguide, evenals een h1 element, dus we hebben beide nodig om aan het einde van ons document te staan.
Begin met het verplaatsen van alle klassen die onze tegels beïnvloeden naar de onderkant van uw stylesheet; dat is de .tegel klasse en de vijf .tegel: n-of-type () stijlen. Voeg dan ook een beetje code toe om te beheren h1 elementen zodat de onderkant van uw stylesheet er zo uitziet (de .tegel: n-of-type () stijlen worden niet getoond om ruimte te besparen):
h1 font-size: 42px; .tile lost-column: 1/5; opvulling: 3.75rem 1.618rem; text-align: center; lettergrootte: 1.25rem; kleur wit;
Nu kunnen we enkele opmerkingen toevoegen om deze stijlen te beschrijven. Alle html die in deze opmerkingen wordt toegevoegd, wordt weergegeven als html in de styleguide en de CSS die volgt op een opmerking verschijnt in een weergavebox.
Voeg wat commentaar toe aan je stylesheet en beschrijf de h1 stijl en de .tegel klasse, en inclusief een voorbeeld html, dus je krijgt het volgende:
/ * Dit is de h1-stijlKoptekst 1
* / h1 font-size: 42px; / * Deze gebruiken de .tile-klasse* / .tile lost-column: 1/5; opvulling: 3.75rem 1.618rem; text-align: center; lettergrootte: 1.25rem; kleur wit;Dit is een tegelDit is een tegelDit is een tegelDit is een tegelDit is een tegel
Compileer nu uw stylesheet, kijk in de hoofdmap van uw project en open het "styleguide.html" -bestand dat u daar in een browser vindt:
Hé presto, instant-styleguide!
Op het moment ziet het er een beetje funky uit, omdat het de groene achtergrondkleur uit onze stylesheet heeft opgepikt. Wat we willen is dat onze inhoud op een witte achtergrond staat en we kunnen de styleguide gebruiken om een andere code uit ons stylesheet op te halen om dit te laten gebeuren.
Het centrale gedeelte van deze styleguide-sjabloon gebruikt een sectie element, dus bovenstaande de opmerking die jouw beschrijft h1 element, voeg deze code toe:
sectie opvulling: 1rem; achtergrond: wit;
Hercompileer uw code, vernieuw uw styleguide en u zult zien dat deze nu gebruikmaakt van de styling waaraan we zojuist hebben toegevoegd sectie elementen en ziet er als volgt uit:
Daar, veel beter.
Lees meer over postcss-style-guide op: https://github.com/morishitter/postcss-style-guide
Alles wat we hierboven hebben behandeld, wordt samengevat:
px eenheden maar laat ze automatisch omzetten naar rem eenheden tijdens verwerking.In de volgende en laatste installatie van deze PostCSS Deep Dive leer je hoe je een van de grootste voordelen die PostCSS biedt, kunt ontgrendelen; dat is de mogelijkheid om het te gebruiken om elk type functionaliteit te maken dat je wilt.
U leert hoe u uw eigen basisinvoegtoepassing maakt en vanaf die basis zult u hopelijk nog veel meer plug-ins maken voor wat er in de toekomst ook zou kunnen gebeuren.
Ik zie je in de laatste tutorial!
