Share
Velkommen til den fjerde delen av vår Ghost Theme Design Tutorial Series. I introduksjonsveiledningen lærte du at det er to faser for å designe et tema. I løpet av delene har vi begynt og fullført det vi har referert til som "den første fasen" for å lage temaets maler. Denne fjerde delen av serien tar oss inn i neste fase av tema design, nemlig styling.
I denne delen begynner vi å style vår typografi og bygge våre layout kontroller. I den kommende delen fortsetter vi stylingen ved å blokkere ut fargeskjemaet, og legge grunnlaget for temaresponsivitet.
Merk: Denne opplæringen tar utgangspunkt i et grunnleggende arbeidskunnskap om CSS.
Denne opplæringen tar deg gjennom en tilnærming til responsiv design som du kanskje ikke er kjent med. Tilnærmingen sikrer at designene vil reagere på mer enn bare spesifikt målrettede vanlige enhetsoppløsninger.
I stedet vil designene:
Dette gjøres av:
Accentsconagua
em eller rem verdier, som er fleksible, og ikke pikselverdier, som er ufleksible, gjennom hele designen.Før vi begynner på styling, skal vi legge til noe overskriftstestinnhold på Ghost-nettstedet ditt, slik at du kan se hvordan H1 til H6-kodene dine vises.
Du bør legge til hver overskrift størrelse en linje under den andre for å se hvordan de fungerer når de plasseres tett sammen, og legg deretter også til hver overskrift med en linje med vanlig tekst i mellom for å se hvordan de ser i strømmen av normalt innhold.
Legg til følgende markering øverst i ditt nyeste Ghost-innlegg, (du må kanskje legge til tomme linjer mellom hver linje), og deretter oppdatere den:
Du er med! Hyggelig. Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. Gå videre og rediger dette innlegget for å komme og lære hvordan alt fungerer! #Heading 1 ## Overskrift 2 ### Overskrift 3 #### Overskrift 4 ##### Overskrift 5 ###### Overskrift 6 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og få du startet. #Heading 1 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. ## Overskrift 2 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. ### Overskrift 3 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. #### Overskrift 4 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. ##### Overskrift 5 Vi har satt sammen et lite innlegg for å introdusere deg til Ghost-redaktøren og komme i gang. ###### Overskrift 6
For å hjelpe deg med å bruke den mest effektive arbeidsflyten med Ghost-temaopprettelsen, har jeg satt sammen en liten utviklingspakke for deg som gir deg tilgang til noen virkelig nyttige verktøy og automatiserer en rekke oppgaver for deg. Den er tilgjengelig i hovedkilden nedlasting.
I stedet for koding i rå CSS bruker vi mindre. Hvis du er ny til MINDRE, kan du lese alt om det på http://lesscss.org/
GhostThemingPackage håndterer kompilering av LESS kode, samt minifiserer CSS og skriver det inn i temamappen din.
Den vil også laste ned og gjøre tilgjengelige "LESSHat" -biblioteket av mixins, en fantastisk gratis ressurs som gjør produksjonen av kryss-nettleser CSS3 raskt og enkelt: http://lesshat.com/
I tillegg vil det laste ned "normalize.css", "Modernizr", pluss noe responsivt iframe javascript for deg, og kombinere, redusere og skrive alt inn i temaet ditt.
Normalize.css standardiserer grunnleggende visningselementer i alle nettlesere. Les mer om det på http://necolas.github.io/normalize.css/
Modernizr gjør det mulig for eldre nettlesere å gi mening om moderne oppslag. Les mer om det på http://modernizr.com/
Du trenger bare tre ting installert for å kunne bruke GhostThemingPackage:
Du har allerede Node.js installert som du har brukt den til å kjøre Ghost, men du må kanskje installere Grunt og Bower hvis du ikke har dem på systemet ditt ennå..
Grunt.js er en javascript-oppgaveløper som vi skal bruke til å automatisere LESS compiling, og CSS kombinasjon og minifisering. Hvis du ikke har Grunt på systemet, kan du installere det veldig enkelt via NPM (nodepakkeadministrator, en del av node.js).
For å installere Grunt via NPM, åpne en terminal (på et hvilket som helst sted) og kjør følgende kommando:
npm installere -g grunt-cli
Pass på at du inkluderer "-g" -flagget som det vil gjøre Grunt tilgjengelig globalt på systemet ditt, dvs. til hvilket sted du jobber i.
Bower.io er en flott pakkebehandling som gir deg enkel tilgang til alle forskjellige typer webdesign orientert script og CSS pakker. Du kan lese mer om det på http://bower.io/
Som Grunt kan Bower også installeres veldig enkelt via NPM.
Merk: Hvis du ikke allerede har Git installert, må du gjøre det før du installerer bower.
Installasjonsanvisninger for Git finner du her: http://git-scm.com/book/no/Getting-Started-Installing-Git
Viktig: Se instruksjoner nær bunnen av Bowers side om installering av Git på Windows: http://bower.io/#a-note-for-windows-users
For å installere Bower via NPM, åpne en terminal (på et hvilket som helst sted) og kjør følgende kommando:
npm installer -g bower
Igjen, vær sikker på at du inkluderer "-g" -flagget, slik at Bower vil være tilgjengelig for deg hvor som helst på systemet ditt.
Etter å ha lastet ned "GhostThemingPackage", trekk den ut et sted som er lett tilgjengelig, ideelt sett inn i samme rotkatalog, din Ghost installasjonsmappe ligger i.
For eksempel, hvis Ghost-installasjonen din er på C: \ Ghost pakke ut pakken til din C: kjør også, så det ender opp på C: \ GhostThemingPackage. (Ikke legg den inn i Ghost-installasjonsmappen din).
Du bør se følgende mappe og filstruktur inni:
Gi nytt navn til mappen fra "GhostThemingPackage" til "UberThemeStyles".
Åpne en terminal i "UberThemeStyles" -mappen.
Kjør kommandoen npm installasjon.
Dette henter automatisk de nødvendige Node.js-pakkene som skal brukes til å samle LESS, og kombinere og redusere CSS og JavaScript.
Du ser mange meldinger som dette mens NPM henter alt:
Vent til alle disse meldingene har stoppet og du ser kommandoprompten vises igjen.
Kjør kommandoen bower installasjon.
I likhet med det forrige trinnet henter dette de nødvendige pakkene fra Bower.io; LESShat, Modernizer og Normalize.css
Igjen ser du en rekke meldinger som vises i terminalen din: vent til de er ferdige, og ledeteksten vises.
Bekreft at du nå ser denne mappestrukturen i mappen "UberThemeStyles":
Legg merke til tilstedeværelsen av de nye mappene "bower_components" og "node_modules".
Hvis noen undermapper mangler fra hver mappe, slett den mappen, og kjør deretter kommandoen på nytt, dvs.. npm installasjon for mappen "node_modules" eller bower installasjon for mappen "bower_components".
I din foretrukne kodeditor, åpne "Gruntfile.js" fra rotkatalogen i mappen "UberThemeStyles".
Dette er filen som vil lette alle automatiseringsoppgaver under tema styling prosessen. For å få det til å fungere, må vi bare fortelle det hvor du har Ghost installert, og hva navnet på temaet ditt er.
På linje 62 og 63 finner du følgende:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourThemeName',
Om nødvendig, endre '... / Ghost /' å gjenspeile den relative banen til Ghost-installasjonen.
Du må ikke endre innstillingen hvis "UberThemeStyles" -mappen din er i samme rotmappe som Ghost-installasjonsmappen din, og Ghost-installasjonsmappen din heter faktisk "Ghost".
Endre "YourThemeName" til "UberTheme".
Lagre filen.
Merk: Din temapakke er nå installert, og du kan gjenta prosessen i fremtiden for å få oppsett for eventuelle andre temaer du lager.
Det første vi skal gjøre er å få stilene fra Normalize.css lagt til temaets stilark. Dette sikrer at temaet vårt vises på en standardisert måte over alle nettlesere.
Vi skal da legge inn en foreløpig bredde for innholdet ditt, slik at det er lettere å vurdere typografivalg, og vi legger til grunnleggende typografi stiler.
I din terminal, (fortsatt i "UberThemeStyles" -mappen), kjør kommandoen grunt cssmin.
Dette vil ta filen "normalize.css" fra mappen "bower_components / normalize-css", komprimere den og skrive den inn i temaets stil.css-fil.
Hvis du lykkes, bør du se dette i din terminal:
Oppdater din Ghost frontend. Du kan bekrefte at "normalize.css" er lagt til hvis du ser
Merk: Når vi går, vil vi gjøre noen tilpasninger til filen normalize.css.
Fordi vi skal skape mange av våre egne stiler, vil vi unngå dupliserte stiler for elementer som kropp og h1 siden det er unødvendig overhead for nettleseren, så transplanterer vi noen stiler fra "normalize.css" til våre egne LESS-filer.
Før vi velger skrifter vi skal bruke i vårt tema, skal vi angi en foreløpig bredde for innholdet og legge til noen grunnleggende typografiinnstillinger. Det vil bli mye lettere å prøve og bestemme fonter når de er i en smalere plass og satt til skriftstørrelsen de mest sannsynlig blir brukt på.
For å gjøre dette skal vi begynne å redigere dine MINDER filer.
Før vi begynner å redigere MINDRE, hvis du er ny på det, ta et øyeblikk å gjøre deg kjent med sitt system med:
Du trenger ikke en grundig forståelse på dette punktet, det bør være tilstrekkelig bare for å lese åpningsseksjonen på LESSES hjemmeside, dvs. hver av seksjonene med tilhørende titler til punktliste over.
For å se LESS kode endringer reflektert på forsiden av nettstedet ditt, skal vi aktivere automatisk MINDRE kompilering og skriving av CSS i temaet ditt.
I din terminal, (fortsatt i "UberThemeStyles" -mappen, kjør kommandoen grunt ur.
Dette vil starte "watch" -oppgaven, der du vil se dine mindre filer og filen Normalize.css for eventuelle endringer. Når noen endringer i filene blir oppdaget, vil LESS automatisk bli kompilert, og CSS vil bli kombinert, minifisert og skrevet inn i temaets "style.css" -fil.
Merk: Når du vil stoppe "watch" -oppgaven, gå tilbake til terminalen din og trykk CTRL + C. Når du blir bedt om å skrive y og trykk deretter på TAST INN.
I din foretrukne kodeditor, åpne filen "layout.less" fra "UberThemeStyles> LESS" -mappen.
Legg til følgende kode og lagre deretter:
.wrapper_uber bredde: 100%; maksimal bredde: 40em; margin: 0 auto;
Denne koden gjør noen ting:
bredde eiendom til en eksplisitt verdi. I stedet, bredde er satt til 100%, så det vil fylle hele vinduet i en hvilken som helst enhet med en oppløsning mindre enn 40 meter bred.max bredde eiendom for å begrense innpakningen til ikke større enn 40ems bred på større oppløsninger.em verdi, ikke en px verdi.Merk: Vi skal justere denne bredden senere for optimal lesbarhet når vi har valgt våre skrifter og dermed vet hvor bredt våre brev kommer til å være. Verdien av 40ems er bare plassholder.
Oppdater din forside. Det burde nå ha smalt ned slik:
Åpne filen "normalize.css" fra mappen "UberThemeStyles> bower_components> normalize-css" for redigering.
Kommentere eller slette kropp, h1 og alt en stiler, (linje 76 til 121), fordi vi skal skrive oss selv og ikke ønsker overhead av duplikatdeklarasjoner.
Åpne filen "typography.less" fra "UberThemeStyles> LESS" -mappen for redigering.
Erstatt all koden deri med følgende kode og lagre deretter:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; linjehøyde: 1.313em; // // // Styles // ** body margin: 0; font-familie: @default_font; linjehøyde: @golden + 0em; // angi vanlig linjehøyde til det gyldne forholdet en bakgrunn: gjennomsiktig; a: link, a: besøkt a: fokus disposisjon: tynn prikket; a: aktiv, a: svever disposisjon: 0; // Klassisk typografisk skala: Hvis standard 16px total størrelse skal være: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; skriftstørrelse: 3em; margin: 0,563em 0; h2 .HeaderFont; skriftstørrelse: 2,25em; margin: 0,625em 0; h3 .HeaderFont; skriftstørrelse: 1.5em; margin: 1.313em 0; h4 .HeaderFont; skriftstørrelse: 1.313em; margin: 1.313em 0; h5 .HeaderFont; skriftstørrelse: 1,125em; margin: 1.313em 0; h6 .HeaderFont; skriftstørrelse: 1em; margin: 0.75em 0;
Det er ganske mye kode vi har lagt til på en gang der. La meg forklare hva som skjer.
mixins
Det første du ser øverst er mixin .HeaderFont (). Fordi vi skal bruke samme fontfamilie, font-vekt og linjehøyde for alle våre overskriftskoder har vi lagt alle reglene for disse egenskapene i en enkelt mixin. Hvis du ser på stilen for hver overskriftskode, ser du .HeaderFont () mixin ringte inn på første linje.
På denne måten kan vi oppdatere mixin etter behov, og alle overskriftstagsstiler vil automatisk bli oppdatert.
variabler
Du vil også legge merke til bruken av noen variabler i koden, dvs.. @header_font, @default_font og @gylden.
Verdien av hver av disse variablene er satt i filen "variables.less" i "UberThemeStyles> LESS" -mappen. Denne filen blir først åpnet under kompilering av LESS-koden, noe som betyr at variablene den inneholder, kan brukes i noen av dine andre MINDER filer.
Vi bruker variablene @header_font og @default_font å angi navnet på skriftene som skal brukes i hele temaet ditt, slik at det blir veldig enkelt å bytte fra ett valg til et annet mens du prøver fonter ut.
De @gylden variabel representerer en verdi på 1.618, det gyldne forholdet. Dette nummeret har blitt brukt siden tiden til de gamle grekerne til å skape flotte layouter i alt fra kunst til arkitektur, og vi vil bruke det tungt gjennom hele designen.
Legge til enheter til variabler
Det er best praksis i MINDRE å definere numeriske variabler uten vedlagte enheter. Dette er slik at du kan utføre aritmetikk med sine verdier.
For eksempel, med min @gylden variabel satt som 1.618 Jeg kan gjøre ting som å multiplisere den verdien, halvere den og så videre. Men hvis jeg hadde satt den til 1.618em ville jeg løpe i problemer med noen beregninger jeg kanskje vil utføre.
Så det er alltid best å sette variabler som bare tall, og deretter legge til enheter innenfor de aktuelle stilene eller mixins.
Du kan legge til enheter på følgende måte:
@variable + 0em
@variable + 0rem
@variable + 0%
Så i et nøtteskall, bare legg til enheten du vil bruke som om du utførte en tilleggsberegning, med en verdi på null sett på den enheten.
Typografisk skala
Skriftstørrelsene er alle satt til en klassisk typografisk skala, konvertert til em i stedet for px verdien, basert på den vanligste standard skriftstørrelsen er 16px.
Ved å gjøre dette får vi estetisk appell og lesbarhet av skalaen, men hvis en leverandør eller bruker endrer standard skriftstørrelse til noe annet enn 16px, vil hele skalaen skifte proporsjonalt med det.
Overskrift tag margins
Med en standardisert em Basert linjehøyde for alle overskrifter, er det viktig å justere margene for hver slik at overskriftene vil se fint ut og være lesbare når de plasseres under den andre, så vel som når de plasseres i strømmen av vanlig tekst.
Verdiene som brukes i margene er de jeg personlig har funnet å være best for hver overskriftskode. Du får se effekten av disse innstillingene i neste trinn.
Oppdater din forside. Det skulle nå se slik ut:
Vi skal nå velge skrifttyper som skal brukes til topptekst og vanlig tekst. Vi lager resten av temaets layout og design rundt disse skriftvalgene.
I denne tilnærmingen begynner vi ikke med en Photoshop-mockup, men du bør fortsatt ha en viktig ide om hvilken type overordnet stil du vil ha. Jeg går for et mykt, lyst fargevalg, med en flat, men lett strukturert stil, så jeg vil ha relativt myke, lette skrifttyper for å følge med det.
Gå over til Google Fonts og velg en skrift for overskriftene dine, pluss en skrift for din vanlige tekst, og sørg for å sjekke hvordan de ser på noen forskjellige størrelser og, hvis tilgjengelige, vekt: http://www.google.com/ fonter /
Jeg endte med å velge Oxygen for headertekst og Open Sans for den vanlige teksten.
Når fonter er valgt, kan du legge dem inn i temaet ditt.
Åpne filen "default.hbs" fra rotmappen til temaet ditt.
Under ! Stiler kommentere og over lenken til stilarket ditt, legg til følgende linje og lagre:
Merk: Slik oppretter du en nettadresse for alle Google-skrifttyper:
http://fonts.googleapis.com/css?family=Font+Name + tegn| symbol: på slutten av skrifttypenavnet, etterfulgt av kommaseparerte verdier, f.eks. : 300,400,700,300italic, 400italic, 700italic Åpne filen "variables.less" fra "UberThemeStyles> LESS" -mappen for redigering.
Finn disse to linjene:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Rediger dem for å lese:
@default_font: 'Open Sans', Arial, Helvetica, sans-serif; @header_font: 'Oxygen', Arial, Helvetica, sans-serif;
I filen "typography.less" legger du til en font-vekt av 400 til din .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; linjehøyde: 1.313em; font-weight: 400;
Også i filen "typography.less", legg til en font-vekt av 300 til din kropp stil:
kropp margin: 0; font-familie: @default_font; linjehøyde: @golden + 0em; // angi vanlig linjehøyde til den gyldne ratioens skrifttype: 300;
Merk: Disse var vekter jeg følte så best ut for disse spesielle skrifttyper, og for den lette stilen jeg skal til.
Oppdater din forside. Du bør nå se skriftvalgene dine på plass:
Før vi går til den siste delen av vår opplæringsserie, har vi en eller to stylingdetaljer for å ta vare på. I neste avlevering ser vi på farge og definerer noen grunnleggende standardinnstillinger for layout.
