Share
Willkommen zum vierten Teil unserer Ghost-Themenserie. Im Einführungs-Tutorial haben Sie gelernt, dass ein Thema in zwei Phasen gestaltet werden kann. In den darauf folgenden Raten haben wir begonnen und abgeschlossen, was wir als "erste Stufe" beim Erstellen der Vorlagen Ihres Themas bezeichnet haben. Dieser vierte Teil unserer Serie führt uns in die nächste Stufe des Themendesigns, nämlich das Styling.
In diesem Teil beginnen wir mit der Gestaltung unserer Typografie und der Erstellung von Layout-Steuerelementen. Im kommenden Teil setzen wir unser Styling fort, indem wir unser Farbschema ausblocken und die Grundlage für die Reaktionsfähigkeit des Themas schaffen.
Hinweis: Dieses Tutorial setzt grundlegende Kenntnisse in CSS voraus.
Dieses Tutorial führt Sie durch einen Ansatz für responsives Design, mit dem Sie möglicherweise nicht vertraut sind. Durch diesen Ansatz wird sichergestellt, dass Designs mehr als nur gezielt auf gängige Geräteauflösungen reagieren.
Stattdessen werden Designs:
Dies geschieht durch:
Accentsconagua
em oder rem Werte, die flexibel sind, und keine Pixelwerte, die im gesamten Entwurf unflexibel sind.Bevor wir mit dem Styling beginnen, fügen wir Ihrer Ghost-Site einen Inhalt zum Überschriftentag hinzu, damit Sie sehen können, wie Ihre H1- bis H6-Tags angezeigt werden.
Sie sollten jede Überschriftengröße um eine Zeile unter der anderen hinzufügen, um zu sehen, wie sie funktionieren, wenn sie dicht beieinander platziert werden. Fügen Sie dann auch jede Überschrift mit einer regulären Textzeile dazwischen hinzu, um zu sehen, wie sie im normalen Inhalt aussehen.
Fügen Sie das folgende Markup oben in Ihrem neuesten Ghost-Beitrag hinzu (möglicherweise müssen Sie zwischen den einzelnen Zeilen leere Zeilen hinzufügen), und aktualisieren Sie es:
Du bist in! Nett. Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. Bearbeiten Sie diesen Beitrag, um zu erfahren, wie alles funktioniert! #Heading 1 ## Überschrift 2 ### Überschrift 3 #### Überschrift 4 ##### Überschrift 5 ###### Überschrift 6 Wir haben einen kleinen Beitrag zusammengestellt, um Sie in den Ghost-Editor einzuführen du hast angefangen. #Heading 1 Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. ## Überschrift 2 Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. Überschrift 3 Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. #### Überschrift 4 Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. ##### Überschrift 5 Wir haben einen kleinen Beitrag zusammengestellt, um Sie mit dem Ghost-Editor vertraut zu machen und Ihnen den Einstieg zu erleichtern. ###### Überschrift 6
Um Ihnen bei der Erstellung Ihres Ghost-Themes einen möglichst effizienten Arbeitsablauf zu ermöglichen, habe ich ein kleines Entwicklungspaket für Sie zusammengestellt, mit dem Sie auf einige wirklich nützliche Tools zugreifen und eine Reihe von Aufgaben für Sie automatisieren können. Es ist im Hauptquellendownload verfügbar.
Anstatt in Raw CSS zu programmieren, verwenden wir LESS. Wenn Sie LESS noch nicht kennen, können Sie alles unter http://lesscss.org/ nachlesen.
Das GhostThemingPackage übernimmt das Kompilieren Ihres LESS-Codes sowie das Minimieren des CSS und das Schreiben in Ihren Designordner.
Es wird auch die "LESSHat" -Bibliothek von Mixins herunterladen und zur Verfügung stellen, eine fantastische kostenlose Ressource, die die Produktion von Cross-Browser-CSS3 schnell und einfach macht: http://lesshat.com/
Außerdem werden "normalize.css", "Modernizr" sowie einige ansprechende Iframe-Javascript für Sie heruntergeladen, kombiniert, verkleinert und in Ihr Design eingefügt.
Normalize.css standardisiert grundlegende Anzeigeelemente für alle Browser. Lesen Sie mehr dazu unter http://necolas.github.io/normalize.css/
Modernizr ermöglicht älteren Browsern einen Sinn für modernes Markup. Lesen Sie mehr dazu unter http://modernizr.com/
Sie benötigen nur drei Dinge, um das GhostThemingPackage verwenden zu können:
Sie haben Node.js bereits installiert, da Sie Ghost bereits ausgeführt haben. Möglicherweise müssen Sie jedoch Grunt und Bower installieren, wenn Sie sie noch nicht auf Ihrem System installiert haben.
Grunt.js ist ein Javascript-Task-Runner, den wir zur Automatisierung des LESS-Compilierens und der CSS-Kombination verwenden. Wenn Sie Grunt noch nicht auf Ihrem System installiert haben, können Sie es ganz einfach über NPM installieren (Node Package Manager, ein Teil von node.js)..
Um Grunt über NPM zu installieren, öffnen Sie ein Terminal (an einem beliebigen Ort) und führen Sie den folgenden Befehl aus:
npm install -g grunt-cli
Stellen Sie sicher, dass Sie das Flag "-g" angeben, da Grunt auf Ihrem System global verfügbar ist, d. H. An jedem Ort, an dem Sie arbeiten.
Bower.io ist ein großartiger Paketmanager, der Ihnen den einfachen Zugriff auf alle verschiedenen Arten von Webdesign-orientierten Skripts und CSS-Paketen ermöglicht. Sie können mehr darüber unter http://bower.io/ lesen.
Wie Grunt kann auch Bower sehr einfach über NPM installiert werden.
Hinweis: Wenn Sie Git noch nicht installiert haben, müssen Sie dies vor der Installation von Bower tun.
Installationsanweisungen für Git finden Sie hier: http://git-scm.com/book/de/Getting-Started-Installing-Git
Wichtig: Anweisungen zum Installieren von Git unter Windows finden Sie unten auf der Seite von Bower: http://bower.io/#a-note-for-windows-users
Um Bower über NPM zu installieren, öffnen Sie ein Terminal (an einem beliebigen Ort) und führen Sie den folgenden Befehl aus:
npm install -g bower
Vergewissern Sie sich erneut, dass Sie das "-g" -Flag verwenden, damit Bower überall auf Ihrem System verfügbar ist.
Extrahieren Sie es nach dem Herunterladen von "GhostThemingPackage" an einem leicht zugänglichen Ort, idealerweise in das gleiche Stammverzeichnis, in dem sich Ihr Ghost-Installationsordner befindet.
Zum Beispiel, wenn Ihre Ghost-Installation um ist C: \ Ghost Dann extrahieren Sie das Paket in Ihre C: Fahren Sie auch, so endet es bei C: \ GhostThemingPackage. (Legen Sie es nicht in Ihren Ghost-Installationsordner.).
Sie sollten den folgenden Ordner und die folgende Dateistruktur sehen:
Benennen Sie den Ordner von "GhostThemingPackage" in "UberThemeStyles" um..
Öffnen Sie ein Terminal im Ordner "UberThemeStyles".
Führen Sie den Befehl aus npm installieren.
Dadurch werden automatisch die erforderlichen Node.js-Pakete abgerufen, die zum Kompilieren von LESS und zum Kombinieren und Reduzieren von CSS und JavaScript verwendet werden.
Sie werden viele Nachrichten wie diese sehen, während NPM alles abruft:
Warten Sie, bis alle Nachrichten angehalten wurden und die Eingabeaufforderung erneut angezeigt wird.
Führen Sie den Befehl aus Bower installieren.
Ähnlich wie beim vorherigen Schritt werden die erforderlichen Pakete von Bower.io abgerufen. LESShat, Modernizer und Normalize.css
Wieder sehen Sie eine Reihe von Meldungen in Ihrem Terminal: Warten Sie, bis sie fertig sind und die Eingabeaufforderung erscheint.
Stellen Sie sicher, dass Sie diese Ordnerstruktur jetzt in Ihrem Ordner "UberThemeStyles" sehen:
Beachten Sie das Vorhandensein der neuen Ordner "bower_components" und "node_modules".
Wenn Unterordner in einem der Ordner fehlen, löschen Sie diesen Ordner und führen Sie den Installationsbefehl erneut aus, d. H. npm installieren für den Ordner "node_modules" oder Bower installieren für den Ordner "bower_components".
Öffnen Sie in Ihrem bevorzugten Code-Editor "Gruntfile.js" im Stammverzeichnis Ihres "UberThemeStyles" -Ordners.
Dies ist die Datei, die alle Automatisierungsaufgaben während Ihres Designvorgangs erleichtert. Damit es funktionieren kann, müssen wir nur sagen, wo Ghost installiert ist und wie der Name Ihres Designs lautet.
In Zeile 62 und 63 finden Sie Folgendes:
'ghost_location': '… / Ghost /', 'ghost_theme_name': 'YourThemeName',
Bei Bedarf ändern '… / Ghost /' um den relativen Pfad zu Ihrer Ghost-Installation anzugeben.
Sie müssen die Einstellung nicht ändern, wenn sich der Ordner "UberThemeStyles" im selben Stammordner wie der Ghost-Installationsordner befindet, und Ihr Ghost-Installationsordner heißt eigentlich "Ghost".
Ändern Sie "YourThemeName" in "UberTheme"..
Speicher die Datei.
Hinweis: Ihr Themenpaket ist jetzt installiert, und Sie können den obigen Vorgang in der Zukunft wiederholen, um das Setup für weitere Themen zu erstellen, die Sie erstellen.
Als erstes werden die Stile von Normalize.css dem Stylesheet Ihres Themes hinzugefügt. Dadurch wird sichergestellt, dass unser Thema in allen Browsern standardisiert angezeigt wird.
Wir werden dann eine vorläufige Breite für Ihren Inhalt festlegen, sodass die Auswahl der Typografie einfacher beurteilt werden kann. Außerdem werden Ihre grundlegenden Typografiestile hinzugefügt.
Führen Sie in Ihrem Terminal (immer noch in Ihrem Ordner "UberThemeStyles") den Befehl aus grunzen cssmin.
Dadurch wird die Datei "normalize.css" aus Ihrem Ordner "bower_components / normalize-css" entnommen, komprimiert und in die style.css-Datei Ihres Themes geschrieben.
Bei Erfolg sollten Sie dies in Ihrem Terminal sehen:
Aktualisieren Sie Ihr Ghost-Frontend. Sie können überprüfen, ob "normalize.css" hinzugefügt wurde, wenn Sie sehen
Hinweis: Im weiteren Verlauf nehmen wir einige Anpassungen an der Datei normalize.css vor.
Da wir viele unserer eigenen Stile erstellen, möchten wir doppelte Stile für Elemente wie vermeiden Karosserie und h1 Da es für den Browser kein unnötiger Aufwand ist, werden wir einige Stile aus "normalize.css" in unsere eigenen LESS-Dateien übertragen.
Bevor wir die Schriftarten auswählen, die wir in unserem Design verwenden werden, werden wir eine vorläufige Breite für den Inhalt festlegen und einige grundlegende Typografieeinstellungen hinzufügen. Das Testen und Entscheiden von Schriftarten ist viel einfacher, wenn sie sich in einem engeren Raum befinden und auf die Schriftgröße eingestellt sind, in der sie am wahrscheinlichsten verwendet werden.
Dazu werden wir Ihre LESS-Dateien bearbeiten.
Bevor Sie mit dem Editieren von LESS beginnen, sollten Sie sich einen Moment Zeit nehmen, um sich mit seinem System vertraut zu machen:
Sie benötigen an dieser Stelle kein tiefes Verständnis. Es sollte ausreichend sein, nur den Eröffnungsabschnitt auf der LESS-Homepage zu lesen, d. H. Jeden Abschnitt mit übereinstimmenden Titeln in der Aufzählungsliste oben.
Damit Ihre LESS-Code-Änderungen im Frontend Ihrer Site angezeigt werden, aktivieren Sie das automatische LESS-Kompilieren und Schreiben von CSS in Ihr Design.
Führen Sie in Ihrem Terminal (immer noch in Ihrem Ordner "UberThemeStyles") den Befehl aus grunzen beobachten.
Dadurch wird die Task "watch" initiiert, wobei Ihre LESS-Dateien und Ihre Normalize.css-Datei auf Änderungen überprüft werden. Wenn Änderungen an den Dateien festgestellt werden, wird LESS automatisch kompiliert und Ihr CSS wird kombiniert, minimiert und in die Datei "style.css" Ihres Themas geschrieben.
Hinweis: Wenn Sie die Aufgabe "Beobachten" anhalten möchten, kehren Sie zu Ihrem Terminal zurück und drücken Sie STRG + C. Wenn Sie dazu aufgefordert werden, geben Sie ein y und dann drücken EINGEBEN.
Öffnen Sie in Ihrem bevorzugten Code-Editor die Datei "layout.less" aus dem Ordner "UberThemeStyles> LESS".
Fügen Sie den folgenden Code hinzu und speichern Sie dann:
.wrapper_uber width: 100%; Max-Breite: 40em; Marge: 0 auto;
Dieser Code bewirkt einige Dinge:
Breite Eigenschaft auf einen expliziten Wert. Stattdessen, Breite auf 100% gesetzt ist, wird das gesamte Fenster in jedem Gerät mit einer Auflösung von weniger als 40ems ausgefüllt.maximale Breite Eigenschaft, um den Wrapper auf nicht mehr als zu beschränken 40ems bei größeren Auflösungen weit.em Wert, nicht ein px Wert.Hinweis: Wir werden diese Breite später anpassen, um eine optimale Lesbarkeit zu erreichen, sobald wir unsere Schriftarten ausgewählt haben und daher wissen, wie breit unsere Buchstaben sein werden. Der Wert von 40ems ist nur Platzhalter.
Aktualisieren Sie Ihr Frontend. Es hätte sich jetzt so verengen sollen:
Öffnen Sie die Datei "normalize.css" zur Bearbeitung im Ordner "UberThemeStyles> bower_components> normalize-css".
Kommentieren oder löschen Sie das Karosserie, h1 und alles ein styles (Zeile 76 bis 121), weil wir eigene schreiben und keinen Mehraufwand für doppelte Deklarationen haben wollen.
Öffnen Sie die Datei "Typografie.less" aus dem Ordner "UberThemeStyles> LESS" zur Bearbeitung.
Ersetzen Sie den gesamten Code durch den folgenden Code und speichern Sie dann:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; Zeilenhöhe: 1.313em; // ** // Stile // ** body margin: 0; font-family: @default_font; Zeilenhöhe: @golden + 0em; // setze die reguläre Linienhöhe auf den Goldenen Schnitt a background: transparent; a: link, a: besuchte a: Fokus Gliederung: dünn gepunktet; a: aktiv, a: hover Gliederung: 0; // Klassische typografische Skala: Wenn die Standardskala für die Größe von 16px gilt: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; Schriftgröße: 3em; Marge: 0,563 em 0; h2 .HeaderFont; Schriftgröße: 2.25em; Marge: 0,625 em 0; h3 .HeaderFont; Schriftgröße: 1.5em; Marge: 1,313 em 0; h4 .HeaderFont; Schriftgröße: 1.313em; Marge: 1,313 em 0; h5 .HeaderFont; Schriftgröße: 1.125em; Marge: 1,313 em 0; h6 .HeaderFont; Schriftgröße: 1em; Marge: 0,75 em 0;
Es gibt ziemlich viel Code, den wir dort auf einmal hinzugefügt haben. Lassen Sie mich erklären, was los ist.
Mixins
Das erste, was Sie oben sehen, ist das Mixin .HeaderFont (). Da wir für alle unsere Überschriften-Tags die gleiche Schriftfamilie, Schriftstärke und Zeilenhöhe verwenden werden, haben wir alle Regeln für diese Eigenschaften in einem einzigen Mixin zusammengefasst. Wenn Sie den Stil für jedes Überschrift-Tag betrachten, sehen Sie das .HeaderFont () mixin rief in der ersten Zeile an.
Auf diese Weise können wir das Mixin bei Bedarf aktualisieren und alle Überschriften-Tag-Stile werden automatisch aktualisiert.
Variablen
Sie werden auch die Verwendung einiger Variablen im Code bemerken, z. @header_font, @Standardschriftart und @golden.
Der Wert dieser Variablen wird in der Datei "variables.less" im Ordner "UberThemeStyles> LESS" festgelegt. Auf diese Datei wird beim Kompilieren Ihres LESS-Codes zuerst zugegriffen. Das bedeutet, dass die darin enthaltenen Variablen in allen anderen LESS-Dateien verwendet werden können.
Wir verwenden die Variablen @header_font und @Standardschriftart So legen Sie den Namen der Schriftarten fest, die im gesamten Design verwendet werden sollen, so dass es sehr einfach ist, von einer Auswahl zur anderen zu wechseln, wenn Sie die Schriftarten ausprobieren.
Das @golden Variable repräsentiert einen Wert von 1,618, den Goldenen Schnitt. Diese Zahl wurde seit der Zeit der alten Griechen verwendet, um schöne Layouts in allen Bereichen von Kunst bis Architektur zu erstellen, und wir werden sie im gesamten Design stark verwenden.
Einheiten zu Variablen hinzufügen
In LESS ist es am besten, numerische Variablen ohne angehängte Einheiten zu definieren. Damit können Sie mit ihren Werten arithmetisch arbeiten.
Zum Beispiel mit meinem @golden Variable gesetzt als 1.618 Ich kann Dinge wie das Multiplizieren dieses Wertes, die Halbierung und so weiter tun. Wenn ich es jedoch auf 1.618em gesetzt hätte, hätte ich Probleme mit einigen Berechnungen, die ich vielleicht ausführen möchte.
Daher ist es immer am besten, Variablen nur als Zahlen festzulegen und dann Einheiten innerhalb der jeweiligen Styles oder Mixins anzuhängen.
Sie können Einheiten auf folgende Weise hinzufügen:
@variable + 0em
@variable + 0rem
@variable + 0%
Fügen Sie also einfach die Einheit hinzu, die Sie verwenden möchten, als würden Sie eine Additionsberechnung durchführen, wobei der Wert Null für diese Einheit festgelegt ist.
Typografische Skala
Die Schriftgrößen sind alle auf eine klassische typografische Skala eingestellt, konvertiert in em anstatt px Dieser Wert basiert auf der am häufigsten verwendeten Standardschriftgröße 16px.
Dadurch erhalten wir den ästhetischen Eindruck und die Lesbarkeit der Skala. Wenn ein Hersteller oder Hersteller die Standardschriftgröße jedoch auf einen anderen Wert als 16px ändert, verschiebt sich die gesamte Skala proportional dazu.
Überschriften-Tag-Ränder
Mit einem standardisierten em Da für alle Überschriften die Zeilenhöhe verwendet wird, ist es wichtig, die Ränder für jede Überschrift anzupassen, damit die Überschriften gut aussehen und lesbar sind, wenn sie untereinander und in den Textfluss von normalem Text eingefügt werden.
Die Werte, die in den Rändern verwendet werden, sind die, die ich persönlich für jedes Überschrift-Tag am besten gefunden habe. Sie sehen den Effekt dieser Einstellungen im nächsten Schritt.
Aktualisieren Sie Ihr Frontend. Es sollte jetzt so aussehen:
Wir werden jetzt die Schriftarten auswählen, die für Überschriften und normalen Text verwendet werden. Der Rest des Layouts und Designs des Themas wird um diese Schriftauswahl herum erstellt.
Bei diesem Ansatz beginnen wir nicht mit einem Photoshop-Modell, aber Sie sollten trotzdem eine grundlegende Vorstellung davon haben, welche Art von Gesamtstil Sie wünschen. Ich wähle ein weiches, helles Farbschema mit einem flachen, aber leicht strukturierten Stil, daher möchte ich relativ weiche, leichte Schriften, die mit dem Schriftzug einhergehen.
Wechseln Sie zu Google Fonts, und wählen Sie eine Schriftart für Ihre Überschriften sowie eine Schriftart für Ihren regulären Text aus. Achten Sie darauf, wie sie einige verschiedene Größen und, sofern verfügbar, Gewichte betrachten: http://www.google.com/ Schriftarten /
Am Ende wählte ich Oxygen für den Kopfzeilentext und Open Sans für den normalen Text.
Sobald Ihre Schriftarten ausgewählt sind, können Sie sie Ihrem Design hinzufügen.
Öffnen Sie die Datei "default.hbs" im Stammordner Ihres Designs.
Unter dem ! Stile Kommentar und über dem Link zu Ihrem Stylesheet fügen Sie die folgende Zeile hinzu und speichern Sie:
Hinweis: So erstellen Sie eine URL für beliebige Google-Schriftarten:
http://fonts.googleapis.com/css?family=Font+Name + Zeichen| Symbol: am Ende des Schriftartnamens, gefolgt von durch Komma getrennten Werten, z. : 300,400,700,300italic, 400italic, 700italic Öffnen Sie die Datei "variables.less" aus dem Ordner "UberThemeStyles> LESS" zur Bearbeitung.
Suchen Sie diese beiden Zeilen:
@default_font: Arial, Helvetica, serifenlos; @header_font: Arial, Helvetica, serifenlos;
Bearbeiten Sie sie, um sie zu lesen:
@default_font: 'Open Sans', Arial, Helvetica, Serifenlose; @header_font: 'Sauerstoff', Arial, Helvetica, serifenlos;
Fügen Sie in Ihrer Datei "Typografie.less" eine Schriftgewicht von 400 zu Ihrem .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; Zeilenhöhe: 1.313em; Schriftgewicht: 400;
Fügen Sie auch in Ihrer Datei "Typografie.less" ein Schriftgewicht von 300 zu Ihrem Karosserie Stil:
body margin: 0; font-family: @default_font; Zeilenhöhe: @golden + 0em; // setze die reguläre Zeilenhöhe auf das Goldene Verhältnis font-weight: 300;
Hinweis: Dies waren die Gewichte, die ich für diese besonderen Schriftarten am besten aussah und für den leichten Stil, den ich anstrebe.
Aktualisieren Sie Ihr Frontend. Sie sollten jetzt Ihre Schriftartauswahl sehen:
Bevor wir zum letzten Teil unserer Tutorialserie übergehen, müssen wir ein oder zwei Styling-Details beachten. Im nächsten Teil werden wir uns die Farben ansehen und einige grundlegende Layout-Vorgaben definieren.
