Share
De-a lungul acestei serii am trecut prin multe categorii diferite de pluginuri PostCSS, oferind tot felul de avantaje diferite pentru dezvoltarea CSS. Dar unele dintre cele mai bune pluginuri PostCSS nu se încadrează în categoriile pe care le-am acoperit în intrările din seria anterioară.
În acest tutorial veți afla despre cinci dintre aceste "bunuri diverse". Vom acoperi:
Sa incepem!
Ca întotdeauna, primul lucru pe care trebuie să-l faceți este să vă configurați proiectul pentru a utiliza fie Gulp, fie Grunt, în funcție de preferințele dvs. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a atinge aceleași scopuri, așadar ar trebui să vă simțiți puțin mai ușor să lucrați cu.
Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
respectiv.
Dacă nu doriți să configurați manual proiectul de la zero, puteți să descărcați fișierele sursă atașate acestui tutorial și să extrageți proiectul Gulp sau Gruntul furnizat într-un dosar gol al proiectului. Apoi, cu un terminal sau un prompt de comandă indicat la dosarul de executare a comenzii npm install.
Acum va trebui să instalați cinci pluginuri în proiectul dvs. Indiferent dacă utilizați Gulp sau Grunt, executați următoarea comandă în dosarul proiectului pentru a instala pluginurile pe care le vom folosi:
npm instalare pierdut postcss-colorblind postcss-pxtorem postcss-style-guide -save-dev
Pe lângă aceste cinci, vom folosi și rtlcss, dar, deoarece funcționează puțin diferit față de alte pluginuri PostCSS, îl vom folosi prin pluginurile Gulp sau Grunt corespunzătoare.
Dacă utilizați Gulp, instalați gulp-rtlcss cu comanda:
npm instalează gulp-rtlcss gulp-rename --save-dev
Și dacă folosiți Grunt instalați grunt-rtlcss cu comanda:
npm instalează grunt-rtlcss -save-dev
Acum suntem gata să încărcăm pluginurile în proiectul tău.
Dacă utilizați Gulp, adăugați aceste variabile sub variabilele deja în fișier:
Accentsconagua
var pierdut = necesită ("pierdut"); var colorblind = cer ('postcss-colorblind'); var pxtorem = cer ('postcss-pxtorem'); var styleGuide = necesită ('postcss-style-guide'); var rtlcss = cer ('gulp-rtlcss'); var rename = cer ("gulp-rename");Acum adăugați fiecare dintre aceste nume de variabile noi în dvs. procesoare matrice:
var procesoare = [pierdut, // colorblind, pxtorem, styleGuide];
Notă: colorblind este comentată, care va fi explicată ulterior.
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
procesoare: [cer ('pierdut') (), // cere ('postcss-colorblind') (), necesita ('postcss-pxtorem'Notă: necesită ( 'postcss-daltonism') (), este comentată, care va fi explicată ulterior.
Faceți un test rapid că totul funcționează prin rularea comenzii zgâria postcss verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Lost este un sistem complet de generare a rețelei bazate pe PostCSS de către Cory Simmons, creatorul lui Jeet, un alt sistem de rețea foarte reușit, scris în Stylus. Are o lungă listă de trăsături impresionante, însă desfășurarea sa este foarte simplă.
Începeți prin crearea unui fișier numit "index.html" în dosarul "Dest". Vom instala o structură de bază în acest fișier. Adăugați următorul cod:
Zona principală
Bara laterală
Apoi, adăugați acest cod la "src / style.css" pentru a configura o structură de bază a două coloane de coloană, cu o coloană a zonei principale și a unei coloane laterale:
@lost jgheab 1.618rem; .row centru pierdut: 75rem; .main pierdut-coloană: 3/5; . sidebar pierdut-coloană: 2/5;
Să aruncăm o privire asupra a ceea ce am făcut aici.
În primul rând, am folosit a @pierdut at-rule pentru a stabili valoarea proprie pentru una dintre opțiunile lui Lost: dimensiunea jgheabului. În mod implicit jgheaburile (golurile între coloane) sunt 30px. Îmi place mereu să folosesc 1.618rem pentru spațierea în desene sau modele, așa că am stabilit că aceasta este noua dimensiune a jgheabului cu linia @lost jgheab 1.618rem;.
Apoi, am setat a .rând clasa pe care o vom înfășura în jurul coloanelor noastre. Acest lucru necesită utilizarea proprietății a pierdut-centru și specificând o lățime pentru rând. Pluginul va avea grijă de setarea a lățimea maximă pe clasă, centrifugare și curățare.
După aceea, în .principal și .bara laterală clase, am creat coloanele noastre.
Lost nu te limitează să lucrezi cu un număr predeterminat de coloane, cum ar fi doisprezece sau șaisprezece; puteți avea orice număr de coloane doriți. Lățimile coloanelor sunt determinate prin utilizarea proprietății pierdut-o coloană și stabilind o fracțiune ca valoare. În codul nostru .principal clasa foloseste o setare de 3/5 astfel încât aceasta va dura 3 din 5 coloane, și .bara laterală utilizări 2/5 așa că va dura 2 din 5 coloane.
Compilați-vă fișierul și în fișierul "dest / style.css" ar trebui să vedeți acum acest cod:
.rând * zoom: 1; max-lățime: 75rem; margin-stânga: auto; margin-dreapta: auto; .row: înainte de content: "; display: table; .row: după content:"; afișare: tabel; clar: ambele; .main lățime: calc (99,99% * 3/5 - (1,618rem - 1,618rem * 3/5)); .main: n-copil (n) float: left; margin-dreapta: 1.618rem; clar: nici unul; .main: ultimul-copil margin-right: 0; .main: n-copil (5n) margin-right: 0; .main: n-copil (5n + 1) clar: stânga; . sidebar lățime: calc (99,99% * 2/5 - (1,618rem - 1,618rem * 2/5)); sidebar: n-copil (n) float: left; margin-dreapta: 1.618rem; clar: nici unul; .sidebar: ultimul-copil margin-right: 0; sidebar: n-copil (5n) margin-right: 0; . bara: n-copil (5n + 1) clar: stânga;
Și atunci când este vizualizat într-un browser, fișierul dvs. "dest / index.html" ar trebui să prezinte acum un aspect de două coloane astfel:
Este greu să vedem exact ce se întâmplă aici cu grila noastră, motiv pentru care Lost oferă de asemenea utilitate pierdută: editați; pentru a evidenția grila dvs. pentru o vizualizare ușoară în timpul dezvoltării.
Adăugați aceasta la fiecare dintre clasele pe care le-am creat până acum:
.rând centru pierdut: 75rem; utilitate pierdută: editați; .main pierdut-coloană: 3/5; utilitate pierdută: editați; . sidebar pierdut-coloană: 2/5; utilitate pierdută: editați;
Acum, când recompilați și actualizați pagina dvs., ar trebui să vedeți grila dumneavoastră evidențiată astfel:
Să facem totul mai clar pentru a vedea din nou cu un stil suplimentar (care ne va ajuta și cu secțiunile mai târzii din acest tutorial). Actualizați fișierul "src / style.css" la următoarele, adăugând câteva elemente suplimentare cum ar fi umplutura în interiorul coloanelor și câteva culori de fundal și text:
@lost jgheab 1.618rem; * size-box: border-box; html, corp înălțime: 100%; marja: 0; font-family: "Open Sans"; html padding: 0; corp padding: 1.618rem; fundal: # 16a085; .row centru pierdut: 75rem; .main, sidebar padding: 1.618rem; min-înălțime: 500px; .main pierdut-coloană: 3/5; fundal: alb; culoare: # 232323; . sidebar pierdut-coloană: 2/5; fundal: # 2c3e50; culoare albă;
Compilați din nou CSS și reîncărcați pagina dvs. și acum ar trebui să aveți un aspect clasic în două coloane, astfel:
Ceea ce am acoperit aici scade doar suprafața a ceea ce se poate face cu Lost, deci asigurați-vă că ați citit despre toate celelalte caracteristici la: https://github.com/corysimmons/lost
Culoarea orbire afectează o parte mai mare a vizitatorilor site-ului dvs. decât ați putea realiza. De exemplu, cel mai frecvent tip de orbire de culoare este deuteranomalia, care implică 6% din toți bărbații și 0,4% din femei. Pentru a pune acest lucru în perspectivă, se estimează că IE9 și IE10 combinate sunt utilizate de aproximativ 4% din traficul web. S-ar putea sugera că, dacă putem oferi o cantitate semnificativă de timp în sprijinirea anumitor browsere, putem pune o perioadă egală de timp în susținerea oamenilor.
Pluginul postcss-colorblind de Brian Holt ajută incomensurabil în evaluarea modului în care un design este accesibil persoanelor cu diferite forme de orbire coloră, deoarece vă permite să vedeți cum ar arăta schemele de culori dacă ați avea aceeași percepție vizuală. Vă permite să generați versiuni ale foii de stil care simulează opt tipuri diferite de orbire colorată. Să vedem cum o poți folosi.
În primul rând, vom adăuga câteva culori suplimentare designului nostru până acum pentru a ne ajuta să vedem mai clar efectul diferitelor foi de stil pe care urmează să le generăm. Vom adăuga cinci plăci de tip "metro", adăugând următoarea html sub rândul pe care îl avem deja în fișierul "dest / index.htm":
Acesta este un TiglaAcesta este un TiglaAcesta este un TiglaAcesta este un TiglaAcesta este un Tigla
Acum adăugați următorul cod în fișierul "src / style.css" pentru a modela aceste plăci cu cinci culori diferite:
.rând margin-bottom: 1.618rem; .tile pierdut-coloană: 1/5; umplutură: 3.75rem 1.618rem; text-align: centru; font-size: 1.25rem; culoare albă; .tile: n-a-tip (1) fundal: # f39c12; .tile: n-a-tip (2) fundal: # c0392b; .tile: n-a-tip (3) fundal: # 8e44ad; .tile: nth-of-type (4) fundal: # 2980b9; .tile: n-a-tip (5) fundal: # d35400;
După compilare, ar trebui să vedeți că fișierul dvs. arată acum într-un browser:
S-ar putea să fi observat că atunci când ne-am configura procesoare array mai devreme de intrare pentru colorblind a fost comentat. Acest lucru se datorează faptului că, de îndată ce pluginul este activ, va aplica simulare colorblind în foaia dvs. de stil, astfel încât să nu doriți să îl porniți până când nu sunteți gata să îl utilizați. Descărcați-l în procesoare acum.
Pentru a simula oricare din cele opt tipuri de culori, treceți opțiunea metodă pentru acest plugin în Gulpfile sau Gruntfile, împreună cu numele tipului de colorblindness pe care doriți să verificați.
De exemplu, pentru a simula deuteranomalia setați această opțiune:
/ * Gulpfile * / colorblind (metoda: 'deuteranomaly'), / * Gruntfile * / necesită ('Acum, recompilați foaia de stil și reîmprospătați-vă pagina și veți vedea designul dvs. ca o persoană cu deuteranomaly nu:
Veți observa că culorile arată foarte diferit. O persoană cu deuteranomalia vede roșu și verde diferit, așa că, în timp ce veți observa că albastrul este aproape același, roșu și verde sunt destul de diferite.
Pentru a vizualiza protanopia setați această opțiune:
/ * Gulpfile * / colorblind (metoda: 'protanopia')), / * Gruntfile * / necesită ('postcss-colorblind'Recompilați foaia de stil și acum veți vedea acest lucru:
O persoană cu protanopia nu vede deloc roșu și vede verde într-un mod diferit. Veți observa din nou că bluzele puternice nu sunt prea puternic influențate, dar purpuriu a devenit albastru pur, iar culorile rămase au devenit variante ale aceleași culori gălbui gălbui. A devenit foarte dificil să se distingă unul de altul de roșu și două plăci de culoare portocalie.
Această abilitate de generare a diferitelor tipuri de simboluri colorblind este incredibil de vizibilă și ne ajută să asigurăm că schemele de culori pe care le-am ales nu se bazează pe percepția unei nuanțe particulare și astfel sunt accesibile tuturor.
Citiți mai multe despre postcss-colorblind la: https://github.com/btholt/postcss-colorblind
În aproape toate modelele, există motive foarte bune pentru rem unitate pentru a juca un rol proeminent. Cu toate acestea, este dificil de gândit în rem unități și mult mai ușor de gândit px unități atunci când creați machete. Pluginul postcss-pxtorem ajută la această viteză, prin conversia automată px unități la rem Unități.
Pluginul utilizează o listă albă de proprietăți la care se aplică, prin urmare, implicit px unitățile vor fi convertite în rem atunci când este utilizat pentru:
Puteți adăuga proprietăți suplimentare la această listă albă prin setarea a prop_white_list opțiune. Actualizați Gulpfile sau Gruntfile pentru a adăuga lăţime astfel de proprietăți:
/ * Gulpfile * / pxtorem (prop_white_list: ['lățime', 'font', 'font-size', 'line-height' pxtorem ') (prop_white_list: [' lățime ',' font ',' font-size ',' line-height ',' spacing ',
Acum adăugați următorul cod în fișierul "src / style.css" pentru a putea testa procesul de conversie:
.convert_this width: 500px; font-size: 18px;
Compilați fișierul și în fișierul "dest / style.css" ar trebui să vedeți acum rezultatul rem valori:
.convert_this width: 31.25rem; font-size: 1.125rem;
Citiți mai multe despre postcss-pxtorem la: https://github.com/cuth/postcss-pxtorem
Dacă vă alimentați unui public global, este posibil să aveți nevoie de asistență pentru scripturile citite de la dreapta la stânga, nu de la stânga la dreapta, cum ar fi araba și ebraică, de exemplu. Atunci când orientarea script-ului este rotită, ar trebui ca și aspectul site-ului dvs., astfel încât întregul design să aibă sens pentru cei care privesc mai întâi partea dreaptă a ecranului.
Pluginul rtlcss de către Mohammad Younes face mult mai ușor procesul de creare a unui aspect din partea dreaptă spre stânga, deoarece poate să-și scaneze automat foaia de stil și să-și convertească orientarea, schimbând cuvântul "stânga" pentru "dreapta" și invers.
Acest plugin funcționează într-adevăr puțin diferit față de alte pluginuri PostCSS, deoarece nu îl putem adăuga la noi procesoare matrice. În schimb, în timpul instalării proiectului, am instalat pluginurile Gulp și Grunt pentru rtlcss și vom seta sarcini separate pentru a le executa.
Dacă utilizați Gulp, adăugați acest cod în Gulpfile:
gulp.task ('rtl', funcția () retur gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (renumiți (sufix: '-rtl')). țeavă (gulp.dest ('./ dest')););Dacă utilizați Grunt, adăugați această linie după existența dvs. grunt.loadNpmTasks linia:
grunt.loadNpmTasks ( 'groh-rtlcss');
Apoi adăugați o virgulă , după tine postcss sarcină și lipiți în acest nou rtlcss sarcină:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Acum, dacă folosiți Gulp, executați comanda gulp rtl, și dacă folosiți Grunt executați comanda grunt rtlcss pentru a genera o foaie de stil de la dreapta la stânga numită "style-rtl.css" în dosarul "dest".
Editați-vă fișierul "dest / index.html" pentru a încărca "style-rtl.css" în loc de "style.css", reîmprospătați-vă site-ul și ar trebui să vedeți aspectul dvs.
Veți observa că textul este încă lăsat aliniat, dar acest lucru poate fi ușor remediat doar prin adăugare text-aliniere: stânga; în fișierul de stil implicit, la care rtlcss va converti text-aliniere: drept;.
Citiți mai multe despre rtlcss și omologii lui Gulp și Grunt la adresa:
Pluginul postcss-style-guide este un instrument fantastic creat de Masaaki Morishita. Acesta vă permite să generați un ghid de stil în mod automat bazat pe foaia dvs. de stil. Tot ce trebuie să faceți este să adăugați câteva comentarii la CSS-ul dvs., iar acele comentarii vor fi analizate ca Markdown și folosite pentru a popula ghidul de stil.
Primul lucru pe care îl vom face este să configurați câteva opțiuni pentru ghidul nostru de stil. Vom seta numele proiectului nostru astfel încât acesta să poată fi afișat în antetul ghidului de stil și vom folosi, de asemenea, o temă personalizată numită 1 coloană.
Pentru a instala tema personalizată pe care o vom folosi în proiectul dvs., executați comanda:
npm instalează psg-theme-1column --save-dev
Acum actualizați Gulpfile sau Gruntfile pentru a trece a Nume și temă opțiuni după cum urmează:
/ * Gulpfile * / styleGuide (name: 'Auto Style Guide', tema: '1column') / * Gruntfile * / require (' "1 coloană")Modul în care funcționează stilul postcss este că va căuta comentariile dvs. în foaia de stil și va transforma fiecare pe care o găsește într-o intrare stilguide. Va presupune orice comentariu care se referă la CSS care o urmează, până la un alt comentariu sau la sfârșitul documentului.
Din acest motiv, orice CSS pe care doriți să-l afișați în ghidul de stil trebuie mutat în partea de jos a foii de stil. Vom face ca piesele noastre colorate să apară în ghidul de stil, precum și un h1 element, astfel că vom avea nevoie de amândouă să fie la sfârșitul documentului nostru.
Începeți prin a muta toate clasele care efectuează țiglele noastre până la partea de jos a foii de stil; asta este .ţiglă clasa și cele cinci .țiglă: nth-de-tip () stiluri. Apoi adăugați și un mic cod de control h1 astfel încât partea de jos a foii de stil să arate astfel ( .țiglă: nth-de-tip () stilurile nu sunt indicate pentru a economisi spațiu):
h1 font-size: 42px; .tile pierdut-coloană: 1/5; umplutură: 3.75rem 1.618rem; text-align: centru; font-size: 1.25rem; culoare albă;
Acum putem adăuga câteva comentarii pentru a descrie aceste stiluri. Orice html adăugat în aceste comentarii va fi redat ca html în stilguide, iar CSS care urmează după un comentariu va apărea într-o casetă de afișare.
Adăugați câteva comentarii în foaia dvs. de stil care descriu h1 stil și stil .ţiglă clasa și includeți un exemplu de html, astfel încât să ajungeți la următoarele:
/ * Acesta este stilul h1Rubrica 1
* / h1 font-size: 42px; / * Acestea folosesc clasa .tile* / .tile pierdut-coloană: 1/5; umplutură: 3.75rem 1.618rem; text-align: centru; font-size: 1.25rem; culoare albă;Acesta este un TiglaAcesta este un TiglaAcesta este un TiglaAcesta este un TiglaAcesta este un Tigla
Acum, compilați foaia de stil, căutați în directorul rădăcină al proiectului și deschideți fișierul "styleguide.html" pe care îl găsiți într-un browser:
Hei presto, ghid de stil instant!
În momentul de față, pare puțin funky, deoarece a adus culoarea de fundal a corpului verde din foaia de stil. Ceea ce vrem este ca conținutul nostru să fie pe un fundal alb și putem obține ghidul de stil pentru a alege un alt cod din foaia de stil pentru a face acest lucru.
Zona centrală a acestui șablon de stil de stil folosește o secțiune element, deci de mai sus comentariul care vă descrie h1 element, adăugați acest cod:
secțiune padding: 1rem; fundal: alb;
Recompilați-vă codul, reîmprospătați ghidul de stil și veți vedea că folosim acum stilul pe care tocmai l-am adăugat secțiune elemente și arată astfel:
Acolo, mult mai bine.
Citiți mai multe despre ghidul postcss-style la: https://github.com/morishitter/postcss-style-guide
Rezumând tot ce am acoperit mai sus:
px unități, dar trebuie să le convertească automat rem unități în timpul procesării.În instalarea ulterioară și finală a acestui PostCSS Deep Dive veți învăța cum să deblocați unul dintre cele mai mari avantaje oferite de PostCSS; care este capacitatea de ao folosi pentru a crea orice tip de funcționalitate pe care o doriți.
Veți învăța cum să creați propriul plug-in de bază și, din această bază, sperăm că veți continua să faceți mai multe pluginuri pentru a putea apărea în viitor.
Ne vedem în tutorialul final!
