Share
In diesem Lernprogramm bauen wir unsere Podcast-Site weiter auf. Wir fangen an, unser Inhaltsverzeichnis zu gestalten, erstellen eine schöne kleine Fußzeile und geben ein wenig Farbe in den Mix. All das mit Sass und der Bourbon-Suite.
Richtig, wo waren wir? Im Moment sieht unsere Seite nicht besonders gut aus:
Derzeit sind unsere Beiträge nicht auf etwas anderes als auf die linke Seite ausgerichtet. Daher benötigen wir ein Raster, um dieses Durcheinander zu beheben. Unser geliebter Bourbon Ordentlich zur Rettung! Zuerst fügen wir eine Klasse hinzu Beiträge als Wrapper für unsere Posts und machen es zu einem Außenbehälter das zentriert den Inhalt der Seite.
In "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Dann müssen wir ein neues Sass-Partial für unsere Indexstile erstellen und etwas Magie anwenden, also in „source / stylesheets / all.sass“:
@import 'index_posts'
Und in "source / stylesheets / _index_posts.sass":
.Pfosten + Außenbehälter
Ich denke auch, dass es eine gute Idee ist, eine Hintergrundfarbe hinzuzufügen, um unseren äußeren Behälter für den Moment sichtbar zu machen.
Dann verpflichten Sie sich zu Git:
git add -all git commit -m 'Fügt Sass-Partial für Index-Posts-Center-Inhalte hinzu'
Aktuelle Artikel, Tags und Kalenderartikel sind in "layout.erb" und betreffen uns im Moment nicht. Konzentrieren wir uns stattdessen darauf, diese Indexliste der Beiträge aufzulisten. Lass uns die geben h2 Titel eine Klasse posttitel und lassen Sie den Titel und die Absätze des Hauptteils acht (von zwölf) Spalten auf der Seite überspannen. Die Posts müssen ebenfalls um zwei Spalten verschoben werden, da wir vermeiden möchten, dass unsere Kopie über die gesamte Seite läuft und dadurch eine normale Zeilenbreite (Maß) für das Lesen von 45 bis 75 Zeichen überschritten wird.
Also in "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Und in "source / stylesheets / _index_posts.sass":
.post-title, .posts p + shift (2) + span-column (8)
Jetzt reden wir. Unser Inhalt ist auf der Seite ausgerichtet und schön zentriert. Was uns fehlt, ist jegliche Form von visueller Hierarchie. unsere h2 Titel sind nicht viel größer als der Inhalt unserer Beiträge. Um ein besseres Leseerlebnis zu bieten, sollten wir sicherstellen, dass Titel und zugehöriger Text einen besseren visuellen Kontrast aufweisen.
Erstens brauchen wir besseren Text, um damit arbeiten zu können, also verwenden wir einen Middleman-Helfer für Dummy-Text. Fügen wir ein erb Erweiterung unserer Blogposts und fügen Sie folgende Testpunkte hinzu.
Hinweis: Wir brauchen die Erweiterung „.erb“ nur, weil zwischen diesem Konstrukt etwas Ruby-Code ausgeführt werden soll <%= %>.
In „source / posts / 2012-01-01-example-article.html.markdown.erb“:
Dies ist ein Beispielartikel. Sie möchten es wahrscheinlich löschen und Ihre eigenen Artikel schreiben! <%= lorem.sentences 5 %>
Wir gehen gleich auf die Details ein, aber zuerst ein paar weitere Stile in „source / stylesheets / _index_posts.sass“:
.post-title Schriftgröße: 1.7em .posts p Schriftgröße: 1.05em Rand unten: 4em
Das ist ein bisschen einfacher für die Augen, nicht wahr? Wir haben die Überschriften und Absätze in angemessenem Umfang angepasst. Eine kleine zusätzliche Marge zwischen den Beiträgen macht den Unterschied. In Bezug auf die Hierarchie ist es ein guter Anfang.
Commit an Git:
git add --all git commit -m 'Passt die Größe für Titel und Text an. Fügt Dummy-Text hinzu. Fügt Dummy-Posts die Erweiterung .erb hinzu.'
Auf mit der Fußzeile. Ich denke, wir sollten uns zuerst um die gruseligen, schwebenden Elemente kümmern. Lassen Sie uns "Recent Articles" und "Tags" in eine Fußzeile packen und "By Year" loswerden. Das relevante Markup ist Teil des globalen Layouts in „source / layouts / layout.erb“. Den Code finden Sie im beiseite tag unten Ausbeute und passen Sie es wie folgt an. In "source / layouts / layout.erb":
Das obige Standardgeschäft des Durchlaufens unserer Posts und Tags, die mit Middleman geliefert werden, ist in Ordnung. Ich möchte es jedoch etwas intelligenter haben und sowohl die letzten Posts als auch die Tags neu einordnen. Auf diese Weise sieht der Benutzer nicht nur die letzten zehn Artikel oder eine riesige Liste von Tags, sondern auch eine randomisierte Version von beiden, die immer zehn Artikel umfasst. Sie nehmen auch nicht viel Platz in Anspruch und lassen beide Elemente in der Fußzeile einheitlich ausrichten. Ich habe das umbenannt h3 auch für Beiträge in "source / layouts / layout.erb":
### Ausrichtung
Ich denke, wir haben die Benutzererfahrung durch diese kleine Verbesserung ein bisschen verbessert. Ruby hat unseren Job sehr einfach gemacht. Nun muss dieses Markup nur noch ein wenig nach vorne gedrückt werden, um die Ausrichtung zu verbessern. Wir erstellen ein neues Sass-Partial nur für die Fußzeile. In "source / stylesheets / all.sass":
@import 'footer'
Und dann im partiellen "source / stylesheets / _footer.sass":
Fußzeile + oberer Container-Rand oben: 1px durchgehend $ Basis-Rand-Farbfüllung: oben: 4em unten: 4em .recent-posts + shift (2) + Abstandsspalten (6) .footer-tags + Abschnittsspalten ( 2) .recent-posts, .footer-Tags h3 Schriftgröße: 1.7em li Schriftgröße: 1.05em
Um greifbare Testdaten zu haben, habe ich über den Mittelsmann-Generator ein paar weitere Beispielposts hinzugefügt und ihm einen Dummy-Lorem-Text gegeben. Über das Terminal:
Mittelsmann-Artikel "Your Fancy Title"
Ich sollte wahrscheinlich erwähnen, dass ich diesen neuen Posts auch eine ".erb" -Erweiterung für den Dummy-Lorem-Textgenerator hinzufügen musste. Das Frontmatter enthält ein paar weitere Tags zum Spielen.
In „source / posts / 2015-12-01-your-fancy-title.html.markdown.erb“:
--- Titel: Beispiel Beitragsdatum: 2015-12-01 tags: Beispiel, Bourbon, ordentlich, Mittelsmann --- Dies ist ein Beispielartikel. Sie möchten es wahrscheinlich löschen und Ihre eigenen Artikel schreiben! <%= lorem.sentences 5 %>
Das Ziel war, mindestens zehn Posts und Tags zu haben, um zu sehen, ob alles richtig ausgerichtet ist. Mal sehen, was wir hier haben:
Die Hintergrundfarben haben vorerst ihre Pflicht erfüllt. Lassen Sie uns sie töten und prüfen, ob wir mit dem tatsächlichen Ergebnis zufrieden sind:
Ich denke, wir können es so lassen. Zeit, unsere Änderungen zu begehen!
git add… /layouts/layout.erb gco -m 'Passt das Layout an und fügt Fußzeile hinzu' git add… /stylesheets/_footer.sass… /stylesheets/all.sass git commit -m 'Fügt Stile für die Fußzeile hinzu und importiert Sass-Partialgit add… /posts/*.markdown.erb git commit -m 'Fügt eine Reihe von Dummy-Posts hinzu: Dummy-Lorem-Text-Dummy-Tags'
Bevor wir fortfahren, sollten wir uns auf GitHub Pages bereitstellen, unseren Fortschritt überprüfen und sicherstellen, dass wir keine Überraschungen erleben.
Zwischenhändler einsetzen
Öffnen Sie Ihren Browser und gehen Sie zu IhrBenutzername.github.io/Ihr_Projektname und sehen, ob Sie mit Ihrer Website bisher zufrieden sind.
Was sollen wir als nächstes tun? Du hast recht, die Fußzeile schreit in großen Buchstaben EXTRACTION! Wir nehmen die , Erstellen Sie einen neuen Ordner für Partials und legen Sie die Markierung dort ab. Umgekehrt müssen wir das teilweise aus "source / layouts / layout.erb" rendern:
<%= yield %><%= partial "partials/footer" %>
Dann im partiellen "source / partials / _footer.erb":
Wenn Sie genau aufgepasst haben, haben Sie gesehen, dass ich das Datum für die Liste der Artikel in der Fußzeile entfernt habe. Ich habe das aus zwei Gründen getan. Zunächst sparen wir etwas mehr Platz, damit wir nicht leicht auf das Szenario stoßen, dass die Ausrichtung mit den Tags bricht, wenn der Titel für den Beitrag etwas länger ist. Zweitens dachte ich, es wäre etwas ablenkend und fügt nicht viel hinzu.
Diese Liste der zufällig ausgewählten Artikel in der Fußzeile ist eine praktische Möglichkeit, dem Publikum neues Material vorzustellen. Das Datum spielt dabei keine große Rolle. Gleiches gilt für die Anzahl der Artikel für die Tag-Links. Sie verschwenden Platz, ohne zu viel Wert hinzuzufügen. Wenn Sie nicht zu viele Artikel für ein bestimmtes Tag haben, sieht es nicht gleich leer aus. Ich hätte lieber mehr Platz für ein stabiles Layout. Es fühlt sich auch etwas sauberer an, aber das ist völlig subjektiv.
Verpflichten:
git add --all git commit -m 'Extrahiert Fußzeile in Teil. Entfernt das Datum von den Post-Links in der Fußzeile. Entfernt die Anzahl der Artikel für Tags in der Fußzeile.
Während wir schon dabei sind. Kümmern wir uns um das Datum in unseren Indextiteln. Ich denke, dass ihre Größe zu groß ist, was unsere visuelle Hierarchie nicht verbessert, und ich mag es nicht, sie am Ende des Titels zu haben. Ich würde es lieber auf die andere Seite kleben und es als einen visuellen Anker verwenden, der bei unterschiedlichen Titellängen nicht herumspringt.
In "source / index.html.erb":
<% page_articles.each_with_index do |article, i| %><%= article.date.strftime('%b %e') %> <%= link_to article.title, article %>
<%= article.body %> <% end %>
Und in "source / stylesheets / _index_posts.sass":
.Größe nach dem Datum: 0.7em Rand: links: em (-80px) rechts: em (20px)
Der Titel des Beitrags wird neu angeordnet und beginnt mit dem Zeitraum, der das Datum enthält. Ich habe ein wenig Leerzeichen zwischen der Spanne mit dem Datum und dem Titel selbst gelassen, denn wenn ich das Datum für kleinere Bildschirme an den Text des Artikels anpasse, habe ich ein natürliches Leerzeichen zwischen Datum und Titel - und brauche es nicht Sass unnötig verwenden.
Der Sass-Code ist unkompliziert. Die negativen Ränder helfen mir, das Datum links vom Titel visuell zu verankern, und ich verwendete eine Bourbon-Funktion, um ihre Pixelwerte in ems zu konvertieren. Einfach, aber ich mag die erreichte Hierarchie. Die Augen haben über die Datumsangaben etwas zu bieten, und der Rest hat ausreichend Leerzeichen, so dass wir uns von der Verwendung von Grenzen zur Trennung unserer Beiträge fernhalten können. Ich bin glücklich!
Commit an Git:
git add… /index.html.erb… /stylesheets/_index_posts.sass git commit -m 'Ändert die Reihenfolge für Datum und Beitragstitel auf der Indexseite Formatvorlagen, um einen visuellen Anker zu erzeugen'
Und bereitstellen:
Zwischenhändler einsetzen
Lassen Sie uns dieses Ding ein bisschen zum Leben erwecken - aber nicht zu viel. Weniger ist mehr! Ich ging zu COLOURlovers und spielte mit ein paar Farbpaletten. Achten Sie auf Lösungen, die Ihre visuelle Hierarchie verbessern können, aber halten Sie sich fern von Farben, die schreiend laut sind. Mir ist klar, dass dies vage ist, da Farben sehr subjektiv und kulturell belastet sein können, aber so gehe ich im Moment sowieso vor.
In unseren Variablen "source / stylesheets / base / _variables.scss":
$ matcha-green: # 78B69D; $ Textfarbe: dunkler ($ mittelgrau, 20%);
Zurück zum Geschäftlichen; Nachdem ich mit einigen Ideen gespielt hatte, fügte ich meiner Sass-Variablendatei von Bitters zwei neue globale Farben hinzu. $ matcha-green ist nun die Farbe, die ich für meine Identität verwenden möchte, und in dieser Datei kann ich diese Variable verwenden, wo immer ich möchte. Sollte ich meine Meinung darüber ändern, welches Grün ich möchte, muss ich es an einem Ort ändern. Auch mit der Standardfarbe für Text war ich nicht sehr zufrieden. Mit einer Sass-Funktion verdunkelte ich eine der voreingestellten Farben von Bitters um 20 Prozent und speicherte diese als $ Textfarbe. Post-Titel auf Hover sowie Datums- und Haupttext erhielten die neue Textfarbe. Der Standard war meiner Meinung nach zu dunkel.
In "source / stylesheets / base_typography.scss":
// Übergang: Farbe $ Basisdauer $ Basiszeitpunkt;
Und dann in "source / stylesheets / _index_posts.sass":
.Post-title-Schriftgröße: 1.7em a + Übergang (Farbe. 4s Leichtgängigkeit) Farbe: $ matcha-green &: Schwebefarbe: $ text-color. post-date-color: $ text-color .posts p Farbe: $ Textfarbe
Ich habe auch einen leichten Übergang durch ein Bourbon-Mixin hinzugefügt, um zu schweben .posttitel. Das ändert sich von $ matcha-green zu $ Textfarbe Über .4 Sekunden. Schauen Sie sich meine Artikel über Bourbon Mixins an, wenn Sie mehr wissen wollen.
Falls Sie sich über die Frage wundern Bequemlichkeit Teilweise ist es eine von 32 Möglichkeiten, um Übergangsverhalten zu bestimmen. ($ ease-in-out, als $Variable, wie in der Dokumentation, wirft einen Fehler aus.) Es ist eine kleine Verbesserung, sieht aber viel besser aus als die Standardeinstellungen des Browsers. Um dies zu erreichen, musste ich das Standardübergangsverhalten von Bitters zuerst in "base_typography.scss" auskommentieren..
In "source / stylesheets / _footer.sass":
footer border-top: 1px durchgehende rgba ($ text-color, .3) .recent-posts, .footer-tags Farbe: dunkler ($ medium-grey, 20%) a + Übergang (alle .1s easy-in-out) ) farbe: $ text-color &: hover-farbe: $ matcha-green umrandung unten: 2px einfarbig $ matcha-green
Zuletzt habe ich auch die Farben für die Fußzeile angepasst. Dies gibt uns ein stimmiges Erscheinungsbild und hoffentlich eine subtile Untertreibung. Das Übergangsverhalten musste für die Links in der Fußzeile beschleunigt werden. Da sie so eng zusammengruppiert sind, empfand ich es als besser, wenn sie etwas knackiger und unterstrichen wären.
In Bezug auf die Farbe habe ich das Gegenteil getan wie bei den Titeln in der Indexliste. Da die Fußzeilenliste auf der Seite nicht so vorhanden sein muss - insbesondere mit so geringem Abstand -, habe ich ihnen die standardmäßige graue Textfarbe gegeben und nur die $ matcha-green beim Schweben In diesem Beispiel verwenden wir nur Whitespace und die Größe des Typs, um eine Hierarchie zu erreichen.
Oh, und die Grenze über der Fußzeile brauchte ein wenig Deckkraft über den Sass rgba Funktion. Ich dachte mir, dass 30 Prozent Deckkraft gerade ausreicht, um seine Arbeit zu erledigen, ohne so viel hervorzuheben.
Nicht zu schäbig aussehend, für so wenig Code. Genau so, wie ich es mag - je weniger Code Sie schreiben, desto weniger Bugs gibt es für Sie!
Commit an Git:
git add --all git commit -m 'Erster Farbanpassungsversuch Fügt neue Markenfarbe hinzu wie $ matcha-green Fügt neue Textfarbe hinzu: Textkörper Überschrift Kopfzeilen Überschriften Kopfzeilen Überträgt Hover-Übergänge Kommentar ausbrechen Bitters Standardübergang'
## Tweaks
Eine weitere Kleinigkeit, die mich irritiert, ist die Zeilenhöhe der Hauptteilkopie. Lass uns das auch optimieren. In "source / stylesheets / _index_posts.sass":
.Pfosten p Zeilenhöhe: 1.35em
Verpflichten:
git add… /source/stylesheets/_index_posts.sass git commit -m 'Passt die Zeilenhöhe für die Textkopie des Index an'
Und wieder bereitstellen:
Zwischenhändler einsetzen
Bis jetzt gute Arbeit! Es ist höchste Zeit für eine weitere Pause. Im nächsten Tutorial fügen wir eine Navbar und eine "Heldeneinheit" hinzu. Wir sehen uns dort! Holen Sie sich einen Snack und entspannen Sie sich für ein bisschen!
Accentsconagua