Share
Flytter raskt sammen med stylingen av Ghost-temaet, beskriver denne opplæringen noen breddeinnstillinger, fargen og noen grunnleggende layoutjusteringer.
Merk: Du må jobbe i Firefox med FireBug-utvidelsen installert, eller i Chrome med utviklerverktøy for denne delen av opplæringen..
Etter å ha valgt våre skrifter under den forrige opplæringen vet vi hvor brede bokstavene våre vil være, slik at vi kan justere bredden på nettstedet for optimal lesbarhet. Ulike skrifttyper har forskjellige gjennomsnittlige bredder per brev, og derfor har vi ventet til dette punktet for å fullføre innholdsbredden.
Kjernebredden på layoutet er ikke definert slik at den passer til en designstil eller en bestemt enhets oppløsning. Den er definert ved å målrette antall tegn per linje innenfor et område som gjør det så enkelt som mulig for folk å lese og absorbere innholdet.
Det er litt debatt om det optimale antall tegn per linje, men vi skal målrette et område på omtrent 63 - 81 tegn.
Dette er basert på at en leser har gjennomsnittlig visjon og leseopplevelse å følge langs hver linje med et komfortabelt antall komplett øyebevegelser (saccades). Den gjennomsnittlige personen tar rundt ni bokstaver per øyebevegelse, og vi tillater sju til ni av disse bevegelsene.
Hver leser er annerledes, slik at det optimale antall tegn per linje vil variere fra person til person. Derfor kan du behandle 63 - 81-området som en grov sone.
Gå til http://charcount.appspot.com/ og legg til bokstaven med karaktertall i nettleseren din.
Merk: For å gjøre det, finn "Prøv det!" eller "klikk meg" -linken på siden, og dra den linken til bokmerkelinjen og endre den til noe som "CharCount".
Nå går du til forsiden av nettstedet ditt og markerer en tekstlinje, klikker bokmerket og ser hvor mange tegn det står i linjen:
For øyeblikket har vi rundt 91, så vår layout er litt for bred. Vi ønsker å ta det ned med rundt ti tegn.
Åpne FireBug / Chrome Dev Tools ved å trykke F12, og i HTML fanen, (Elements fan i Chrome) velg div med klassen "wrapper_uber" slik at CSS vises i stilpanelet til høyre.
Merk: Se bildet i trinn 5 for hva du skal se etter.
Klikk nå verdien av 40em til høyre for eiendommen max bredde slik at du kan justere den. Tast inn 39em og trykk TAST INN.
Marker nå en linje og klikk på bokmerkelitteraturet på nytt. Denne gangen er vi på 87 per linje, som fortsatt er litt for mye.
Fortsett å teste til du kommer et sted innenfor 63 - 81-serien. I dette tilfellet 36em viste seg å være en god verdi. Du kommer til å få forskjellige teller på hver linje, så det trenger ikke å være perfekt, bare et sted nær målområdet.
Gå nå til filen "variables.less" og lim inn denne variabelen under linjen som holder @gylden variabel på linje 17:
@readable_width: 36em;
Gå tilbake til filen "layout.less" og endre max bredde eiendom i .wrapper_uber stil fra:
maksimal bredde: 40em;
Til:
maksimal bredde: @readable_width;
Lagre filen.
Oppdater siden, og innholdet skal nå vises i samme bredde som når du justerte det i FireBug / Dev Tools:
Vi skal nå velge en fargepalett og legge til i grunnfargeskjemaet.
Dette stadiet er ikke noe endelig, eller til og med spesielt bra. Vi vil bare få en grunnleggende ide om hvordan fargene vil spille sammen, slik at vi kan justere oppsettet for lesbarhet.
Vi begynner med å velge et lite antall farger og lagrer hver som en variabel slik at de lett kan brukes på flere steder.
Fargeskjemaet selv vil bli kontrollert i en selvstendig bestand. Vi lager mixins for å kontrollere bakgrunnsfarger, fontfarger, bakgrunnsbilder og andre forskjellige designelementer. Disse mixins kan da bli trukket inn i enten "typography.less" eller "layout.less" filen. På denne måten holder vi hovedformålet med hver fil, som bidrar til å holde orden på organisasjonen.
Jeg valgte denne fargepaletten fra Adobe Kuler
Legg til følgende kode i filen "variables.less", nederst på filen:
@ color_01: # F2BF89; // myk oransje @ color_02: # EF9335; // hard oransje @ color_03: # 4FBCCB; // myk aqua @ color_04: # 25748C; // hard aqua @ color_05: # 4F5154; // midtkull
Ved å lagre hver farge hexcode som en variabel som dette, hvis du bestemmer deg senere må du justere paletten du kan bare endre verdien av variablene her, og hele temaet blir automatisk oppdatert. Det er også en god ide å legge til en liten kommentar som beskriver fargen slik at du kan huske hvilken er hvilken når du går for å bruke dem.
Åpne filen "color_and_bgs.less" for redigering, og legg til følgende kode:
.BodyColor () bakgrunnsfarge: @ color_01; farge: @ color_05; .LinkColor () farge: @ color_03; .LinkHoverColor () farge: @ color_02; .HeaderColor () bakgrunnsfarge: hvit; .ArticleColor () bakgrunn: hvit; a, a: link, a: besøkt farge: @ color_03; a: svever, a: fokus farge: @ color_02; .PostTitleColor () bakgrunnsfarge: @ color_03; farge: hvit; a, a: link, a: besøkt farge: hvit; a: svever, a: fokus farge: @ color_01;
Det vi gjør her, er å lage en rekke grunnleggende fargekontrollmixiner som vil bli lagt til "typography.less" og "layout.less" -filer.
I rekkefølge fra topp til bunn vil disse mixinene angi:
Som et interessant punkt lånte jeg denne teknikken fra tradisjonell kunst, hvor malere begynner med et underlag som definerer det essensielle fargeskjemaet, da legger de detaljene over toppen.
Denne tilnærmingen gir deg mulighet til å gjøre endringer lettere når du bestemmer deg for grunnlaget for ditt generelle utseende, da de aspektene du jobber med, er ganske enkle og enkle å endre.
I "typography.less" redigerer du den første linjen i hver av de følgende stilene, og legger til samtaler til mixinene vi nettopp har opprettet, slik:
kropp .BodyColor; margin: 0; font-familie: @default_font; linjehøyde: @golden + 0em; // angi vanlig linjehøyde til den gyldne ratioens skrifttype: 300;
Legg til .BodyColor; på første linje av kropp klasse.
a: link, a: besøkt .LinkColor;
Legg til .LinkColor; inne i a: link, a: besøkt klasse.
a: aktiv, a: svever .LinkHoverColor; oversikt: 0;
Legg til .LinkHoverColor; på første linje av a: aktiv, a: svinger klasse.
Fortsatt i "typography.less" legg til følgende kode til slutten av filen og lagre:
h1.posttitle_uber .PostTitleColor;
I «layout.less» legger du til følgende kode på slutten av filen og lagrer:
.header_uber .HeaderColor; .article_uber .ArticleColor;
Oppdater nettstedet. Det skulle nå se slik ut:
Nå er fargene blokkert, og vi kan tydelig se noen aspekter av utformingen og stylingen som skal justeres.
Det første som er umiddelbart tydelig, er at teksten til artikkelen ikke skal flush mot kanten av den hvite bakgrunnen.
Vi justerer det i et øyeblikk, men først la oss begynne med å fjerne understrekkene fra bloggtittelen, bloggbeskrivelsen og posttitlene, slik at det blir enklere å se hva som passer best under layoutjusteringer.
I filen "typography.less" legger du til følgende kode under H6 klasse og lagre:
h1.blogtitle_uber, h1.blogtitle_uber en text-decoration: none; p.blogdescription_uber, p.blogdescription_uber en text-decoration: none;
I filen "colors_and_bgs.less" legger du til tekst-dekorasjon: ingen; til en tag styling i .PostTitleColor () mixin som vist nedenfor og lagre:
.PostTitleColor () bakgrunnsfarge: @ color_03; farge: hvit; a, a: link, a: besøkt farge: hvit; tekst-dekorasjon: ingen; a: svever, a: fokus farge: @ color_01;
Oppdater nettstedet - du bør ikke lenger se noen understreker på bloggens tittel, bloggbeskrivelse eller posttitler.
I filen "layout.less" legger du til litt hvitt mellomrom rundt innholdet for å gjøre det enkelt å lese ved å redigere .article_uber klasse for å legge til polstring:
.article_uber .ArticleColor; polstring: 5 * @golden + 0em;
Dette setter polstringen til fem ganger gullkvoten på alle sider.
Oppdater nettstedet, det skal se slik ut:
Den polstring vi har lagt til, gjør det mye lettere å se på ytre kanter av teksten, men nå har vi mistet den lesbare bredden vi konfigurerte før. Dette skyldes at .wrapper_uber klassen holder bredden til et maksimum 36em, gjelder også den polstring vi nettopp har lagt til. Så det prøver å knuse alt vårt innhold, pluss alt vårt polstring, inn i det 36em stort rom.
For å løse dette må vi øke max bredde parameteren til .wrapper_uber klasse til vår lesbare bredde på 36em i tillegg til polstring vi nettopp lagt til. Dette vil tillate innholdet selv å utvide til 36em, Med tilleggsavgiften for polstring skaper komfortabel hvit plass enten sted.
Vi begynner med å opprette en variabel for å holde mengden polstring vi legger til. På denne måten kan vi bruke denne verdien både i .wrapper_uber klassen og .article_uber klassen, som du vil se nedenfor.
Med denne tilnærmingen, hvis vi ønsker å justere mengden av hvitt mellomrom rundt innholdet, vil sidebreddebredden automatisk justeres sammen med den.
I filen "variables.less" legger du til denne koden under @readable_width variabel linje, og lagre deretter:
@add_padding: 5 * @golden;
Nå i filen "layout.less" oppdateres .wrapper_uber klasse max bredde Innstilling for å legge til den nye padding-variabelen:
.wrapper_uber bredde: 100%; maksimal bredde: @readable_width + 2 * @add_padding; margin: 0 auto;
Merk: Dette legger til to ganger verdien av @add_padding variabel til max bredde av .wrapper_uber klasse, regner med polstring på både venstre og høyre side.
Fortsatt i filen "layout.less", oppdaterer .article_uber klasse padding innstillingen for å bruke den nye padding-variabelen også, og deretter lagre:
.article_uber .ArticleColor; polstring: @add_padding + 0em;
Nå bruker vi verdien av @add_padding variabel både for å utvide det samlede nettstedet wrapper, og å legge polstring / hvit plass rundt innholdet.
Oppdater nettstedet ditt, og du bør nå se både den hvite plassen på sidene og din lesbare bredde:
På dette punktet er det sannsynligvis en ting som setter deg i gang med å nyte ditt flotte nye layout: det store Ghost-bildet dukker opp og strekker seg ut av innholdsområdet. For å fikse dette, legg til følgende kode i filen "layout.less" over .wrapper_uber klasse:
img grense: 0; maksimal bredde: 100%;
Dette sikrer at ingen bilder vil bli større enn 100% av elementet den sitter inne i.
I din "normalize.css" -fil kommenterer du img stil på linjene 231 til 233 som det ikke lenger er nødvendig med tanke på at vi har skapt vår egen img stil, og lagre deretter.
Oppdater nettstedet ditt og Ghost-bildet skal nå passe pent inn i innholdsområdet:
Vi har nå de viktigste aspektene av styling på plass, de som styrer typografi og lesbarhet, holder innhold som det sentrale fokuset:
Dette danner kjernen i vårt design og fullfører det vi har satt opp for å oppnå i denne delen av vår opplæringsserie, selv om vi ikke er ferdige med stylingstrinnet i vårt tema design ennå.
Vi er nå klare til å fortsette til neste og siste del av vår opplæringsserie.
Der vil vi fullføre alle våre styling-estetikk, samt fullføre temaets responsive funksjonalitet. Ved slutten av den følgende avdrag vil temaet ditt bli fullstendig og installert klart.
Accentsconagua