Share
Bine ați venit în cea de-a patra parte a seriei Tutorial de design temă Ghost. În tutorialul introductiv, ați aflat că există două etape pentru proiectarea unei teme. În timpul tranșelor de acolo am început și am completat ceea ce am denumit "prima etapă" de a crea șabloanele temei. Această a patra parte a seriei noastre ne duce în următoarea etapă de design tematic, și anume styling.
In aceasta parte vom incepe sa modelam tipografia si sa construim controalele de aspect. În partea următoare vom continua stilul nostru, blocând schema noastră de culori și stabilind fundația pentru reacția tematică.
Notă: Acest tutorial presupune o cunoaștere de bază a CSS.
Acest tutorial vă va duce printr-o abordare a designului receptiv, cu care nu vă puteți familiariza. Abordarea asigură că modelele vor răspunde mai mult decât rezoluțiile comune ale dispozitivului.
În schimb, desenele vor:
Aceasta se face prin:
Accentsconagua
em sau rem valori, care sunt flexibile, și nu valori pixel, care sunt inflexibile, pe tot parcursul designului.Înainte de a începe să aplicăm stilul, vom adăuga un anumit conținut de testare în etichetă în site-ul dvs. Ghost, astfel încât să puteți vedea cum se vor afișa etichetele dvs. H1 până la H6.
Ar trebui să adăugați fiecare marcă de poziție cu o linie sub cealaltă pentru a vedea cum funcționează atunci când sunt plasate aproape împreună și apoi adăugați fiecare poziție cu o linie de text obișnuit între ele pentru a vedea cum arată în fluxul de conținut normal.
Adăugați următoarea marcaj în partea de sus a celei mai recente postări Ghost (este posibil să fie nevoie să adăugați linii goale între fiecare linie), apoi să o actualizați:
Esti in! Frumos. Am creat un mic post pentru a vă prezenta în editorul Ghost și pentru a vă începe. Continuați și editați această postare pentru a merge și a afla cum funcționează toate! #Heading 1 ## Rubrică 2 ### Rubrică 3 #### Rubrică 4 ##### Rubrică 5 ###### Rubrică 6 Am pus un mic post pentru a vă prezenta editorul Ghost și pentru a obține Ai început. #Heading 1 Am pus un mic post pentru a vă prezenta editorul Ghost și pentru a vă începe. ## Rubrică 2 Am pus un mic post pentru a vă prezenta în editorul Ghost și pentru a începe să începeți. ### Rubrica 3 Am pus un mic post pentru a vă prezenta editorul Ghost și pentru a vă începe. #### Rubrica 4 Am pus un mic post pentru a vă prezenta în editorul Ghost și pentru a vă începe. ##### Poziția 5 Am pus un mic post pentru a vă prezenta în editorul Ghost și pentru a vă începe. ###### Titlul 6
Pentru a vă ajuta să utilizați fluxul de lucru cel mai eficient cu crearea temelor Ghost, am creat un mic pachet de dezvoltare pentru dvs., care vă va oferi acces la unele instrumente cu adevărat la îndemână și vă automatizează o serie de sarcini. Este disponibil în cadrul sursei principale de descărcare.
În loc să codificăm în CSS brut vom folosi LESS. Dacă sunteți nou la LESS puteți citi totul despre el la http://lesscss.org/
GhostThemingPackage se va ocupa de compilarea codului dvs. LESS, precum și de micșorarea CSS-ului și scrierea acestuia în dosarul tematic.
De asemenea, va descărca și va pune la dispoziție biblioteca de mixe "LESSHat", o resursă gratuită fantastică, care face ca producția de browser CSS3 să fie rapidă și ușoară: http://lesshat.com/
În plus, va descărca "normalize.css", "Modernizr", plus un javascript iframe receptiv pentru tine, și combina, minify și scrie totul în tema ta.
Normalize.css standardizează elementele de bază de afișare în toate browserele. Citiți mai multe despre el la http://necolas.github.io/normalize.css/
Modernizr permite browserelor mai vechi să aibă sens de marcare modernă. Citiți mai multe despre el la http://modernizr.com/
Aveți nevoie doar de trei lucruri instalate pentru a utiliza GhostThemingPackage:
Aveți deja Node.js instalat așa cum îl utilizați pentru a rula Ghost, dar este posibil să fie necesar să instalați Grunt și Bower dacă nu aveți încă pe sistem.
Grunt.js este un alergator de sarcină javascript pe care îl vom folosi pentru a automatiza compilarea LESS și combinația și minificarea CSS. Dacă nu aveți Grunt pe sistemul dvs., încă îl puteți instala cu ușurință prin intermediul NPM (manager de pachet de noduri, o parte a node.js).
Pentru a instala Grunt prin NPM deschide un terminal (în orice locație) și rulați următoarea comandă:
npm instalare -g grunt-cli
Asigurați-vă că includeți pavilionul "-g", astfel încât Grunt să fie disponibil la nivel global în sistemul dvs., și anume la orice locație în care lucrați.
Bower.io este un manager de pachete excelent, care vă oferă acces ușor la toate tipurile de script-uri orientate pe designul web și pachetele CSS. Puteți citi mai multe despre el la http://bower.io/
Ca și Grunt, Bower poate fi instalat foarte ușor și prin intermediul NPM.
Notă: Dacă nu aveți deja instalat Git, va trebui să faceți acest lucru înainte de a instala bower.
Instrucțiunile de instalare pentru Git pot fi găsite aici: http://git-scm.com/book/en/Getting-Started-Installing-Git
Important: Consultați instrucțiunile de lângă partea de jos a paginii Bower privind instalarea Git pe Windows: http://bower.io/#a-note-for-windows-users
Pentru a instala Bower prin NPM, deschideți un terminal (în orice locație) și executați următoarea comandă:
npm install -g bower
Din nou, asigurați-vă că includeți pavilionul "-g" astfel încât Bower vă va fi disponibil oriunde în sistem.
După ce descărcați "GhostThemingPackage", extrageți-l undeva ușor accesibil, în mod ideal în același director rădăcină în folderul dvs. de instalare Ghost se află în.
De exemplu, dacă instalarea Ghost este la C: \ fantomă apoi extrageți pachetul către dvs. C: de asemenea, așa că se termină la C: \ GhostThemingPackage. (Nu o puneți în dosarul de instalare Ghost).
Ar trebui să vedeți următorul dosar și structura fișierului în interiorul:
Redenumiți folderul de la "GhostThemingPackage" la "UberThemeStyles".
Deschideți un terminal din interiorul directorului "UberThemeStyles".
Rulați comanda npm install.
Aceasta va prelua automat pachetele necesare Node.js care vor fi utilizate pentru compilarea LESS și combinarea și minimizarea CSS și JavaScript.
Veți vedea o mulțime de mesaje ca aceasta în timp ce NPM aduce totul:
Așteptați până când toate aceste mesaje s-au oprit și veți vedea din nou promptul de comandă.
Rulați comanda bower install.
La fel ca pasul anterior, aceasta va prelua pachetele necesare de la Bower.io; Mai mult, Modernizator și Normalize.css
Din nou, veți vedea o serie de mesaje în terminalul dvs.: așteptați până când acestea au terminat și apare promptul de comandă.
Verificați că acum vedeți această structură de directoare în folderul "UberThemeStyles":
Rețineți prezența noilor foldere "bower_components" și "node_modules".
Dacă lipsește vreun subfolder din oricare dintre foldere, ștergeți acel director apoi executați din nou comanda de instalare, adică. npm install pentru directorul "node_modules" sau bower install pentru dosarul "bower_components".
În editorul de cod preferat, deschideți "Gruntfile.js" din directorul rădăcină al dosarului "UberThemeStyles".
Acesta este fișierul care va facilita toate sarcinile de automatizare în timpul procesului de styling temă. Pentru a le permite să funcționeze trebuie doar să le spunem unde ați instalat Ghost și care este numele temei dvs..
Pe linii 62 și 63 localizați următoarele:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourTheName',
Dacă este necesar, schimbați "... / Ghost /" pentru a reflecta calea relativă către instalarea Ghost.
Nu va trebui să modificați setarea dacă folderul "UberThemeStyles" este în același director rădăcină ca și folderul de instalare Ghost, și folderul dvs. de instalare Ghost este de fapt numit "Ghost".
Schimbați "YourThemeName" la "UberTheme".
Salvați fișierul.
Notă: Pachetul dvs. tematic este acum instalat și puteți repeta procesul de mai sus pentru a obține configurare pentru orice temă suplimentară pe care o creați.
Primul lucru pe care îl vom face este să aducem stilurile din Normalize.css adăugate în foaia de stil a temei. Astfel, tema noastră se va afișa în mod standardizat în toate browserele.
Apoi, vom stabili o lățime preliminară pentru conținutul dvs., astfel încât să fie mai ușor să evaluați opțiunile tipografice și vom adăuga stilurile dvs. tipografice fundamentale.
În terminalul dvs. (încă în dosarul "UberThemeStyles"), executați comanda grunt cssmin.
Acest lucru va lua fișierul "normalize.css" din folderul "bower_components / normalize-css", comprimați-l și scrieți-l în fișierul style.css al temei dvs..
Dacă ați reuși să vedeți acest lucru în terminalul dvs.:
Reîmprospătați capătul frontal al lui Ghost. Puteți verifica dacă a fost adăugat "normalize.css" dacă vedeți
Notă: Pe măsură ce vom merge, vom face unele ajustări în fișierul normalize.css.
Pentru că vom crea multe dintre propriile noastre stiluri, vrem să evităm stilurile duplicate pentru elemente cum ar fi corp și h1 deoarece este vorba de interstițiu inutil pentru browser, așa că vom transplanta unele stiluri de la "normalize.css" în fișierele noastre personalizate LESS.
Înainte de a alege fonturile pe care le vom folosi în tema noastră, vom stabili o lățime preliminară pentru conținut și vom adăuga câteva setări tipografice de bază. Va fi mult mai ușor să încercați și să decideți fonturile când se află într-un spațiu mai restrâns și setați la dimensiunea fontului pe care vor fi cel mai probabil utilizate la.
Pentru a face acest lucru, vom începe să editați fișierele LESS.
Înainte de a începe să editați mai puțin, dacă sunteți nou, vă rugăm să faceți un moment pentru a vă familiariza cu sistemul său de:
Nu aveți nevoie de o înțelegere aprofundată în acest moment, ar fi suficient doar să citiți secțiunea de deschidere de pe pagina de pornire LESS, adică fiecare secțiune cu titluri potrivite la lista de bullet de mai sus.
Pentru a vedea modificările codului dvs. LESS reflectate în partea din față a site-ului dvs., vom activa crearea și scrierea automată a CSS în tema dvs..
În terminalul dvs. (încă în dosarul "UberThemeStyles", executați comanda Ceasul de grunt.
Aceasta va iniția sarcina "watch", prin care fișierele LESS și fișierul dvs. Normalize.css vor fi vizionate pentru orice modificări. Ori de câte ori sunt detectate modificări ale fișierelor, LESS va fi compilată automat, iar CSS va fi combinat, miniat și scris în fișierul "style.css" al temei dvs..
Notă: Când doriți să opriți sarcina de "vizionare", reveniți la terminalul dvs. și apăsați CTRL + C. Când vi se solicită tipul y apoi apăsați INTRODUCE.
În editorul de cod preferat, deschideți fișierul "layout.less" din folderul "UberThemeStyles> LESS".
Adăugați următorul cod, apoi salvați:
.wrapper_uber lățime: 100%; max-lățime: 40; marja: 0 auto;
Acest cod face câteva lucruri:
lăţime proprietate la o valoare explicită. In schimb, lăţime este setat la 100%, astfel încât va umple întreaga fereastră în orice dispozitiv cu o rezoluție mai mică de 40 de grade lățime.lățimea maximă proprietate pentru a restricționa ambalajul la cel mult 40ems la rezoluții mai mari.em valoare, nu a px valoare.Notă: Vom regla această lățime mai târziu pentru o lizibilitate optimă odată ce ne-am ales fonturile și, prin urmare, știm cât de largi vor fi scrisorile noastre. Valoarea a 40ems este numai înlocuitor.
Reîmprospătați capătul din față. Ar fi trebuit să se restrângă în felul următor:
Deschideți fișierul "normalize.css" din folderul "UberThemeStyles> bower_components> normalize-css" pentru editare.
Comentează sau șterge corp, h1 si tot A (linii 76-121), pentru că ne vom scrie propriile noastre și nu vrem ca cheltuielile aferente declarațiilor duplicate.
Deschideți fișierul "typography.less" din dosarul "UberThemeStyles> LESS" pentru editare.
Înlocuiți întregul cod cu codul următor, apoi salvați:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; linia-înălțime: 1.313em; // // // Stiluri // ** corp margine: 0; font-familie: @default_font; linia-înălțime: @golden + 0em; // setați înălțimea liniei regulate la raportul de aur a background: transparent; a: link, a: vizitat a: focalizare contur: subțire punctată; a: activă, a: hover contur: 0; // Scala tipografică clasică: dacă scara standard de dimensiune 16px ar fi: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; font-size: 3m; marja: 0.563 em 0; h2 .HeaderFont; font-size: 2.25; marja: 0.625em 0; h3 .HeaderFont; font-size: 1.5; marja: 1.313em 0; h4 .HeaderFont; font-size: 1.313; marja: 1.313em 0; h5 .HeaderFont; dimensiune font: 1.125em; marja: 1.313em 0; h6 .HeaderFont; dimensiune font: 1em; marja: 0,75em 0;
Există un pic de cod pe care l-am adăugat imediat. Permiteți-mi să vă explic ce se întâmplă.
Mixins
Primul lucru pe care îl veți vedea în partea de sus este mixinul .HeaderFont (). Pentru că vom folosi aceeași familie de fonturi, greutatea fontului și înălțimea liniei pentru toate etichetele de rubrică, am plasat toate regulile pentru aceste proprietăți într-un singur mixin. Dacă te uiți la stilul pentru fiecare etichetă de titlu, vei vedea .HeaderFont () mixin a sunat pe prima linie.
În acest fel, putem actualiza mixinul după cum este necesar și toate stilurile de etichete de titlu vor fi actualizate automat.
variabile
Veți observa, de asemenea, utilizarea unor variabile în cod, adică. @header_font, @default_font și @de aur.
Valoarea fiecăreia dintre aceste variabile este setată în fișierul "variablesless" din folderul "UberThemeStyles> LESS". Acest fișier este accesat mai întâi în timpul compilării codului dvs. LESS, ceea ce înseamnă că variabilele pe care le conține pot fi utilizate în oricare dintre celelalte fișiere LESS.
Folosim variabilele @header_font și @default_font pentru a seta numele fonturilor care vor fi folosite în întreaga temă, astfel încât devine foarte ușor să se schimbe de la o alegere la alta în timp ce încercați fonturile.
@de aur variabila reprezintă o valoare de 1.618, raportul de aur. Acest număr a fost folosit de la vremea grecilor antice pentru a crea o structură frumoasă în tot ceea ce se întâmplă, de la artă la arhitectură, și o vom folosi foarte mult pe tot parcursul designului.
Adăugarea de unități la variabile
Este cea mai bună practică în LESS pentru a defini variabile numerice fără unități atașate. Aceasta este pentru a vă permite să efectuați aritmetică cu valorile lor.
De exemplu, cu mine @de aur variabil setat ca 1.618 Pot face lucruri cum ar fi multiplicarea acelei valori, înjumătățirea acesteia și așa mai departe. Cu toate acestea, dacă aș fi pus-o la 1.618em, aș avea probleme cu unele calcule pe care aș putea să le fac.
Deci, este întotdeauna mai bine să setați variabilele doar ca numere, apoi să atașați unități în cadrul stilurilor sau amestecurilor reale.
Puteți adăuga unități în modul următor:
@variable + 0em
@variable + 0rem
@ variabilă + 0%
Deci, pe scurt, adăugați unitatea pe care doriți să o utilizați ca și cum ați efectua un calcul suplimentar, cu o valoare de zero setată pe acea unitate.
Scala tipografică
Dimensiunile fontului sunt setate la o scară tipografică clasică, convertite în em in loc de px valoare bazată pe cea mai comună dimensiune implicită a fontului fiind 16 pixeli.
Făcând acest lucru obținem atracția estetică și lizibilitatea scalei, dar dacă un vânzător sau un utilizator modifică dimensiunea implicită a fontului la altceva decât 16px, întreaga scală se va deplasa proporțional cu ea.
Margini de marcare a marcajelor
Cu o soluție standardizată em pentru toate rubricile, este important să se ajusteze marginea pentru fiecare, astfel încât titlurile să arate bine și să poată fi citite atunci când sunt plasate unul sub altul, precum și atunci când sunt plasate în fluxul de text obișnuit.
Valorile folosite în margini sunt cele pe care le-am găsit personal ca fiind cele mai bune pentru fiecare etichetă de rubrică. Veți vedea efectul acestor setări în pasul următor.
Reîmprospătați capătul din față. Acum ar trebui să arate astfel:
Acum vom selecta fonturile care vor fi utilizate pentru antetul și textul obișnuit. Vom crea restul aspectului și designului temei în jurul acestor selecții de fonturi.
În această abordare nu începem cu un machet Photoshop, dar ar trebui să aveți încă o idee esențială despre tipul de stil pe care îl doriți. Mă duc la o schemă de culori ușoare și ușoare, cu un stil plat, dar ușor texturativ, așa că vreau să li se alăture relativ moi și ușoare.
Deplasați-vă la Fonturile Google și alegeți un font pentru titlurile dvs., plus un font pentru textul dvs. obișnuit, asigurându-vă că verificați modul în care se uită la câteva dimensiuni diferite și, dacă există, la greutăți: http://www.google.com/ fonturi /
Am ajuns să aleg Oxygen pentru textul antetului și Open Sans pentru textul obișnuit.
După ce ați selectat fonturile, le puteți adăuga în tema dvs..
Deschideți fișierul "default.hbs" din dosarul rădăcină al temei.
Sub ! Stiluri comentează și deasupra link-ului spre foaia dvs. de stil, adăugați următoarea linie și salvați:
Notă: Pentru a crea o adresă URL pentru orice fonturi Google:
http://fonts.googleapis.com/css?family=Font+Name + semne| simbol: la sfârșitul numelui fontului, urmată de valori separate prin virgulă, de ex. : 300,400,700,300italic, 400italic, 700italic Deschideți fișierul "variablesless" din folderul "UberThemeStyles> LESS" pentru editare.
Localizați aceste două linii:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Editați-le pentru a citi:
@default_font: "Open Sans", Arial, Helvetica, sans-serif; @header_font: "Oxigen", Arial, Helvetica, sans-serif;
În fișierul "typography.less", adăugați a grosimea fontului de 400 la dvs. .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; linia-înălțime: 1.313em; greutatea fontului: 400;
De asemenea, în fișierul "typography.less" adăugați a grosimea fontului de 300 la dvs. corp stil:
corp marja: 0; font-familie: @default_font; linia-înălțime: @golden + 0em; // setați înălțimea liniei regulate la greutatea fontului-greutate: 300;
Notă: Acestea au fost greutățile pe care le-am simțit cel mai bine pentru aceste fonturi, și pentru stilul luminos pe care îl fac.
Reîmprospătați capătul din față. Ar trebui să vedeți acum opțiunile pentru fonturi în loc:
Înainte de a trece la partea finală a seriei noastre de tutorial, avem una sau două detalii de stil pentru a avea grijă de ele. În următoarea tranșă vom examina culoarea și vom defini câteva setări implicite pentru aspectul de bază.
