Share
Mergând rapid împreună cu stilul temei noastre Ghost, acest tutorial stabilește unele setări de lățime, culoarea și unele ajustări de aspect de bază.
Notă: Va trebui să lucrați în Firefox cu extensia FireBug instalată sau în Chrome cu Instrumente pentru dezvoltatori pentru această secțiune a tutorialului.
După ce am ales fonturile noastre în timpul tutorialului anterior, știm cât de mari vor fi scrisorile noastre, astfel încât să putem ajusta lățimea site-ului pentru o lizibilitate optimă. Diferitele fonturi au lățimi medii diferite pe literă, motiv pentru care am așteptat până la acest punct să finalizăm lățimea conținutului.
Lățimea miezului layout-ului nu este definită pentru a se potrivi unui stil de design sau unei rezoluții specifice unui dispozitiv. Se definește prin direcționarea numărului de caractere pe linie, într-un interval care face cât mai ușor posibil ca oamenii să citească și să absoarbă conținutul.
Există o dezbatere asupra numărului optim de caractere pe linie, dar vom viza un interval de aproximativ 63 - 81 de caractere.
Aceasta se bazează pe a permite unui cititor cu viziune medie și experiență de citire să urmeze de-a lungul fiecărei linii cu un număr confortabil de mișcări complete ale ochilor (saccade). Persoana medie are în jur de nouă scrisori per mișcare de ochi și permitem șapte până la nouă dintre aceste mișcări.
Fiecare cititor este diferit, astfel încât numărul optim de caractere pe linie va varia de la persoană la persoană. Prin urmare, puteți trata gama 63 - 81 ca zonă gravă.
Accesați http://charcount.appspot.com/ și adăugați marcajul de caractere pentru caractere în browser.
Notă: Pentru a face acest lucru, găsiți "Încercați!" sau "faceți clic pe mine" pe pagină, apoi glisați acea legătură pe bara de marcaje și redenumiți-o la ceva asemănător cu "CharCount".
Acum, mergeți la capătul din față al site-ului dvs. și evidențiați o linie de text, faceți clic pe marcatorul de carte și vedeți câte caractere se afișează în rândul:
În momentul de față avem aproximativ 91, așa că aspectul nostru este puțin prea lat. Vrem să-l dăm jos în jur de zece personaje.
Deschideți FireBug / Chrome Dev Tools apăsând F12, și în HTML tab (element în Chrome) selectați div cu clasa "wrapper_uber", astfel încât CSS să apară în panoul de stil din partea dreaptă.
Notă: Vedeți imaginea de la pasul 5 pentru ceea ce ar trebui să căutați.
Acum faceți clic pe valoarea 40em la dreapta proprietății lățimea maximă astfel încât să puteți ajusta. introduce 39em și apăsați INTRODUCE.
Acum, evidențiați o linie și faceți din nou clic pe marcatorul de caractere al caracterelor. De data aceasta suntem la 87 pe linie, care este încă puțin prea mult.
Păstrați testarea până când ajungeți undeva în intervalul 63 - 81. În acest caz 36em sa dovedit a fi o valoare bună. Veți obține mai multe contează pe fiecare linie, astfel încât nu trebuie să fie perfect, doar undeva aproape de gama țintă.
Acum mergeți la fișierul "variablesless" și lipiți această variabilă sub linia de susținere @de aur variabilă, pe linia 17:
@readable_width: 36em;
Reveniți la fișierul "layout.less" și schimbați lățimea maximă proprietate în .wrapper_uber stil de la:
max-lățime: 40;
La:
max-lățime: @readable_width;
Salvați fișierul.
Actualizați pagina și conținutul ar trebui să apară acum la aceeași lățime ca atunci când ați fost ajustat în FireBug / Dev Tools:
Acum vom alege o paletă de culori și vom adăuga schema de culori de bază.
Această etapă nu este nimic finală sau chiar deosebit de bună. Vrem doar să obținem o idee de bază despre cum vor juca culorile împreună, astfel încât să putem ajusta aspectul pentru lizibilitate.
Vom începe prin alegerea unui număr mic de culori și salvarea fiecărei variabile, astfel încât acestea să poată fi utilizate cu ușurință în mai multe locații.
Schema de culori în sine va fi controlată într-un fișier auto-conținut. Vom crea mixuri pentru a controla culorile de fundal, culorile fontului, imaginile de fundal și alte elemente de design asortate. Aceste mixuri pot fi apoi trase în fișierul "typography.less" sau "layout.less". Astfel păstrăm scopul principal al fiecărui fișier separat, care ajută la păstrarea lucrurilor organizate.
Am ales această paletă de culori de la Adobe Kuler
Adăugați următorul cod în fișierul "variabile", în partea de jos a fișierului:
@ color_01: # F2BF89; // portocaliu moale @ color_02: # EF9335; // hard orange @ color_03: # 4FBCCB; // soft aqua @ color_04: # 25748C; // hard aqua @ color_05: # 4F5154; // cărbune mediu
Salvând fiecare hexacol color ca variabilă ca aceasta, dacă decideți mai târziu trebuie să ajustați paleta, puteți schimba valoarea variabilelor aici și întreaga temă va fi actualizată automat. Este, de asemenea, o idee bună să adăugați un comentariu care descrie culoarea, astfel încât să vă puteți aminti care este atunci când mergeți să le folosiți.
Deschideți fișierul "color_and_bgs.less" pentru editare și adăugați următorul cod:
.BodyColor () culoarea de fundal: @ color_01; culoare: @ color_05; .LinkColor () culoare: @ color_03; .LinkHoverColor () culoare: @ color_02; . HeaderColor () culoarea de fundal: alb; .ArticleColor () fundal: alb; a, a: link, a: vizitat culoare: @ color_03; a: hover, a: focalizare culoare: @ color_02; .PostTitleColor () background-color: @ color_03; culoare albă; a, a: link, a: vizitat culoare: alb; a: hover, a: focalizare culoare: @ color_01;
Ceea ce facem aici este crearea unei serii de mixcuri de control de bază care vor fi adăugate fișierelor "typography.less" și "layout.less".
În ordinea de sus în jos, aceste mixuri vor seta:
Ca un punct de interes, am împrumutat această tehnică din arta tradițională, în care pictorii încep cu un substrat care definește schema de culori esențială, apoi adaugă detaliile deasupra.
Această abordare vă permite să faceți schimbări mai ușor atunci când decideți pe baza aspectului general, aspectele cu care lucrați sunt destul de simple și ușor de modificat.
În "typography.less" editați prima linie a fiecăruia dintre următoarele stiluri, adăugând apeluri la mixurile pe care tocmai le-am creat, cum ar fi:
corp .BodyColor; marja: 0; font-familie: @default_font; linia-înălțime: @golden + 0em; // setați înălțimea liniei regulate la greutatea fontului-greutate: 300;
Adăuga .BodyColor; pe prima linie a corp clasă.
a: link, a: vizitat .LinkColor;
Adăuga .linkcolor; în interiorul a: link, a: vizitat clasă.
a: activ, a: hover .LinkHoverColor; contur: 0;
Adăuga .LinkHoverColor; pe prima linie a a: activ, a: hover clasă.
Încă în "typography.less" adăugați următorul cod la sfârșitul fișierului și salvați:
h1.posttitle_uber .PostTitleColor;
În "layout.less" adăugați următorul cod la sfârșitul fișierului și salvați:
.header_uber .HeaderColor; .article_uber .ArticleColor;
Reîmprospătați site-ul. Acum ar trebui să arate astfel:
Acum, culorile sunt blocate, putem vedea clar unele aspecte ale aspectului și stilului care ar trebui ajustate.
Primul lucru care este imediat vizibil este că textul articolului nu trebuie să se întoarcă pe marginea fundalului alb.
Vom regla asta într-un moment, dar mai întâi să începem prin eliminarea sublinierilor din titlul blogului, descrierea blogului și titlurile postului, astfel încât să fie mai ușor să vedem ce arată cel mai bine în timpul ajustărilor de aspect.
În fișierul "typography.less", adăugați codul de mai jos H6 clasă și salvați:
h1.blogtitle_uber, h1.blogtitle_uber a text-decorare: nici unul; p.blogdescription_uber, p.blogdescription_uber a text-decorare: nimic;
În fișierul "colors_and_bgs.less", adăugați text-decoration: nici unul; la A etichetarea stilului în .PostTitleColor () mixin după cum se arată mai jos și salvați:
.PostTitleColor () fundal-culoare: @ color_03; culoare albă; a, a: link, a: vizitat culoare: alb; text-decoration: nici unul; a: hover, a: focalizare culoare: @ color_01;
Reîmprospătați site-ul - nu mai trebuie să vedeți subliniere pe titlul blogului, descrierea blogului sau titlurile postate.
În fișierul "layout.less", adăugați un spațiu alb în jurul conținutului pentru a fi ușor de citit prin editarea .article_uber clasă pentru a adăuga padding:
.article_uber .ArticleColor; umplutura: 5 * @golden + 0em;
Acest lucru face ca padding-ul să fie de cinci ori raportul de aur de pe toate laturile.
Reîmprospătați site-ul, ar trebui să arate astfel:
Amplasarea pe care am adăugat-o face mult mai ușor să privești marginile exterioare ale textului, dar acum am pierdut lățimea lizibilă pe care am configurat-o înainte. Acest lucru se datorează faptului că .wrapper_uber clasa păstrează lățimea la un maxim de 36em, inclusiv umplutura pe care tocmai am adăugat-o. Așa că încearcă să scuipă tot conținutul nostru, plus toate materialele noastre, în asta 36em spațiu larg.
Pentru a rezolva acest lucru, va trebui să mărim lățimea maximă parametru al .wrapper_uber clasa la lățimea noastră lizibilă de 36em la care se adauga umplutura pe care tocmai am adăugat-o. Acest lucru va permite conținutului însuși să se extindă 36em, cu alocația suplimentară pentru zidăria creând spațiu alb confortabil, fie pe șantier.
Vom începe prin crearea unei variabile care să mențină cantitatea de umplutură pe care o adăugăm. În acest fel putem folosi acea valoare atât în .wrapper_uber clasa, și .article_uber clasa, după cum veți vedea mai jos.
Cu această abordare, dacă vrem să ajustăm cantitatea de spațiu alb în jurul conținutului, lățimea de înfășurare a site-ului se va ajusta automat împreună cu acesta.
În fișierul "variabile", adăugați acest cod sub @readable_width linie variabilă, apoi salvați:
@add_padding: 5 * @golden;
Acum, în actualizarea fișierului "layout.less" .wrapper_uber clasă lățimea maximă setarea pentru a adăuga noua variabilă de umplere:
.wrapper_uber lățime: 100%; max-lățime: @readable_width + 2 * @add_padding; marja: 0 auto;
Notă: Aceasta adaugă de două ori valoarea lui @add_padding variabilă la lățimea maximă din .wrapper_uber clasa, care contabilizează umplutura atât pe partea stângă cât și pe cea dreaptă.
Încă în actualizarea fișierului "layout.less" .article_uber clasă umplutură setați să utilizați și noua variabila de umplere, apoi salvați:
.article_uber .ArticleColor; umplutură: @add_padding + 0em;
Acum folosim valoarea @add_padding variabile atât pentru a lărgi ambalajul general al site-ului, cât și pentru a adăuga spațiu alb / alb în jurul conținutului.
Reîmprospătați site-ul dvs. și acum ar trebui să vedeți atât spațiul dvs. alb pe laturi, cât și lățimea dvs. lizibilă:
În acest moment este probabil un lucru care vă face să vă bucurați de noul dvs. aspect frumos: imaginea fantomă mare care se extinde și se revarsă din zona de conținut. Pentru a remedia acest lucru, adăugați următorul cod în fișierul "layout.less" deasupra .wrapper_uber clasă:
img graniță: 0; max-lățime: 100%;
Acest lucru asigură că nici o imagine nu va fi mai mare decât 100% din elementul în care se află.
În fișierul "normalize.css", scrieți comentariul img stil pe liniile 231 - 233, deoarece nu mai este necesar dat fiindcă am creat propriul nostru img stil, apoi salvați.
Actualizați-vă site-ul și imaginea Ghost ar trebui să se potrivească acum în zona de conținut:
Acum avem cele mai importante aspecte ale stilului, cele care controlează tipografia și lizibilitatea, păstrând conținutul ca fiind centrul atenției:
Acest lucru formează nucleul designului nostru și completează ceea ce ne-am propus să realizăm în această parte a seriei noastre de tutorial, deși nu am terminat cu stilul de design al temei noastre de design încă.
Suntem gata să facem următoarea și ultima parte a seriei noastre de tutorial.
Acolo vom finaliza toată estetica noastră de stil și vom completa funcționalitatea receptivă a temei. Până la sfârșitul următoarei tranșe, tema dvs. va fi complet completă și va fi gata instalată.
Accentsconagua