Share
In questa serie abbiamo esaminato diverse categorie di plug-in PostCSS, offrendo tutti i diversi vantaggi per lo sviluppo dei CSS. Ma alcuni dei migliori plugin PostCSS non rientrano nelle categorie che abbiamo trattato nelle nostre precedenti serie.
In questo tutorial imparerai a conoscere cinque di questi "gadget vari". Copriremo:
Cominciamo!
Come sempre, la prima cosa che devi fare è impostare il tuo progetto in modo che utilizzi Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini, quindi dovresti trovare un po 'più semplice lavorare con.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
rispettivamente.
Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota. Quindi con un terminale o un prompt dei comandi puntato verso la cartella esegui il comando installazione di npm.
Ora dovremo installare cinque plug-in nel tuo progetto. Sia che tu stia utilizzando Gulp o Grunt, esegui il seguente comando all'interno della cartella del progetto per installare i plug-in che utilizzeremo:
npm installa perso postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev
Oltre a questi cinque utilizzeremo anche rtlcss, ma poiché funziona in modo un po 'diverso rispetto agli altri plugin PostCSS, lo useremo tramite i relativi plugin Gulp o Grunt.
Se usi Gulp, installa gulp-rtlcss con il comando:
npm install gulp-rtlcss gulp-rename --save-dev
E se usi Grunt installa grunt-rtlcss con il comando:
installa npm grunt-rtlcss --save-dev
Ora siamo pronti per caricare i plugin nel tuo progetto.
Se stai usando Gulp, aggiungi queste variabili sotto le variabili già presenti nel file:
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');Ora aggiungi ognuno di questi nuovi nomi di variabili nel tuo processori array:
processori var = [lost, // colorblind, pxtorem, styleGuide];
Nota: daltonico è commentato, che sarà spiegato più avanti.
Fai un rapido test per verificare che tutto funzioni eseguendo il comando gulp css quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:
processori: [require ('lost') (), // require ('postcss-colorblind') (), require ('postcss-pxtorem') (), require ('postcss-style-guide') ()]Nota: require ( 'postcss-Colorblind') (), è commentato, che sarà spiegato più avanti.
Fai un rapido test per verificare che tutto funzioni eseguendo il comando grunt postcss quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Lost è un sistema di generazione della griglia basato interamente PostCSS di Cory Simmons, il creatore di Jeet, un altro sistema di griglie di grande successo scritto in Stylus. Ha una lunga lista di caratteristiche impressionanti, tuttavia la sua implementazione è molto semplice.
Inizia creando un file denominato "index.html" nella cartella "dest". In questo file imposteremo un layout di griglia di base. Aggiungi il seguente codice ad esso:
Area principale
Sidebar
Quindi aggiungi questo codice al tuo "src / style.css" per configurare un layout di griglia a due colonne di base, con una colonna di area principale e una colonna di barre laterali:
@lost gutter 1.618rem; .row lost-center: 75rem; .main lost-column: 3/5; .sidebar lost-column: 2/5;
Analizziamo ciò che abbiamo fatto qui.
Per prima cosa, abbiamo usato a @perso at-rule per impostare il nostro valore per una delle opzioni di Lost: dimensione del gutter. Di default sono i grondaie (spazi tra le colonne) 30px. Mi piace sempre usare 1.618rem per la spaziatura nei disegni, così ho impostato quella per essere la nuova dimensione della grondaia con la linea @lost gutter 1.618rem;.
Successivamente, abbiamo impostato a .riga classe che avvolgeremo le nostre colonne. Questo richiede solo l'utilizzo della proprietà lost-Centro e specificando una larghezza per la riga. Il plugin si occuperà di impostare a larghezza massima sulla classe, centrandola e liberandola.
Dopo ciò, nel .principale e .sidebar classi, abbiamo creato le nostre colonne.
Lost non ti limita a lavorare con un numero predeterminato di colonne come dodici o sedici; puoi avere qualsiasi numero di colonne che vuoi. Le larghezze delle colonne sono determinate utilizzando la proprietà lost-colonna e impostando una frazione come valore. Nel nostro codice il .principale la classe usa un'impostazione di 3/5 quindi occuperà 3 colonne su 5 e il .sidebar usi 2/5 quindi richiederà 2 colonne su 5.
Compila il tuo file e nel tuo file "dest / style.css" dovresti vedere questo codice:
.riga * zoom: 1; larghezza massima: 75rem; margin-left: auto; margin-right: auto; .row: before content: "; display: table; .row: after content:"; display: tabella; chiaro: entrambi; .main width: calc (99,99% * 3/5 - (1,618rem - 1,618rem * 3/5)); .main: nth-child (n) float: left; margin-right: 1.618rem; chiaro: nessuno; .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; chiaro: nessuno; .sidebar: last-child margin-right: 0; .sidebar: nth-child (5n) margin-right: 0; .sidebar: nth-child (5n + 1) clear: left;
E se visualizzato in un browser, il tuo file "dest / index.html" dovrebbe ora presentare un layout a due colonne come questo:
È un po 'difficile vedere esattamente cosa sta succedendo con la nostra griglia qui, che è la ragione che fornisce anche Lost lost-utility: edit; per evidenziare la tua griglia per una facile visualizzazione durante lo sviluppo.
Aggiungi questo a ciascuna delle classi che abbiamo creato finora:
.row lost-center: 75rem; lost-utility: edit; .main lost-column: 3/5; lost-utility: edit; .sidebar lost-column: 2/5; lost-utility: edit;
Ora quando ricompili e aggiorni la tua pagina dovresti vedere la tua griglia evidenziata in questo modo:
Rendiamolo un po 'più chiaro per vedere di nuovo con uno stile in più (che ci aiuterà anche nelle sezioni successive di questo tutorial). Aggiorna il tuo file "src / style.css" al seguente, aggiungendo un paio di extra come il padding all'interno delle colonne e alcuni colori di sfondo e di testo:
@lost gutter 1.618rem; * ridimensionamento della scatola: border-box; html, body height: 100%; margine: 0; font-family: "Open Sans"; html padding: 0; body padding: 1.618rem; sfondo: # 16a085; .row lost-center: 75rem; .main, .sidebar padding: 1.618rem; altezza minima: 500 px; .main lost-column: 3/5; sfondo: bianco; colore: # 232323; .sidebar lost-column: 2/5; sfondo: # 2c3e50; colore bianco;
Compila nuovamente il tuo CSS e ricarica la tua pagina e ora dovresti avere un classico layout a due colonne come questo:
Quello che abbiamo coperto qui sfiora la superficie di ciò che può essere fatto con Lost, quindi assicuratevi di leggere su tutte le altre funzionalità su: https://github.com/corysimmons/lost
Daltonismo colpisce una parte più ampia dei visitatori del tuo sito di quanto potresti realizzare. Ad esempio, il tipo più comune di daltonismo è la deuteranomalia, che colpisce il 6% di tutti i maschi e lo 0,4% delle femmine. Per dirla in prospettiva, si stima che IE9 e IE10 combinati siano utilizzati da circa il 4% di tutto il traffico web. Si potrebbe suggerire che se possiamo dedicare una quantità significativa di tempo a supportare specifici browser, possiamo mettere una pari misura di tempo nel supportare le persone.
Il plugin postcss-colorblind di Brian Holt aiuta incommensurabilmente a valutare quanto sia accessibile un design per le persone con varie forme di daltonismo, in quanto ti permette di vedere da te come sarebbero le tue combinazioni di colori se avessi la stessa percezione visiva. Ti permette di generare versioni del tuo foglio di stile che simulano otto diversi tipi di daltonismo. Vediamo come puoi usarlo.
Innanzitutto, aggiungeremo alcuni colori extra al nostro design fino a ora per aiutarci a vedere più chiaramente l'effetto dei diversi fogli di stile che stiamo per generare. Aggiungiamo cinque tessere "stile metro", aggiungendo il seguente codice html sotto la riga già presente nel nostro file "dest / index.htm":
Questa è una tesseraQuesta è una tesseraQuesta è una tesseraQuesta è una tesseraQuesta è una tessera
Ora aggiungi il seguente codice al tuo file "src / style.css" per modellare queste tessere con cinque colori diversi:
.row margin-bottom: 1.618rem; .tile lost-column: 1/5; imbottitura: 3.75rem 1.618rem; allineamento del testo: centro; font-size: 1.25rem; colore bianco; .tile: nth-of-type (1) background: # f39c12; .tile: nth-of-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;
Dopo la compilazione, dovresti vedere che il tuo file è simile a questo in un browser:
Potresti aver notato che quando impostiamo il nostro processori matrice precedente la voce per daltonico è stato commentato Questo perché non appena il plugin è attivo applicherà la simulazione del colorblind al tuo foglio di stile, quindi non vuoi accenderlo finché non sei pronto per usarlo. Scompattalo nel processori array ora.
Per simulare uno qualsiasi degli otto tipi di daltonismo, passa l'opzione metodo per questo plugin nel tuo Gulpfile o Gruntfile, insieme al nome del tipo di perspicacia che vuoi controllare.
Ad esempio, per simulare deuteranomaly impostare questa opzione:
/ * Gulpfile * / colorblind (method: 'deuteranomaly'), / * Gruntfile * / require ('postcss-colorblind') (metodo: 'deuteranomaly')Ora ricompila il tuo foglio di stile e aggiorna la tua pagina e vedrai il tuo design come una persona con deuteranomalia:
Noterai che i colori appaiono notevolmente differenti. Una persona con deuteranomalia vede il rosso e il verde in modo diverso, quindi mentre noterai che il blu è quasi lo stesso, i rossi e i verdi sono molto diversi.
Per visualizzare la protanopia imposta questa opzione:
/ * Gulpfile * / colorblind (method: 'protanopia'), / * Gruntfile * / require ('postcss-colorblind') (metodo: 'protanopia')Ricompila il tuo foglio di stile e ora vedrai questo:
Una persona con protanopia essenzialmente non vede affatto il rosso e vede il verde in un modo diverso. Noterai di nuovo che i forti azzurri non sono troppo intensi, ma il viola è diventato blu puro, e i colori rimanenti sono diventati variazioni degli stessi colori brunastri giallastri. È diventato molto difficile distinguere tra il rosso e le due piastrelle di colore arancione.
Questa capacità di generare tutti i diversi tipi di simulazioni daltoniche è incredibilmente perspicace e ci aiuta a garantire che gli schemi di colori che abbiamo scelto non si basino sulla percezione di una particolare tonalità e siano quindi accessibili a tutti.
Maggiori informazioni su postcss-colorblind su: https://github.com/btholt/postcss-colorblind
In quasi tutti i design, ci sono ottime ragioni per il rem unità per svolgere un ruolo di primo piano. Tuttavia è difficile pensare in rem unità, e molto più facile da pensare px unità durante la creazione di layout. Il plugin postcss-pxtorem aiuta con questo speedbump, convertendo automaticamente px unità a rem unità.
Il plug-in utilizza una lista bianca di proprietà a cui si applica, quindi per impostazione predefinita px le unità saranno convertite in rem se usato su:
È possibile aggiungere ulteriori proprietà a questa lista bianca impostando a prop_white_list opzione. Aggiorna il tuo Gulpfile o Gruntfile per aggiungere il larghezza proprietà in questo modo:
/ * 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 '])),Ora aggiungi il seguente codice al tuo file "src / style.css" in modo che possiamo testare il processo di conversione:
.convert_this width: 500px; font-size: 18px;
Compila il tuo file e nel tuo file "dest / style.css" dovresti vedere il risultato rem valori:
.convert_this width: 31.25rem; font-size: 1.125rem;
Maggiori informazioni su postcss-pxtorem su: https://github.com/cuth/postcss-pxtorem
Se ti stai rivolgendo a un pubblico globale, potresti dover fornire supporto per script letti da destra a sinistra anziché da sinistra a destra, come ad esempio l'arabo e l'ebraico. Quando l'orientamento dello script viene capovolto, anche il layout del tuo sito deve essere modificato in modo che l'intero disegno abbia un senso per coloro che guardano prima il lato destro dello schermo.
Il plugin rtlcss di Mohammad Younes semplifica notevolmente il processo di creazione di un layout da destra a sinistra, in quanto può eseguire automaticamente la scansione del foglio di stile e convertirne l'orientamento, scambiando la parola "sinistra" con "destra" e viceversa.
Questo plugin funziona in modo un po 'diverso rispetto agli altri plugin PostCSS, in quanto non possiamo aggiungerlo al nostro processori array. Invece, durante la nostra installazione del progetto abbiamo installato i plugin Gulp e Grunt per rtlcss, e abbiamo intenzione di impostare attività separate per eseguirlo.
Se usi Gulp, aggiungi questo codice al tuo Gulpfile:
gulp.task ('rtl', function () return gulp.src ('./ dest / style.css') .pipe (rtlcss ()) .pipe (rinomina (suffisso: '-rtl')). pipe (gulp.dest ('./ dest')););Se usi Grunt, aggiungi questa linea dopo la tua esistente grunt.loadNpmTasks linea:
grunt.loadNpmTasks ( 'grunt-rtlcss');
Quindi aggiungi una virgola , dopo il tuo postcss compito e incollare in questo nuovo rtlcss compito:
rtlcss: 'default': dest: 'dest / style-rtl.css', src: 'dest / style.css'
Ora, se usi Gulp, esegui il comando gulp rtl, e se si usa Grunt, eseguire il comando grunt rtlcss per generare un foglio di stile da destra a sinistra denominato "style-rtl.css" nella cartella "dest".
Modifica il tuo file "dest / index.html" per caricare "style-rtl.css" invece di "style.css", aggiorna il tuo sito e dovresti vedere che il tuo layout è stato sfogliato:
Noterai che il testo è ancora allineato, ma questo può essere facilmente risolto aggiungendo semplicemente allineamento del testo: a sinistra; nel tuo foglio di stile predefinito, su cui rtlcss si convertirà allineamento del testo: giusto;.
Maggiori informazioni su rtlcss e le sue controparti Gulp e Grunt su:
Il plugin per la guida in stile postcss è uno strumento fantastico creato da Masaaki Morishita. Ti consente di generare automaticamente una styleguide in base al tuo foglio di stile. Tutto quello che devi fare è aggiungere alcuni commenti al tuo CSS, e quei commenti saranno analizzati come Markdown e usati per popolare la tua styleguide.
La prima cosa che faremo è configurare un paio di opzioni per il nostro styleguide. Imposteremo il nome del nostro progetto in modo che possa essere visualizzato nell'intestazione di styleguide e utilizzeremo anche un tema personalizzato denominato 1colonna.
Per installare il tema personalizzato che utilizzeremo nel tuo progetto, esegui il comando:
npm installa psg-theme-1column --save-dev
Ora aggiorna il tuo Gulpfile o Gruntfile per passare a nome e tema opzioni come segue:
/ * Gulpfile * / styleGuide (nome: 'Auto Style Guide', tema: '1colonna') / * Gruntfile * / require ('postcss-style-guide') (nome: 'Auto Style Guide', tema: '1colonna')Il modo in cui postcss-styleguide funziona è che cercherà i tuoi commenti nel tuo foglio di stile e trasformerà ognuno di essi in una voce styleguide. Assumerà che ogni commento si riferisca al CSS che lo segue, fino a un altro commento o alla fine del documento.
Per questo motivo, qualsiasi CSS che vuoi mostrare nella tua styleguide dovrebbe essere spostato nella parte inferiore del tuo foglio di stile. Avremo le nostre tessere colorate apparire nella styleguide, così come un h1 elemento, quindi avremo bisogno che entrambi siano alla fine del nostro documento.
Inizia spostando tutte le classi che influenzano le nostre tessere fino alla fine del tuo foglio di stile; quello è il .piastrella classe e il cinque .mattonelle: nth-of-type () stili. Quindi aggiungi anche un piccolo codice da controllare h1 elementi in modo che il fondo del tuo foglio di stile assomigli a questo (il .mattonelle: nth-of-type () gli stili non sono indicati per risparmiare spazio):
h1 font-size: 42px; .tile lost-column: 1/5; imbottitura: 3.75rem 1.618rem; allineamento del testo: centro; font-size: 1.25rem; colore bianco;
Ora possiamo aggiungere alcuni commenti per descrivere questi stili. Qualsiasi html aggiunto in questi commenti sarà reso come html nella styleguide, e il CSS che segue un commento apparirà in una finestra di visualizzazione.
Aggiungi alcuni commenti al tuo foglio di stile che descrive il h1 stile e il .piastrella classe, e includendo alcuni esempi di codice HTML, così si finisce con il seguente:
/ * Questo è lo stile h1Titolo 1
* / h1 font-size: 42px; / * Questi usano la classe .tile* / .tile lost-column: 1/5; imbottitura: 3.75rem 1.618rem; allineamento del testo: centro; font-size: 1.25rem; colore bianco;Questa è una tesseraQuesta è una tesseraQuesta è una tesseraQuesta è una tesseraQuesta è una tessera
Ora compila il tuo foglio di stile, cerca nella cartella principale del tuo progetto e apri il file "styleguide.html" che trovi lì in un browser:
Ehi presto, styleguide istantaneo!
Al momento sembra un po 'strano perché ha raccolto il colore di sfondo del corpo verde dal nostro foglio di stile. Quello che vogliamo è che i nostri contenuti siano su uno sfondo bianco, e possiamo ottenere lo styleguide per prendere qualche altro codice dal nostro foglio di stile per farlo accadere.
L'area centrale di questo modello di styleguide utilizza a sezione elemento, quindi sopra il commento che descrive il tuo h1 elemento, aggiungi questo codice:
section padding: 1rem; sfondo: bianco;
Ricompila il codice, aggiorna il tuo styleguide e vedrai che ora sta facendo uso dello stile che abbiamo appena aggiunto sezione elementi e assomiglia a questo:
Lì, molto meglio.
Maggiori informazioni su postcss-style-guide su: https://github.com/morishitter/postcss-style-guide
Riassumendo tutto ciò che abbiamo visto sopra:
px unità ma li hanno convertiti automaticamente in rem unità durante l'elaborazione.Nella prossima e definitiva installazione di questo Deep Disc Deep PostCSS imparerai come sbloccare uno dei maggiori vantaggi offerti da PostCSS; questa è la capacità di usarlo per creare qualsiasi tipo di funzionalità che desideri.
Imparerai come creare il tuo plug-in di base e, da quel punto, spero che tu possa fare molti altri plugin per qualsiasi necessità possa sorgere in futuro.
Ci vediamo nel tutorial finale!
