Share
I denna handledning fortsätter vi att bygga vår podcasts webbplats. Vi börjar med att utforma vårt inlägg av inlägg, skapa en fin liten sidfot och kasta lite färg i mixen. Allt som använder Sass och Bourbon-sviten.
Rätt var var vi? För tillfället ser vår webbplats inte för stor ut:
För närvarande är våra inlägg inte anpassade till något annat än vänster sida, så vi behöver ett rutnät för att åtgärda denna röra. Vår älskade Bourbon snygging till räddningen! Först lägger vi till en klass inlägg som omslag för våra inlägg och gör det till ett yttre behållare som centrerar innehållet på sidan.
I "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 %>
Då behöver vi skapa en ny Sass partiell för våra indexformat och tillämpa lite magi, så i "source / stylesheets / all.sass":
@import 'index_posts'
Och i "source / stylesheets / _index_posts.sass":
.inlägg + yttre behållare
Jag tycker också att det är en bra idé att lägga till en bakgrundsfärg för att göra vår yttre behållare lätt synlig för nu.
Därefter begå Git:
git add -all git commit -m 'Lägger till Sass partiell för indexposter Centers content'
Senaste artiklar, taggar och kalender saker finns i "layout.erb" och berör inte oss just nu. Låt oss fokusera istället på att göra denna indexlista av inlägg pop. Låt oss ge h2 titel en klass Post titel och låt titeln och styckena av kroppsutskrift spänna åt åtta (av tolv) kolumner över hela sidan. Inläggen måste också byta två kolumner eftersom vi vill undvika att vår kopia springer över hela sidan och därmed överskrider en hälsosam linjebredd (mätning) för läsning av 45-75 tecken.
Så i "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 %>
Och i "source / stylesheets / _index_posts.sass":
.post-titel, .posts p + shift (2) + span-kolumner (8)
Nu snackar vi. Vårt innehåll är inriktat och snyggt centrerat på sidan. Vad vi saknar är någon form av visuell hierarki; vår h2 titlar är inte mycket större än innehållet i våra inlägg. För att ge en bättre läsupplevelse bör vi se till att titlar och motsvarande text har bättre visuell kontrast än det.
Först behöver vi bättre text att arbeta med, så låt oss utnyttja en medelhuggare för dummy-text. Låt oss lägga till en erb förlängning till våra bloggposter och lägg till följande i våra testinlägg.
Notera: Vi behöver bara ".erb" -tillägget eftersom vi vill springa lite rubinkod mellan denna konstruktion <%= %>.
I "source / posts / 2012-01-01-example-article.html.markdown.erb":
Detta är ett exempel på artikeln. Du vill noga ta bort den och skriva dina egna artiklar! <%= lorem.sentences 5 %>
Vi går över detaljerna om ett ögonblick, men först några fler stilar i "source / stylesheets / _index_posts.sass":
.post-typsnittstorlek: 1.7em .posts p font-size: 1.05em margin-bottom: 4em
Det är lite lättare på ögonen är det inte? Vi har justerat rubrikerna och styckena i en rimlig grad. En liten extra marginal mellan inlägg gör hela skillnaden. När det gäller hierachi är det en bra start.
Förbinda sig med Git:
git add --all git commit -m 'Justerar storlek för titel och kroppstext Lägger till dummy text Lägger till .erb förlängning till dummy inlägg'
På med sidfoten. Jag tror att vi bör ta hand om de hemska flytande elementen på botten först. Låt oss packa "Senaste artiklar" och "Taggar" i en sidfot och bli av med "efter år". Den relevanta markeringen är en del av den globala layouten i "source / layouts / layout.erb". Hitta koden i åt sidan taggen nedan avkastning och anpassa den enligt följande. I "källa / layouter / layout.erb":
Ovanstående standardverksamhet med att bara gå igenom våra inlägg och taggar som följer med Middleman är bra. Jag vill dock ha det lite smartare och introducera shuffling till både nya inlägg och taggar. På det sättet ser användaren inte bara de senaste tio artiklarna eller en stor lista med taggar, men en slumpmässig version av båda som alltid är tio saker långa. De förbrukar inte heller mycket utrymme och låter mig anpassa båda objekten konsekvent i sidfoten. Jag bytte namn på h3 för inlägg också i "källa / layouter / layout.erb":
### Anpassning
Jag tror att vi har förbättrat användarupplevelsen ganska lite genom den lilla förbättringen. Ruby gjorde vårt jobb super lätt. Nu behöver denna markering bara lite tryck för bättre anpassning. Vi skapar en ny Sass partiell för bara sidfoten. I "source / stylesheets / all.sass":
@import "footer"
Och sedan i den dela "källan / stylesheets / _footer.sass":
sidfot: ytterst: 4em botten: 4em .recent-inlägg + skift (2) + spänn-kolumner (6) .fotbollar + spaltkolumner ( 2) .recent-posts, .footer-tags h3 typsnittstorlek: 1.7em li fontstorlek: 1.05em
För att få några konkreta testdata lade jag till ett par fler exempel inlägg via mellannegeneratorn och gav den lite dummy loremtext. Via terminalen:
mellanhandartikel "Din fina titel"
Jag borde troligen nämna att jag också behövde lägga till en ".erb" -tillägg till dessa nya inlägg för dummy lorem textgeneratorn. Frontmatteren innehåller ett par fler taggar att spela med också.
I "source / posts / 2015-12-01-your-fancy-title.html.markdown.erb":
--- titel: Exempel Publiceringsdatum: 2015-12-01 Taggar: exempel, bourbon, snyggt, mellanhänder --- Detta är ett exempel på artikeln. Du vill noga ta bort den och skriva dina egna artiklar! <%= lorem.sentences 5 %>
Målet var att ha minst tio poster och taggar för att se om allt stämmer ordentligt. Låt oss se vad vi har här:
Bakgrundsfärgerna har fyllt sin plikt för nu. Låt oss döda dem och kontrollera om vi är nöjda med det faktiska resultatet:
Jag tror att vi kan lämna det så här för nu. Tiden att begå våra förändringar!
git lägg till ... /layouts/layout.erb gco -m 'Anpassar layout och lägger till footer' git lägg till ... /stylesheets/_footer.sass.../stylesheets/all.sass git commit -m 'Lägger till stilar för footer och import Sass partial' git lägg till ... /posts/*.markdown.erb git commit -m 'Lägger till en massa dummy inlägg med: dummy lorem text dummy tags'
Innan vi går vidare bör vi distribuera till GitHub Pages, kontrollera våra framsteg och se till att vi inte stöter på några överraskningar.
mellanhandsanläggare
Öppna din webbläsare, gå till yourusername.github.io/your_project_name och se om du är så nöjd med din webbplats.
Vad ska vi göra nästa? Du har rätt, sidfoten skriker i stora bokstäver EXTRACTION! Vi ska ta , skapa en ny mapp för partials och sätt in markeringen där inne. I sin tur behöver vi göra det delvis från "source / layouts / layout.erb":
<%= yield %><%= partial "partials/footer" %>
Sedan i den partiella "source / partials / _footer.erb":
Om du har uppmärksammat så har du sett att jag tog bort datumet för listan med artiklar i sidfoten. Jag gjorde det av två skäl. Först och främst kommer vi att spara lite mer utrymme så att vi inte lätt går in i scenariot att anpassningen med taggarna raderar när titeln för inlägget är lite längre. För det andra trodde jag det är lite distraherande och lägger inte till för mycket.
Den här listan över slumpmässiga artiklar i sidfoten är ett praktiskt sätt att presentera nya saker för publiken. Datumet spelar ingen stor roll i det. Detsamma gäller antal artiklar för taggarna. De slösar ut utrymme utan att lägga till för mycket värde. Om du inte har för många artiklar för en viss tagg ser den inte ut direkt omedelbart. Jag skulle hellre ha mer utrymme för en stabil layout. Det känns också lite renare, men det är helt subjektivt.
Begå:
git add -all git commit -m 'Extraherar footer till delvis Tar bort datum från postlänkar i footer Ta bort antal artiklar för taggar i footer Inte tillräckligt med värde för att offra plats "
Medan vi är på det. Låt oss ta hand om datumet i våra indextitlar. Jag tycker att deras storlek är alltför framträdande vilket inte förbättrar vår visuella hierarki och jag tycker inte om att ha den i slutet av titeln. Jag skulle hellre hålla den på andra sidan och använda den som ett visuellt ankare som inte hoppar runt med olika titellängder.
I "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 %>
Och i "source / stylesheets / _index_posts.sass":
.post-date fontstorlek: 0.7em marginal: vänster: em (-80px) höger: em (20px)
Titeln på posten omordnas och börjar med spänningen som innehåller datumet. Jag lämnade lite mellanslag mellan spännvidden med datumet och titeln själv, för om jag justerar datumet med artikeltexttexten för mindre skärmar har jag ett naturligt ett teckenutrymme mellan datumet och titeln - och behöver inte att använda Sass i onödan.
Sass-koden är enkel. De negativa marginalerna hjälper mig att visuellt förankra datumet till vänster om titeln och jag använde en Bourbon-funktion för att konvertera sina pixelvärden till ems. Enkelt, men jag gillar hierarkin vi har uppnått. Ögonen har något att hoppa till via datumen och resten har tillräckligt med blankutrymme så att vi kan hålla sig borta från att använda gränser för att dela upp våra inlägg. Jag är glad!
Förbinda sig med Git:
git add ... /index.html.erb.../stylesheets/_index_posts.sass git commit -m 'Ändrar ordning för datum och post titel på index sida Styles datum för att skapa visuellt ankare'
Och distribuera:
mellanhandsanläggare
Låt oss sätta denna sak till liv lite, men inte för mycket. Mindre är mer! Jag gick till COLOURlovers och spelade med ett par färgpaletter. Se upp för lösningar som kan förbättra din visuella hierarki, men håll dig borta från färger som är skrikigt höga. Jag inser att detta är vagt, eftersom färger kan vara mycket subjektiva och kulturellt laddade, men det är hur jag närmar mig det just nu.
I våra variabler "source / stylesheets / base / _variables.scss":
$ matcha-green: # 78B69D; $ text-color: darken ($ medium-gray, 20%);
Tillbaka till affärer; Efter att ha spelat med några idéer lade jag till två nya globala färger till min Sass-variabelfil från Bitters. $ Matcha gröna är nu den färg jag vill använda för min identitet och placerad i den här filen kan jag återanvända denna variabel varhelst jag vill. Ska jag ändra mig om vilken grön jag vill, måste jag ändra den på en gång. Jag var också inte så glad med standardfärgen för text. Med en Sass-funktion mörkade jag en av de förinställda färgerna från Bitters med 20 procent och lagrade den som $ Text-färg. Posttitel på svävaren, liksom datum och kropps kopia fick den nya textfärgen. Standardvärdet var för mörkt enligt min åsikt.
I "source / stylesheets / base_typography.scss":
// övergång: färg $ bas-duration $ bas-timing;
Och sedan i "source / stylesheets / _index_posts.sass":
.post-typsnittstorlek: 1.7om en + övergång (färg .4s enkelhet) Färg: $ matcha-green &: sväva färg: $ text-color .post-date color: $ text-color .posts p färg: $ text-färg
Jag lade också till en liten övergång genom en Bourbon mixin för att sväva över .Post titel. Detta ändras från $ Matcha gröna till $ Text-färg över .4 sekunder. Kolla mina artiklar om Bourbon Mixins om du vill veta mer.
Om du undrar om enkel in-out del, det är en av 32 sätt att tiden övergångsbeteende. ($ ease-in-out, som en $variabel, som i dokumentationen, kommer att kasta ett fel) Det är en liten förbättring men ser mycket bättre ut än webbläsarens standardinställningar. För att göra detta arbete var jag också tvungen att kommentera standardövergångsbeteendet från Bitters först i "base_typography.scss".
I "source / stylesheets / _footer.sass":
footer border-top: 1px solid rgba ($ text-color, .3) .recent-posts, .footer-tags färg: mörkare ($ mediumgrå, 20%) a + övergång (alla .1s in-out ) färg: $ text-color &: svävar färg: $ matcha-grön gräns botten: 2px solid $ matcha-green
Till sist anpassade jag också färgerna för sidfoten. Detta ger oss ett sammanhängande utseende och förhoppningsvis lite subtilt understatement. Övergångsbeteendet behövde spedas upp för länkarna i sidfoten. Eftersom de är grupperade så tätt tillsammans tyckte jag att det var bättre om de var lite snabbare och understryks också.
När det gäller färg gjorde jag det motsatta som med titlarna i indexlistan. Eftersom sidfotlistan inte behöver vara så närvarande på sidan, särskilt med så lite avstånd mellan dem, gav jag dem standard grå textfärg och använd endast $ Matcha gröna när svävar. I det här exemplet använder vi bara blankutrymme och storleken på typen för att uppnå hierarki.
Åh, och gränsen ovanför sidfoten behövde lite opacitet via Sass RGBA fungera. Jag tänkte att 30 procent opacitet är bara tillräckligt för att göra sitt jobb utan att sticka ut så mycket.
Inte så snuskig, för en så liten mängd kod. Exakt hur jag gillar det - ju mindre kod du skriver, desto färre buggar finns det att bita på dig!
Förbinda sig med Git:
git add -all git commit -m 'Första försök att stämma färger Lägger till ny varumärkesfärg som $ matcha-green Lägger till ny $ textfärg: Kropps kopia Posttitlar sväva Footer headers Sköter om svängövergångar Kommentarer ut Bitters default transition'
## Tweaks
En enda liten sak som irriterar mig är linjens höjd på kroppsskopian. Låt oss tweak det också. I "source / stylesheets / _index_posts.sass":
.inlägg på linjehöjd: 1.35em
Begå:
git lägg till ... /source/stylesheets/_index_posts.sass git commit -m 'Justerar linjehöjd för kroppskopia på index'
Och, återplacera:
mellanhandsanläggare
Bra jobb hittills! Det är dags för en annan paus. I nästa handledning ska vi lägga till en navbar och en "hjälteenhet" ovanpå. Vi ses där! Få dig ett mellanmål och slappna av lite!
Accentsconagua