Share
Benvenuti alla quarta parte della nostra serie di tutorial sul tema dei fantasmi. Nel tutorial introduttivo hai appreso che ci sono due fasi per progettare un tema. Durante le puntate, abbiamo iniziato e completato ciò che abbiamo definito "il primo stadio" della creazione dei modelli del tema. Questa quarta parte della nostra serie ci porta nella fase successiva del tema design, ovvero lo styling.
In questa parte inizieremo a disegnare la nostra tipografia e costruiremo i nostri controlli di layout. Nella prossima parte continueremo il nostro styling bloccando la nostra combinazione di colori e ponendo le basi per la reattività del tema.
Nota: Questo tutorial presuppone una conoscenza di base del CSS.
Questo tutorial ti guiderà attraverso un approccio al design reattivo con cui potresti non avere familiarità. L'approccio garantisce che i progetti risponderanno a qualcosa di più delle risoluzioni comuni dei dispositivi specificamente mirate.
Invece, i disegni:
Questo è fatto da:
Accentsconagua
em o rem valori, che sono flessibili, e non valori di pixel, che sono rigidi, durante l'intero progetto.Prima di iniziare lo styling, aggiungeremo dei contenuti di test per i tag di intestazione al tuo sito Ghost in modo che tu possa vedere come appaiono i tuoi tag da H1 a H6.
Dovresti aggiungere ogni riga di intestazione una riga sotto l'altra per vedere come funzionano una volta posizionate vicine, e quindi anche aggiungere ciascuna intestazione con una riga di testo normale in mezzo per vedere come appaiono nel flusso di contenuto normale.
Aggiungi il seguente markup all'inizio del tuo ultimo post Ghost, (potresti dover aggiungere linee vuote tra ogni riga), quindi aggiornalo:
Sei in! Bello. Abbiamo preparato un post per presentarti all'editor Ghost e iniziare. Vai avanti e modifica questo post per iniziare e scopri come funziona! #Heading 1 ## Intestazione 2 ### Intestazione 3 #### Intestazione 4 ##### Intestazione 5 ###### Intestazione 6 Abbiamo messo insieme un post per introdurvi all'editor Ghost e ottenere hai iniziato tu. #Heading 1 Abbiamo preparato un post per presentarti all'editor Ghost e iniziare. ## Titolo 2 Abbiamo preparato un post per presentarti all'editor Ghost e iniziare. ### Intestazione 3 Abbiamo preparato un post per presentarti all'editor Ghost e iniziare. #### Intestazione 4 Abbiamo preparato un post per presentarti all'editor Ghost e iniziare. ##### Intestazione 5 Abbiamo creato un post per introdurvi all'editor Ghost e iniziare. ###### Titolo 6
Per aiutarti a utilizzare il flusso di lavoro più efficiente possibile con la creazione del tuo tema Ghost, ho messo insieme un piccolo pacchetto di sviluppo che ti consentirà di accedere ad alcuni strumenti davvero utili e di automatizzare un numero di attività per te. È disponibile nel download della fonte principale.
Invece di scrivere codice CSS grezzo, useremo MENO. Se sei nuovo su LESS puoi leggere tutto su http://lesscss.org/
GhostThemingPackage gestirà la compilazione del tuo codice LESS, oltre a ridimensionare il tuo CSS e scriverlo nella tua cartella dei temi.
Inoltre, scaricherà e renderà disponibile la libreria di mixin "LESSHat", una fantastica risorsa gratuita che rende la produzione di cross browser CSS3 facile e veloce: http://lesshat.com/
Inoltre, scaricherà "normalize.css", "Modernizr", oltre ad alcuni iframe javascript reattivi per te, e combina, minimizza e scrive tutto nel tuo tema.
Normalize.css standardizza gli elementi di visualizzazione di base su tutti i browser. Maggiori informazioni a riguardo su http://necolas.github.io/normalize.css/
Modernizr consente ai browser meno recenti di dare un senso al markup moderno. Maggiori informazioni su http://modernizr.com/
Hai solo bisogno di tre cose installate per utilizzare GhostThemingPackage:
Hai già installato Node.js mentre lo stai usando per eseguire Ghost, ma potresti dover installare Grunt e Bower se non li hai ancora sul tuo sistema.
Grunt.js è un task run javascript che useremo per automatizzare la compilazione di LESS e la combinazione CSS e minification. Se non hai Grunt sul tuo sistema, puoi installarlo molto facilmente tramite NPM (gestore dei pacchetti del nodo, una parte di node.js).
Per installare Grunt tramite NPM, apri un terminale (in qualsiasi posizione) ed esegui il seguente comando:
npm install -g grunt-cli
Assicurati di includere il flag "-g" che renderà Grunt disponibile globalmente nel tuo sistema, cioè in qualsiasi luogo in cui lavori.
Bower.io è un ottimo gestore di pacchetti che ti consente di accedere facilmente a tutti i diversi tipi di script e pacchetti CSS orientati al web design. Puoi leggere ulteriori informazioni su http://bower.io/
Come Grunt, Bower può anche essere installato facilmente tramite NPM.
Nota: Se Git non è già installato, dovrai farlo prima di installare Bower.
Le istruzioni di installazione per Git possono essere trovate qui: http://git-scm.com/book/en/Getting-Started-Installing-Git
Importante: Vedi le istruzioni nella parte inferiore della pagina di Bower riguardante l'installazione di Git su Windows: http://bower.io/#a-note-for-windows-users
Per installare Bower tramite NPM, apri un terminale (in qualsiasi posizione) ed esegui il seguente comando:
npm install -g bower
Anche in questo caso, assicurati di includere il flag "-g" in modo che Bower sia disponibile ovunque sul tuo sistema.
Dopo aver scaricato "GhostThemingPackage", estrailo da qualche parte facilmente accessibile, idealmente nella stessa directory root in cui si trova la tua cartella di installazione di Ghost.
Ad esempio, se la tua installazione di Ghost è a C: \ fantasma quindi estrai il pacchetto sul tuo C: guida pure, quindi finisce a C: \ GhostThemingPackage. (Non metterlo nella cartella di installazione di Ghost).
Dovresti vedere la seguente cartella e struttura di file all'interno:
Rinominare la cartella da "GhostThemingPackage" a "UberThemeStyles".
Apri un terminale all'interno della cartella "UberThemeStyles".
Esegui il comando installazione di npm.
Questo preleverà automaticamente i pacchetti necessari di Node.js che verranno utilizzati per compilare LESS e combinare e minimizzare CSS e JavaScript.
Vedrai un sacco di messaggi come questo, mentre NPM recupera tutto:
Attendere fino a quando tutti questi messaggi non sono stati arrestati e viene visualizzato di nuovo il prompt dei comandi.
Esegui il comando installazione di bower.
Proprio come il passaggio precedente, questo preleverà i pacchetti richiesti da Bower.io; LESShat, Modernizer e Normalize.css
Ancora una volta, vedrai una serie di messaggi apparire nel tuo terminale: aspetta finché non hanno finito e appare il prompt dei comandi.
Verifica di vedere ora questa struttura di cartelle nella cartella "UberThemeStyles":
Notare la presenza delle nuove cartelle "bower_components" e "node_modules".
Se alcune sottocartelle mancano da entrambe le cartelle, elimina quella cartella quindi esegui di nuovo il comando di installazione, ad es. installazione di npm per la cartella "node_modules" o installazione di bower per la cartella "bower_components".
Nell'editor di codice preferito, apri "Gruntfile.js" dalla directory principale della cartella "UberThemeStyles".
Questo è il file che faciliterà tutte le attività di automazione durante il processo di progettazione del tema. Per abilitarlo a lavorare dobbiamo solo dire dove hai installato Ghost e qual è il nome del tuo tema.
Nelle righe 62 e 63 individuare quanto segue:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourThemeName',
Se necessario, cambia '… /Fantasma/' per riflettere il percorso relativo alla tua installazione Ghost.
Non dovrai modificare l'impostazione se la cartella "UberThemeStyles" si trova nella stessa cartella radice della cartella di installazione di Ghost, e la tua cartella di installazione di Ghost è in realtà chiamata "Ghost".
Cambia "YourThemeName" in "UberTheme".
Salva il file.
Nota: Il tuo pacchetto tematico è ora installato e puoi ripetere il processo precedente in futuro per ottenere l'installazione per eventuali temi aggiuntivi che crei.
La prima cosa che faremo è ottenere gli stili da Normalize.css aggiunti al foglio di stile del tema. Ciò garantirà che il nostro tema venga visualizzato in modo standardizzato su tutti i browser.
Quindi imposteremo una larghezza preliminare per i tuoi contenuti, quindi sarà più semplice valutare le scelte tipografiche e aggiungeremo i tuoi stili di tipografia fondamentali.
Nel tuo terminale, (sempre nella cartella "UberThemeStyles"), esegui il comando grunt cssmin.
Questo prenderà il file "normalize.css" dalla cartella "bower_components / normalize-css", lo comprimerà e lo scriverà nel file style.css del tuo tema.
Se avessi successo dovresti vedere questo nel tuo terminale:
Aggiorna il tuo front-end Ghost. Puoi verificare che "normalize.css" sia stato aggiunto, se lo vedi
Nota: Mentre procediamo, apporteremo alcune modifiche al file normalize.css.
Perché creeremo molti dei nostri stili, vogliamo evitare stili duplicati per elementi come corpo e h1 poiché non è necessario un sovraccarico per il browser, quindi trapianteremo alcuni stili da "normalize.css" nei nostri file LESS personalizzati.
Prima di scegliere i tipi di carattere che useremo nel nostro tema, imposteremo una larghezza preliminare per il contenuto e aggiungeremo alcune impostazioni tipografiche di base. Sarà molto più facile provare e decidere sui font quando sono in uno spazio più ristretto e impostare la dimensione del font che sarà probabilmente utilizzata in.
Per fare questo, inizieremo a modificare i tuoi file LESS.
Prima di iniziare a modificare LESS, se sei nuovo, prenditi un momento per familiarizzare con il suo sistema di:
A questo punto non hai bisogno di una comprensione approfondita, dovrebbe essere sufficiente solo per leggere la sezione di apertura sulla homepage di LESS, cioè ciascuna delle sezioni con titoli corrispondenti all'elenco dei punti elenco sopra.
Per vedere le tue modifiche al codice LESS riflesse sul front-end del tuo sito, attiveremo la compilazione automatica dei LESS e la scrittura di CSS nel tuo tema.
Nel tuo terminale, (sempre nella cartella "UberThemeStyles", esegui il comando orologio da grugnito.
Questo avvierà il task "watch", in base al quale i tuoi file LESS e il tuo file Normalize.css verranno guardati per eventuali modifiche. Ogni volta che vengono rilevate modifiche ai file, LESS verrà automaticamente compilato e i tuoi CSS saranno tutti combinati, miniati e scritti nel file "style.css" del tuo tema.
Nota: Quando si desidera interrompere il task "watch", tornare al terminale e premere CTRL + C. Quando richiesto digitare y e quindi premere ACCEDERE.
Nell'editor di codice preferito, apri il file "layout.less" dalla cartella "UberThemeStyles> LESS".
Aggiungi il seguente codice quindi salva:
.wrapper_uber width: 100%; larghezza massima: 40em; margine: 0 auto;
Questo codice fa alcune cose:
larghezza proprietà ad un valore esplicito. Anziché, larghezza è impostato su 100%, quindi riempirà l'intera finestra di qualsiasi dispositivo con una risoluzione inferiore a 40 ms.larghezza massima proprietà per limitare il wrapper a non maggiore di 40ems ampio su risoluzioni più grandi.em valore, non a px valore.Nota: Sistemeremo questa larghezza in un secondo momento per una leggibilità ottimale una volta che avremo scelto i nostri font e quindi sapremo quanto saranno ampie le nostre lettere. Il valore di 40ems è solo segnaposto.
Aggiorna il tuo front-end. Ora dovrebbe essere ristretto in questo modo:
Apri il file "normalize.css" dalla cartella "UberThemeStyles> bower_components> normalize-css" per la modifica.
Commenta o elimina il corpo, h1 e tutto un stili, (riga da 76 a 121), perché stiamo andando a scrivere il nostro e non vogliamo il sovraccarico di dichiarazioni duplicate.
Apri il file "typography.less" dalla cartella "UberThemeStyles> LESS" per la modifica.
Sostituisci tutto il codice in esso con il seguente codice, quindi salva:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; line-height: 1.313em; // ** // Stili // ** body margine: 0; famiglia di caratteri: @default_font; line-height: @golden + 0em; // imposta l'altezza della linea regolare sulla sezione aurea a sfondo: trasparente; a: link, a: visited a: focus outline: thin punteggiato; a: active, a: hover outline: 0; // Scala tipografica classica: se la scala della dimensione totale predefinita di 16px sarebbe: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; font-size: 3em; margine: 0,563em 0; h2 .HeaderFont; font-size: 2.25em; margine: 0,625em 0; h3 .HeaderFont; font-size: 1.5em; margine: 1,313em 0; h4 .HeaderFont; font-size: 1.313em; margine: 1,313em 0; h5 .HeaderFont; font-size: 1.125em; margine: 1,313em 0; h6 .HeaderFont; dimensione carattere: 1em; margine: 0,75em 0;
C'è un bel po 'di codice che abbiamo aggiunto tutto in una volta lì. Lascia che ti spieghi cosa sta succedendo.
mixins
La prima cosa che vedrai in cima è il mixin .HeaderFont (). Poiché utilizzeremo la stessa famiglia di caratteri, il peso del carattere e l'altezza della linea per tutti i nostri tag di intestazione, abbiamo inserito tutte le regole per tali proprietà in un singolo mix. Se osservi lo stile per ogni tag di titolo, vedrai il .HeaderFont () mixin chiamato in prima linea.
In questo modo possiamo aggiornare il mixin come richiesto e tutti gli stili del tag di intestazione saranno automaticamente aggiornati.
variabili
Noterai anche l'uso di alcune variabili nel codice, ad es. @header_font, @default_font e @golden.
Il valore di ciascuna di queste variabili è impostato nel file "variables.less" nella cartella "UberThemeStyles> LESS". Questo file è accessibile per primo durante la compilazione del tuo codice LESS, il che significa che le variabili che contiene possono essere utilizzate in uno qualsiasi degli altri tuoi file LESS.
Usiamo le variabili @header_font e @default_font per impostare il nome dei caratteri da utilizzare nel tuo tema in modo che diventi molto facile cambiare da una scelta all'altra mentre provi a usare i font.
Il @golden variabile rappresenta un valore di 1.618, la sezione aurea. Questo numero è stato usato fin dai tempi degli antichi greci per creare bellissimi layout in qualsiasi cosa, dall'arte all'architettura, e lo useremo pesantemente durante il design.
Aggiungere unità alle variabili
È una buona pratica in MENO definire le variabili numeriche senza unità allegate. Questo per consentire all'utente di eseguire l'aritmetica con i loro valori.
Ad esempio, con il mio @golden variabile impostata come 1.618 Posso fare cose come moltiplicare quel valore, dimezzarlo e così via. Tuttavia, se avessi impostato su 1.618em, avrei incontrato dei problemi con alcuni calcoli che avrei voluto eseguire.
Quindi è sempre meglio impostare le variabili solo come numeri, quindi collegare le unità all'interno degli stili o dei mixaggi effettivi.
Puoi aggiungere unità nel modo seguente:
@variable + 0em
@variable + 0rem
@variabile + 0%
Quindi, in poche parole, basta aggiungere l'unità che si desidera utilizzare come se si stesse eseguendo un calcolo di addizione, con un valore pari a zero impostato su quell'unità.
Scala tipografica
Le dimensioni dei caratteri sono tutte impostate su una scala tipografica classica, convertita in em invece di px valore, in base alla dimensione del carattere predefinito più comune di 16px.
In questo modo otteniamo l'aspetto estetico e la leggibilità della scala, ma se un venditore o un utente cambia la dimensione del carattere predefinita a qualcosa di diverso da 16px, l'intera scala si sposterà proporzionalmente.
Margini dei tag di intestazione
Con un standardizzato em in base all'altezza delle linee per tutte le intestazioni, è importante regolare i margini per ciascuna di esse in modo che le intestazioni risultino gradevoli e leggibili se posizionate una sotto l'altra, nonché quando inserite nel flusso di testo normale.
I valori utilizzati nei margini sono quelli che ho trovato personalmente il migliore per ogni tag di intestazione. Vedrai l'effetto di queste impostazioni nel passaggio successivo.
Aggiorna il tuo front-end. Ora dovrebbe assomigliare a questo:
Ora selezioneremo i caratteri che verranno utilizzati per l'intestazione e il testo normale. Creeremo il resto del layout e del design del tema attorno a queste selezioni di font.
In questo approccio non iniziamo con un mockup di Photoshop, ma dovresti comunque avere un'idea essenziale del tipo di stile generale che desideri. Vado per uno schema di colori tenui e leggeri, con uno stile piatto ma leggermente strutturato, quindi voglio che i tipi di caratteri relativamente leggeri e leggeri siano compatibili con.
Vai su Google Fonts e scegli un font per le tue intestazioni, oltre a un font per il tuo testo normale, assicurandoti di controllare in che modo guardano alcune diverse dimensioni e, se disponibili, pesi: http://www.google.com/ fonts /
Ho finito per scegliere Oxygen per il testo dell'intestazione e Open Sans per il testo normale.
Una volta selezionati i tuoi caratteri, puoi aggiungerli al tuo tema.
Apri il file "default.hbs" dalla cartella principale del tuo tema.
Sotto il ! Stili commentare e sopra il link al tuo foglio di stile, aggiungi la seguente riga e salva:
Nota: Per creare un URL per qualsiasi carattere / i Google:
http://fonts.googleapis.com/css?family=Font+Name + segni| simbolo: alla fine del nome del font, seguito da valori separati da virgola e.g. : 300,400,700,300italic, 400italic, 700italic Aprire il file "variables.less" dalla cartella "UberThemeStyles> LESS" per la modifica.
Trova queste due linee:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Modificali per leggere:
@default_font: 'Open Sans', Arial, Helvetica, sans-serif; @header_font: 'Oxygen', Arial, Helvetica, sans-serif;
Nel tuo file "typography.less", aggiungi un font-weight di 400 al tuo .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; line-height: 1.313em; font-weight: 400;
Anche nel tuo file "typography.less", aggiungi un font-weight di 300 al tuo corpo stile:
body margin: 0; famiglia di caratteri: @default_font; line-height: @golden + 0em; // imposta l'altezza della linea regolare sul peso del font golden ratio: 300;
Nota: Questi erano i pesi che ritenevo migliori per questi caratteri particolari, e per lo stile leggero che sto cercando.
Aggiorna il tuo front-end. Ora dovresti vedere le tue scelte di carattere sul posto:
Prima di passare alla parte finale della nostra serie di tutorial, abbiamo uno o due dettagli di stile di cui occuparci. Nella prossima puntata vedremo i colori e definiremo alcune impostazioni di base del default.
