Share
Welkom bij het vierde deel van onze Ghost-thematoespecificatieserie. In de inleidende zelfstudie hebt u geleerd dat er twee fasen zijn om een thema te ontwerpen. Tijdens de afleveringen daarvan zijn we begonnen en voltooid wat we hebben aangeduid als "de eerste fase" van het maken van de sjablonen van uw thema. Dit vierde deel van onze serie neemt ons mee naar de volgende fase van thema-ontwerp, namelijk styling.
In dit deel gaan we onze typografie vormgeven en onze lay-outbesturingselementen maken. In het volgende deel zullen we onze styling voortzetten door ons kleurenschema te blokkeren en de basis leggen voor de responsiviteit van het thema.
Notitie: Deze tutorial veronderstelt een basiskennis van CSS.
Deze tutorial neemt je mee in een benadering van responsief ontwerp waar je misschien nog niet bekend mee bent. De aanpak zorgt ervoor dat ontwerpen reageren op meer dan alleen specifiek gerichte, gemeenschappelijke apparaatresoluties.
In plaats daarvan zullen ontwerpen:
Dit wordt gedaan door:
Accentsconagua
em of rem waarden, die flexibel zijn, en geen pixelwaarden, die inflexibel zijn, gedurende het hele ontwerp.Voordat we aan de styling beginnen, gaan we een aantal titels van de tagtags toevoegen aan je Ghost-site, zodat je kunt zien hoe je H1 tot H6-tags eruit zien.
U moet elke koptekstgrootte één regel onder de andere toevoegen om te zien hoe ze werken wanneer ze dicht bij elkaar worden geplaatst, en dan ook elke kop toevoegen met een regel reguliere tekst ertussen om te zien hoe ze eruit zien in de stroom van normale inhoud.
Voeg de volgende markeringen toe aan de bovenkant van je laatste Ghost-post, (je moet mogelijk lege regels toevoegen tussen elke regel) en deze vervolgens bijwerken:
Je bent in! Leuk. We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. Ga je gang en bewerk dit bericht om aan de slag te gaan en ontdek hoe het allemaal werkt! #Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en te krijgen jij begon. #Heading 1 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. ## Kop 2 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. ### Kop 3 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. #### Heading 4 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. ##### Rubriek 5 We hebben een klein berichtje samengesteld om je kennis te laten maken met de Ghost-editor en je op weg te helpen. ###### Rubriek 6
Om je te helpen de meest efficiënte werkstroom te gebruiken met je Ghost-themacreatie, heb ik een klein ontwikkelpakket voor je samengesteld dat je toegang geeft tot enkele echt handige tools en een aantal taken voor je automatiseert. Het is beschikbaar binnen de download van de hoofdbron.
In plaats van codering in ruwe CSS gebruiken we MINDER. Als je minder bekend bent met MINDER, kun je er alles over lezen op http://lesscss.org/
Het GhostThemingPackage zal omgaan met het compileren van uw LESS-code, evenals het verkleinen van uw CSS en het schrijven naar uw themamap.
Het zal ook de "LESSHat" -bibliotheek van mixins downloaden en beschikbaar maken, een fantastische gratis bron die de productie van CSS3 voor meerdere browsers snel en eenvoudig maakt: http://lesshat.com/
Bovendien zal het "normalize.css", "Modernizr" downloaden, plus een aantal responsieve iframe javascript voor u, en alles in uw thema combineren, verkleinen en schrijven.
Normalize.css standaardiseert basisweergave-elementen in alle browsers. Lees er meer over op http://necolas.github.io/normalize.css/
Met Modernizr kunnen oudere browsers moderne markeringen beter begrijpen. Lees er meer over op http://modernizr.com/
U hoeft slechts drie dingen geïnstalleerd om het GhostThemingPackage te gebruiken:
Je hebt Node.js al geïnstalleerd zoals je het hebt gebruikt om Ghost uit te voeren, maar je moet misschien Grunt en Bower installeren als je ze nog niet op je systeem hebt staan.
Grunt.js is een javascript task runner die we zullen gebruiken om LESS compileren en CSS-combinatie en -minificatie te automatiseren. Als je nog geen Grunt op je systeem hebt geïnstalleerd, kun je dit heel gemakkelijk via NPM installeren (node package manager, een onderdeel van node.js).
Om Grunt via NPM te installeren open een terminal (op elke locatie) en voer de volgende opdracht uit:
npm install -g grunt-cli
Zorg ervoor dat u de "-g" -markering opneemt, zodat Grunt wereldwijd beschikbaar is op uw systeem, dus op elke locatie waar u in werkt.
Bower.io is een geweldige pakketbeheerder die u eenvoudig toegang geeft tot alle verschillende soorten op het webontwerp georiënteerde script- en CSS-pakketten. Je kunt er meer over lezen op http://bower.io/
Net als Grunt kan Bower ook eenvoudig via NPM worden geïnstalleerd.
Notitie: Als je Git nog niet hebt geïnstalleerd, zul je dit moeten doen voordat je bower installeert.
Installatie-instructies voor Git zijn hier te vinden: http://git-scm.com/book/en/Getting-Started-Installing-Git
Belangrijk: Zie de instructies onderaan de pagina van Bower over het installeren van Git onder Windows: http://bower.io/#a-note-for-windows-users
Om Bower via NPM te installeren open een terminal (op elke locatie) en voer de volgende opdracht uit:
npm install -g bower
Nogmaals, zorg ervoor dat u de "-g" -markering opneemt, zodat Bower overal op uw systeem voor u beschikbaar is.
Na het downloaden van "GhostThemingPackage", pak je het ergens gemakkelijk toegankelijk uit, idealiter in dezelfde root-directory waar je Ghost-installatiemap zich in bevindt.
Bijvoorbeeld als je Ghost-installatie is geïnstalleerd C: \ Ghost pak dan het pakket uit naar jouw C: rijd ook, dus het belandt op C: \ GhostThemingPackage. (Plaats het niet in je Ghost-installatiemap).
U zou de volgende map en bestandsstructuur binnen moeten zien:
Hernoem de map van "GhostThemingPackage" naar "UberThemeStyles".
Open een terminal in de map "UberThemeStyles".
Voer het commando uit npm installeren.
Hiermee worden automatisch de vereiste Node.js-pakketten opgehaald die zullen worden gebruikt voor het compileren van LESS en het combineren en verkleinen van CSS en JavaScript.
Je zult veel berichten zoals deze zien terwijl NPM alles ophaalt:
Wacht tot al deze berichten zijn gestopt en je de opdrachtprompt weer ziet verschijnen.
Voer het commando uit installatie van prieel.
Net als de vorige stap, zal dit de vereiste pakketten van Bower.io ophalen; LESShat, Modernizer en Normalize.css
Nogmaals, u ziet een reeks berichten verschijnen in uw terminal: wacht tot ze klaar zijn en de opdrachtprompt verschijnt.
Controleer of u nu deze mapstructuur in uw map "UberThemeStyles" ziet:
Let op de aanwezigheid van de nieuwe mappen "bower_components" en "node_modules".
Als er submappen ontbreken in een van de mappen, verwijder dan die map en voer vervolgens de installatieopdracht opnieuw uit, d.w.z.. npm installeren voor de map "node_modules" of installatie van prieel voor de map "bower_components".
Open in je voorkeurscode-editor "Gruntfile.js" vanuit de hoofdmap van je map "UberThemeStyles".
Dit is het bestand dat alle automatiseringstaken zal vergemakkelijken tijdens het themastylingproces. Om het te laten werken, hoeven we alleen maar te vertellen waar Ghost is geïnstalleerd en wat de naam van je thema is.
Zoek op lijn 62 en 63 het volgende:
'ghost_location': '... / Ghost /', 'ghost_theme_name': 'YourThemeName',
Verander zonodig '… /Geest/' om het relatieve pad naar je Ghost-installatie weer te geven.
U hoeft de instelling niet te wijzigen als de map "UberThemeStyles" zich in dezelfde hoofdmap bevindt als uw Ghost-installatiemap, en je Ghost-installatiemap wordt eigenlijk "Ghost" genoemd.
Verander "YourThemeName" in "UberTheme".
Sla het bestand op.
Notitie: Je themapakket is nu geïnstalleerd en je kunt het bovenstaande proces in de toekomst herhalen om je in te stellen voor eventuele extra thema's die je maakt.
Het eerste dat we gaan doen, is om de stijlen van Normalize.css aan de stylesheet van uw thema toe te voegen. Dit zorgt ervoor dat ons thema op een gestandaardiseerde manier wordt weergegeven in alle browsers.
We gaan vervolgens een voorlopige breedte voor uw inhoud instellen, zodat u gemakkelijker typografische keuzes kunt beoordelen en we uw basisstijltyografiestijlen toevoegen.
Gebruik de opdracht in uw terminal (nog steeds in uw map "UberThemeStyles") grunt cssmin.
Dit zal het bestand "normalize.css" uit je map "bower_components / normalize-css" halen, comprimeren en in het styles.css-bestand van je thema schrijven..
Als dit lukt, moet u dit in uw terminal zien:
Verfris je Ghost-frontend. U kunt controleren of "normalize.css" is toegevoegd als u dit ziet
Notitie: Als we verder gaan, zullen we wat aanpassingen aanbrengen aan het bestand normalize.css.
Omdat we veel van onze eigen stijlen gaan maken, willen we dubbele stijlen vermijden voor elementen zoals lichaam en h1 omdat het onnodige overheadkosten met zich meebrengt voor de browser, dus we zullen enkele stijlen overzetten van "normalize.css" naar onze eigen aangepaste MINDER bestanden.
Voordat we de lettertypen kiezen die we in ons thema gaan gebruiken, gaan we een voorlopige breedte voor de inhoud instellen en een aantal standaard typografie-instellingen toevoegen. Het is veel eenvoudiger om lettertypen te testen en te beslissen wanneer ze zich in een smallere ruimte bevinden en worden ingesteld op de lettergrootte die ze waarschijnlijk zullen gebruiken op.
Om dit te doen gaan we beginnen met het bewerken van uw MINDER-bestanden.
Voordat we beginnen met het bewerken van MINDER, neem alsjeblieft een moment de tijd om vertrouwd te raken met het systeem van:
U hoeft op dit moment geen diepgaand begrip te hebben, het zou voldoende moeten zijn om alleen de openingssectie op de LESS-startpagina te lezen, d.w.z. elk van de secties met overeenkomende titels op de lijst met opsommingen hierboven.
Om uw wijzigingen in de LESS-code weer te geven aan de voorkant van uw site, activeren we automatisch LESS compileren en schrijven van CSS in uw thema.
Gebruik de opdracht in uw terminal (nog steeds in uw map "UberThemeStyles") gegrom horloge.
Hiermee start u de "watch" -taak, waarbij uw LESS-bestanden en uw bestand Normalize.css worden gecontroleerd op eventuele wijzigingen. Wanneer er wijzigingen in de bestanden worden gedetecteerd, wordt LESS automatisch gecompileerd en wordt uw CSS gecombineerd, verkleind en geschreven in het "style.css" -bestand van uw thema.
Notitie: Wanneer u de "kijk" -taak wilt stoppen, gaat u terug naar uw terminal en drukt u op CTRL + C. Wanneer gevraagd type Y en druk vervolgens op ENTER.
Open in de codebewerker van uw voorkeur het bestand "layout.less" uit de map "UberThemeStyles> LESS".
Voeg de volgende code toe en sla op:
.wrapper_uber width: 100%; maximale breedte: 40em; marge: 0 auto;
Deze code doet een paar dingen:
breedte eigenschap met een expliciete waarde. In plaats daarvan, breedte is ingesteld op 100%, zodat het het hele venster vult in elk apparaat met een resolutie van minder dan 40ems breed.Maximale wijdte eigenschap om de verpakking te beperken tot niet groter dan 40ems breed op grotere resoluties.em waarde, niet een px waarde.Notitie: We zullen deze breedte later aanpassen voor optimale leesbaarheid zodra we onze lettertypen hebben gekozen en dus weten hoe breed onze letters zullen zijn. De waarde van 40ems is alleen placeholder.
Ververs je voorkant. Het zou nu als volgt moeten zijn versmald:
Open het bestand "normalize.css" uit de map "UberThemeStyles> bower_components> normalize-css" om te bewerken.
Geef commentaar of verwijder de lichaam, h1 en alles een stijlen (regel 76 tot 121), omdat we de onze gaan schrijven en geen dubbele declaraties willen hebben.
Open het bestand "typography.less" uit de map "UberThemeStyles> LESS" om te bewerken.
Vervang alle code daarin door de volgende code en sla op:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; regelhoogte: 1.313em; // ** // Stijlen // ** hoofdtekst marge: 0; font-family: @default_font; regelhoogte: @golden + 0em; // stel de reguliere regelhoogte in op de gulden snede a background: transparent; a: link, a: visited a: focus outline: thin dotted; a: active, a: hover outline: 0; // Klassieke typografische schaal: als de standaard schaal van de 16px-totaalgrootte zou zijn: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; lettergrootte: 3em; marge: 0,563em 0; h2 .HeaderFont; lettergrootte: 2.25em; marge: 0,625em 0; h3 .HeaderFont; font-size: 1.5em; marge: 1,313em 0; h4 .HeaderFont; font-size: 1.313em; marge: 1,313em 0; h5 .HeaderFont; lettergrootte: 1.125em; marge: 1,313em 0; h6 .HeaderFont; lettergrootte: 1em; marge: 0.75em 0;
Er is nogal wat code die we daar allemaal tegelijk hebben toegevoegd. Laat me uitleggen wat er aan de hand is.
mixins
Het eerste dat je bovenaan ziet, is de mixin .HeaderFont (). Omdat we voor al onze headingtags dezelfde lettertypefamilie, lettertype en regelhoogte gebruiken, hebben we alle regels voor die eigenschappen in een enkele mixin geplaatst. Als u de stijl voor elke headingtag bekijkt, ziet u de .HeaderFont () mixin callde op de eerste regel.
Op deze manier kunnen we de mixin naar behoefte bijwerken en worden alle headingtagstijlen ook automatisch bijgewerkt.
Variabelen
Je zult ook het gebruik van sommige variabelen in de code opmerken, dat wil zeggen. @header_font, @standaardlettertype en @gouden.
De waarde van elk van deze variabelen wordt ingesteld in het bestand "variables.less" in de map "UberThemeStyles> LESS". Dit bestand wordt eerst gebruikt tijdens het compileren van uw LESS-code, wat betekent dat de variabelen die het bevat, kunnen worden gebruikt in elk van uw andere LESS-bestanden.
We gebruiken de variabelen @header_font en @standaardlettertype om de naam van de lettertypen in te stellen die in uw thema moeten worden gebruikt, zodat het erg gemakkelijk is om van de ene keuze naar de andere te veranderen terwijl u de lettertypen uitprobeert.
De @gouden variabele vertegenwoordigt een waarde van 1.618, de gulden snede. Dit aantal is gebruikt sinds de tijd van de oude Grieken om prachtige lay-outs te maken in alles van kunst tot architectuur, en we zullen het tijdens het ontwerp zwaar gebruiken.
Eenheid toevoegen aan variabelen
Het is de beste methode om in MINDER numerieke variabelen te definiëren zonder toegevoegde eenheden. Dit is om u in staat te stellen om rekenkundige bewerkingen met hun waarden uit te voeren.
Bijvoorbeeld met mijn @gouden variabele ingesteld als 1.618 Ik kan dingen doen zoals die waarde vermenigvuldigen, halveren enzovoort. Als ik dit echter had ingesteld op 1.618em, zou ik problemen ondervinden met sommige berekeningen die ik zou willen uitvoeren.
Het is dus altijd het beste om variabelen alleen als getallen in te stellen en vervolgens eenheden aan te koppelen binnen de eigenlijke stijlen of mixins.
U kunt eenheden op de volgende manier toevoegen:
@variable + 0em
@variable + 0rem
@variable + 0%
Dus in een notendop, voeg gewoon de eenheid toe die u wilt gebruiken alsof u een optelberekening uitvoert, met een waarde van nul ingesteld op die eenheid.
Typografische schaal
De lettergroottes zijn allemaal ingesteld op een klassieke typografische schaal, geconverteerd naar em in plaats van px waarde, op basis van de meest gebruikelijke standaardlettergrootte 16px.
Hierdoor krijgen we de esthetische aantrekkelijkheid en leesbaarheid van de schaal, maar als een leverancier of gebruiker de standaardlettergrootte wijzigt in iets anders dan 16px, verschuift de hele schaal proportioneel mee.
Tagranden marcheren
Met een gestandaardiseerde em op basis van lijnhoogte voor alle rubrieken, is het belangrijk om de marges voor elke kop aan te passen, zodat koppen er mooi uitzien en leesbaar zijn wanneer ze onder elkaar worden geplaatst, evenals wanneer ze in de stroom van reguliere tekst worden geplaatst.
De waarden die in de marges worden gebruikt, zijn de waarden die ik persoonlijk het beste heb gevonden voor elke heading-tag. U zult het effect van deze instellingen in de volgende stap zien.
Ververs je voorkant. Het zou er nu als volgt uit moeten zien:
We gaan nu de lettertypen selecteren die worden gebruikt voor koptekst en reguliere tekst. We maken de rest van de lay-out en het ontwerp van het thema rond deze lettertypeselecties.
In deze benadering beginnen we niet met een Photoshop-mockup, maar je moet nog steeds een essentieel idee hebben van welk type algemene stijl je wilt. Ik ga voor een zacht, lichtkleurenschema, met een platte maar licht gestructureerde stijl, dus ik wil dat er relatief zachte, lichte lettertypen mee gaan.
Ga naar Google Fonts en kies een lettertype voor uw koppen, plus een lettertype voor uw gewone tekst, en zorg ervoor dat u controleert hoe ze naar een paar verschillende formaten en, indien beschikbaar, gewichten kijken: http://www.google.com/ fonts /
Uiteindelijk heb ik Oxygen gekozen als headertekst en Open Sans voor de reguliere tekst.
Zodra uw lettertypen zijn geselecteerd, kunt u deze toevoegen aan uw thema.
Open het bestand "default.hbs" in de hoofdmap van uw thema.
Onder de ! Stijlen opmerking en boven de link naar uw stylesheet, voeg de volgende regel toe en sla op:
Notitie: Een URL maken voor elk Google-lettertype (s):
http://fonts.googleapis.com/css?family=Font+Name + tekenen| symbool: aan het einde van de naam van het lettertype, gevolgd door door komma's gescheiden waarden, bijvoorbeeld. : 300,400,700,300italic, 400italic, 700italic Open het bestand "variables.less" uit de map "UberThemeStyles> LESS" om te bewerken.
Zoek deze twee lijnen:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans-serif;
Bewerk ze om te lezen:
@default_font: 'Open Sans', Arial, Helvetica, sans-serif; @header_font: 'Oxygen', Arial, Helvetica, sans-serif;
Voeg in uw bestand "typography.less" a toe lettertype dikte van 400 tot uw .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; regelhoogte: 1.313em; font-gewicht: 400;
Voeg ook een toe in uw "typography.less" -bestand lettertype dikte van 300 tot uw lichaam stijl:
body marge: 0; font-family: @default_font; regelhoogte: @golden + 0em; // stel de reguliere regelhoogte in op het lettertype-gewicht van de gulden snede: 300;
Notitie: Dit waren de gewichten die volgens mij het beste voor deze lettertypen leken, en voor de lichte stijl waar ik voor ga.
Ververs je voorkant. Je zou nu je lettertype keuzes op zijn plaats moeten zien:
Voordat we naar het laatste deel van onze tutorialserie gaan, hebben we een of twee stijldetails om voor te zorgen. In de volgende aflevering bekijken we de kleur en definiëren we enkele standaardlay-outstandaarden.
