Share
Välkommen till den fjärde delen av vår Ghost Theme Design Tutorial Series. I den inledande handledningen lärde du dig att det finns två steg att designa ett tema. Under delarna har vi påbörjat och slutfört det som vi kallat "första steget" för att skapa tematets mallar. Den här fjärde delen av serien tar oss in i nästa etapp av temat design, nämligen styling.
I denna del börjar vi utforma vår typografi och bygga våra layout kontroller. I den kommande delen fortsätter vi vår styling genom att blockera vårt färgschema och lägga grunden för temaresponsivitet.
Notera: Denna handledning förutsätter en grundläggande kunskap om CSS.
Denna handledning tar dig genom ett tillvägagångssätt för responsiv design som du kanske inte känner till. Tillvägagångssättet säkerställer att mönster kommer att reagera på mer än bara specifikt riktade gemensamma enhetsupplösningar.
I stället kommer mönster att
Detta görs av:
Accentsconagua
em eller rem värden, som är flexibla och inte pixelvärden, vilka är oflexibla, genom hela designen.Innan vi börjar om styling kommer vi att lägga till något rubrikmängdstestinnehåll på din Ghost-webbplats så att du kan se hur dina H1 till H6-taggar visas.
Du bör lägga till varje rubrikstorlek en rad under den andra för att se hur de fungerar när de placeras nära varandra och sedan också lägga till varje rubrik med en regelbunden text mellan att se hur de ser ut i flödet av normalt innehåll.
Lägg till följande markering till toppen av ditt senaste Ghost-inlägg, (du kan behöva lägga till tomma rader mellan varje rad) och uppdatera sedan det:
Du är med! Trevlig. Vi har lagt samman ett litet inlägg för att presentera dig för Ghost-redaktören och komma igång. Fortsätt och redigera det här inlägget för att komma igång och lära dig hur allting fungerar! #Heading 1 ## Rubrik 2 ### Rubrik 3 #### Rubrik 4 ##### Rubrik 5 ###### Rubrik 6 Vi har sammanställt ett litet inlägg för att presentera dig för Ghost-redaktören och få du började. #Heading 1 Vi har lagt samman ett litet inlägg för att presentera dig för Ghost-redaktören och få igång. ## Rubrik 2 Vi har lagt samman ett litet inlägg för att presentera dig för Ghost-redaktören och komma igång. ### Rubrik 3 Vi har sammanställt ett litet inlägg för att presentera dig för Ghost-redaktören och komma igång. #### Rubrik 4 Vi har sammanställt ett litet inlägg för att presentera dig för Ghost-redaktören och komma igång. ##### Rubrik 5 Vi har sammanställt ett litet inlägg för att presentera dig för Ghost-redaktören och komma igång. ###### Rubrik 6
För att hjälpa dig att använda det mest effektiva arbetsflödet med din Ghost-temabeskrivning, har jag sammanställt ett litet utvecklingspaket för dig som ger dig tillgång till några riktigt praktiska verktyg och automatiserar ett antal uppgifter för dig. Den är tillgänglig inom huvudkällan.
Istället för kodning i rå CSS använder vi LESS. Om du är ny till MINDRE kan du läsa allt om det på http://lesscss.org/
GhostThemingPackage hanterar sammanställningen av din LESS-kod, samt minifiera din CSS och skriva den i din temapapp.
Det kommer också att ladda ner och göra tillgängliga "LESSHat" -biblioteket av mixins, en fantastisk fri resurs som gör produktion av cross-browser CSS3 snabbt och enkelt: http://lesshat.com/
Dessutom kommer det att ladda ner "normalize.css", "Modernizr", plus något responsivt iframe javascript för dig, och kombinera, minska och skriva allt i ditt tema.
Normalize.css standardiserar grundläggande visningselement i alla webbläsare. Läs mer om det på http://necolas.github.io/normalize.css/
Modernizr gör det möjligt för äldre webbläsare att känna till modern uppmärksamhet. Läs mer om det på http://modernizr.com/
Du behöver bara tre saker installerade för att kunna använda GhostThemingPackage:
Du har redan Node.js installerat som du har använt det för att köra Ghost, men du kan behöva installera Grunt och Bower om du inte har dem på ditt system.
Grunt.js är en javascript-uppgiftslöpare som vi ska använda för att automatisera MINDER kompilering och CSS-kombination och -minifiering. Om du inte har Grunt på ditt system kan du installera det väldigt enkelt via NPM (nodpaket chef, en del av node.js).
För att installera Grunt via NPM, öppna en terminal (på vilken plats som helst) och kör följande kommando:
npm installera -g grunt-cli
Se till att du inkluderar "-g" -flaggan, eftersom det kommer att göra Grunt tillgängligt globalt på ditt system, dvs till vilken plats du arbetar i.
Bower.io är en utmärkt pakethanterare som ger dig enkel åtkomst till alla olika typer av webbdesign-orienterade skript och CSS-paket. Du kan läsa mer om det på http://bower.io/
Liksom Grunt kan Bower också installeras mycket enkelt via NPM.
Notera: Om du inte redan har Git installerad måste du göra det innan du installerar bower.
Installationsanvisningar för Git finns här: http://git-scm.com/book/en/Getting-Started-Installing-Git
Viktig: Se anvisningar längst ner på Bowers sida om installation av Git på Windows: http://bower.io/#a-note-for-windows-users
För att installera Bower via NPM, öppna en terminal (var som helst) och kör följande kommando:
npm installera -g bower
Återigen, se till att du inkluderar "-g" -flaggan så att Bower kommer att vara tillgänglig för dig överallt på ditt system.
Efter att ha laddat ner "GhostThemingPackage", extrahera den någonstans lättillgänglig, helst i samma rotkatalog som din Ghost installationsmapp finns i.
Om till exempel din Ghost-installation är på C: \ Ghost Ta sedan ut paketet till din C: kör också, så det slutar på C: \ GhostThemingPackage. (Lägg inte den in i din Ghost-installationsmapp).
Du bör se följande mapp och filstruktur inuti:
Byt namn på mappen från "GhostThemingPackage" till "UberThemeStyles".
Öppna en terminal i mappen "UberThemeStyles".
Kör kommandot npm installera.
Detta hämtar automatiskt de nödvändiga Node.js-paketen som kommer att användas för att samla LESS och kombinera och minska CSS och JavaScript.
Du får se många meddelanden så här medan NPM hämtar allt:
Vänta tills alla dessa meddelanden har slutat och du ser att kommandotolken visas igen.
Kör kommandot bower installation.
Mycket som föregående steg hämtar de nödvändiga paket från Bower.io; LESShat, Modernizer och Normalize.css
Återigen ser du en serie meddelanden visas i din terminal: Vänta tills de är färdiga och kommandotolken visas.
Verifiera att du nu ser den här mappstrukturen i mappen "UberThemeStyles":
Notera närvaron av de nya mapparna "bower_components" och "node_modules".
Om några undermappar saknas från endera mappen, radera den mappen och kör sedan installationskommandot igen, dvs. npm installera för mappen "node_modules" eller bower installation för mappen "bower_components".
I din föredragna kodredigerare öppnar du "Gruntfile.js" från rotkatalogen i din "UberThemeStyles" -mapp.
Det här är filen som underlättar alla automatiseringsuppgifter under din temaplattningsprocess. För att det ska fungera måste vi bara berätta för var du har Ghost installerat, och vad namnet på ditt tema är.
På ledningarna 62 och 63 hittar du följande:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourThemeName',
Ändra om nödvändigt "... / Ghost / ' för att återspegla den relativa vägen till din Ghost-installation.
Du behöver inte ändra inställningen om din "UberThemeStyles" -mapp finns i samma rotmapp som din Ghost-installationsmapp, och din Ghost-installationsmapp heter faktiskt "Ghost".
Ändra "YourThemeName" till "UberTheme".
Spara filen.
Notera: Ditt temapaket är nu installerat, och du kan i framtiden upprepa ovanstående process för att få setup för eventuella ytterligare teman du skapar.
Det första vi ska göra är att få stilar från Normalize.css till ditt temans stilark. Detta kommer att se till att vårt tema visas på ett standardiserat sätt över alla webbläsare.
Vi ska sedan ange en preliminär bredd för ditt innehåll så att det är lättare att bedöma typografival, och vi lägger till dina grundläggande typografi stilar.
I din terminal, (fortfarande i din "UberThemeStyles" -mapp), kör kommandot grunt cssmin.
Detta kommer att ta filen "normalize.css" från mappen "bower_components / normalize-css", komprimera den och skriva den i ditt temas stil.css-fil.
Om du lyckas ska du se detta i din terminal:
Uppdatera din Ghost framkant. Du kan verifiera att "normalize.css" har lagts till om du ser
Notera: När vi går vidare gör vi några justeringar till filen normalize.css.
Eftersom vi ska skapa många av våra egna stilar vill vi undvika dubbla stilar för element som kropp och h1 eftersom det inte behövs något för webbläsaren så transplanterar vi några stilar från "normalize.css" till våra egna LESS-filer.
Innan vi väljer de teckensnitt vi ska använda i vårt tema ska vi ange en preliminär bredd för innehållet och lägga till några grundläggande typografiinställningar. Det blir mycket lättare att pröva och bestämma teckensnitt när de är i ett smalare utrymme och ställa in till den teckensnittstorlek som de troligen kommer att användas vid.
För att göra detta ska vi börja redigera dina MINDER filer.
Innan vi börjar redigera MINDER, om du är ny på det snälla ta en stund att bekanta dig med sitt system av:
Du behöver inte ha en djup förståelse just nu, det borde vara tillräckligt för att bara läsa öppningsdelen på LESS startsida, dvs var och en av sektionerna med matchande titlar till punktlistan ovan.
För att se dina LESS-kodändringar som återspeglas på framsidan av din webbplats kommer vi att aktivera automatisk MINDRE sammanställning och skrivning av CSS i ditt tema.
I din terminal, (fortfarande i din "UberThemeStyles" -mapp, kör kommandot grunt klocka.
Detta kommer att initiera "watch" -uppgiften, varigenom dina MINDER filer och din Normalize.css-fil ses över för eventuella ändringar. När några ändringar av filerna upptäckas kommer LÄSER automatiskt att sammanställas, och din CSS kommer alla att kombineras, minimeras och skrivas in i temat "style.css" -fil.
Notera: När du vill stoppa uppgiften går du tillbaka till din terminal och trycker på CTRL + C. När du blir ombedd typ y och tryck sedan på STIGA PÅ.
I din föredragna kodredigerare öppnar du filen "layout.less" från "UberThemeStyles> LESS" -mappen.
Lägg till följande kod och spara sedan:
.wrapper_uber bredd: 100%; maxbredd: 40em; marginal: 0 auto;
Den här koden gör några saker:
bredd egendom till ett uttryckligt värde. Istället, bredd är inställd på 100% så det fyller hela fönstret i vilken enhet som helst med en upplösning mindre än 40ems bred.maximal bredd egendom för att begränsa omslaget till inte större än 40ems vid större upplösningar.em värde, inte en px värde.Notera: Vi ska justera denna bredd senare för optimal läsbarhet när vi har valt våra teckensnitt och därmed vet hur brett våra bokstäver kommer att vara. Värdet av 40ems är endast platshållare.
Uppdatera din främre ände. Det borde nu ha minskat så här:
Öppna filen "normalize.css" från mappen "UberThemeStyles> bower_components> normalize-css" för redigering.
Kommentera eller ta bort kropp, h1 och alla en stilar, (rad 76 till 121), för att vi ska skriva egna och inte vill ha dubbla förklaringar.
Öppna filen "typography.less" från "UberThemeStyles> LESS" -mappen för redigering.
Byt all kod i den med följande kod och spara sedan:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; linjehöjd: 1.313em; // // // Styles // ** body margin: 0; font-family: @default_font; linjehöjd: @golden + 0em; // ställa in den ordinarie linjens höjd till det gyllene förhållandet en bakgrund: transparent; a: länk, a: besökte a: fokus kontur: tunn prickad; a: aktiv, a: svävar disposition: 0; // Klassisk typografisk skala: Om standard 16px totalstorlek skulle vara: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; typsnittstorlek: 3em; marginal: 0,563em 0; h2 .HeaderFont; typsnittstorlek: 2,25em; marginal: 0,625em 0; h3 .HeaderFont; typsnittstorlek: 1.5em; marginal: 1.313em 0; h4 .HeaderFont; typsnittstorlek: 1.313em; marginal: 1.313em 0; h5 .HeaderFont; typsnittstorlek: 1,125em; marginal: 1.313em 0; h6 .HeaderFont; typsnittstorlek: 1em; marginal: 0.75em 0;
Det finns ganska lite kod som vi har lagt till på en gång där. Låt mig förklara vad som händer.
Mixins
Det första du ser på toppen är mixin .HeaderFont (). Eftersom vi ska använda samma teckensnittsfamilj, fontvikt och linjehöjd för alla våra rubrikmarkeringar har vi lagt alla regler för dessa egenskaper i en enda mixin. Om du tittar på stilen för varje rubrik, ser du .HeaderFont () mixin ringde in på första raden.
På så sätt kan vi uppdatera mixin efter behov och alla rubrikstämpelformat uppdateras också automatiskt.
variabler
Du märker också användningen av vissa variabler i koden, dvs. @header_font, @default_font och @gyllene.
Värdet för var och en av dessa variabler är inställd i filen "variables.less" i mappen "UberThemeStyles> LESS". Den här filen öppnas först under sammansättningen av din LESS-kod, vilket betyder att de variabler den innehåller kan användas i någon av dina andra MINDER filer.
Vi använder variablerna @header_font och @default_font för att ställa in namnet på de teckensnitt som ska användas i hela ditt tema så det blir väldigt lätt att byta från ett val till ett annat när du försöker skriva ut teckensnitt.
De @gyllene variabel representerar ett värde på 1.618, det gyllene förhållandet. Detta nummer har använts sedan de forntida grekernas tid för att skapa vackra layouter i allt från konst till arkitektur, och vi kommer att använda det kraftigt i hela designen.
Lägga till enheter i variabler
Det är bästa praxis i MINDER att definiera numeriska variabler utan bifogade enheter. Det här gör att du kan utföra aritmetik med sina värden.
Till exempel med min @gyllene variabel inställd som 1.618 Jag kan göra saker som att multiplicera det värdet, halvera det och så vidare. Men om jag hade ställt den till 1.618em skulle jag stöta på problem med vissa beräkningar som jag kanske vill utföra.
Så det är alltid bäst att ställa in variabler som endast siffror, sedan bifoga enheter inom de aktuella stilerna eller mixins.
Du kan lägga till enheter på följande sätt:
@variable + 0em
@variable + 0rem
@variable + 0%
Så i en nötskal, lägg bara till den enhet du vill använda som om du utför en additionberäkning, med ett värde på noll som är inställd på den enheten.
Typografisk skala
Stilsortsstorlekarna är alla inställda på en klassisk typografisk skala, konverterad till em istället för px värdet baserat på den vanligaste standardstorleken är 16px.
Genom att göra detta får vi estetisk appell och läsbarhet för skalan, men om en säljare eller användare ändrar standardteckenstorleken till något annat än 16px kommer hela skalan förskjutas proportionellt tillsammans med den.
Rubrikens marginalnummer
Med en standardiserad em baserad längdhöjd för alla rubriker är det viktigt att justera marginalerna för var och en så rubrikerna ser bra ut och kan läsas när de placeras under varandra och när de placeras i flödet av vanlig text.
De värden som används i marginalerna är de som jag personligen har funnit vara bäst för varje rubrik. Du får se effekten av dessa inställningar i nästa steg.
Uppdatera din främre ände. Det borde nu se ut så här:
Vi ska nu välja de teckensnitt som ska användas för rubrik och vanlig text. Vi skapar resten av tematets layout och design kring dessa fontval.
I detta tillvägagångssätt börjar vi inte med en Photoshop-mockup, men du borde fortfarande ha en väsentlig ide om vilken typ av övergripande stil du vill ha. Jag går för ett mjukt, ljust färgschema, med en platt men lätt strukturerad stil, så jag vill ha relativt mjuka, lätta typsnitt att följa med.
Gå över till Google-teckensnitt och välj ett teckensnitt för rubrikerna plus ett teckensnitt för din vanliga text. Se till att se hur de ser på några olika storlekar och, om tillgängliga, vikter: http://www.google.com/ teckensnitt /
Jag slutade med att välja Oxygen för headertext och Open Sans för den vanliga texten.
När du har valt dina teckensnitt kan du lägga till dem i ditt tema.
Öppna filen "default.hbs" från rotmappen i ditt tema.
Under ! Stilar kommentera och över länken till ditt stilark, lägg till följande rad och spara:
Notera: Skapa en webbadress för alla Google-teckensnitt:
http://fonts.googleapis.com/css?family=Font+Name + tecken| symbol: i slutet av typsnittet, följt av kommaseparerade värden, t.ex.. : 300,400,700,300italic, 400italic, 700italic Öppna filen "variables.less" från "UberThemeStyles> LESS" -mappen för redigering.
Hitta dessa två rader:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Redigera dem för att läsa:
@default_font: "Open Sans", Arial, Helvetica, sans-serif; @header_font: "Oxygen", Arial, Helvetica, sans-serif;
I din "typography.less" -fil lägger du till en font-weight av 400 till din .HeaderFont () blanda i:
.HeaderFont () font-family: @header_font; linjehöjd: 1.313em; font-vikt: 400;
Också i din "typography.less" -fil, lägg till en font-weight av 300 till din kropp stil:
kropp marginal: 0; font-family: @default_font; linjehöjd: @golden + 0em; // ställa in den ordinarie linjens höjd till den gyllene kvotens typsnitt: 300;
Notera: Dessa var vikterna jag kände mig bäst för dessa speciella typsnitt, och för den lätta stilen jag tänker på.
Uppdatera din främre ände. Du borde nu se dina teckensnitt på plats:
Innan vi flyttar till den sista delen av vår tutorial-serie har vi en eller två stylingdetaljer att ta hand om. I nästa del ser vi på färg och definierar några grundläggande layoutinställningar.
