Prosjekt Fortsetter vårt nettsted Bygg med Middleman

I denne opplæringen fortsetter vi å bygge vårt podcast-nettsted. Vi begynner å utforme vår indeks av innlegg, lage en fin liten bunntekst og kaste litt farge inn i blandingen. Alt som bruker Sass og Bourbon-pakken.

Vårt innleggsindeks

Høyre, hvor var vi? For øyeblikket ser ikke nettstedet vårt for stor ut:

For tiden er våre innlegg ikke justert til noe annet enn venstre side, så vi trenger et rutenett for å fikse dette rotet. Vår elskede Bourbon Ryddig til redning! Først legger vi til en klasse innlegg som en wrapper for våre innlegg og gjør det til en ytre beholder- som sentrerer innholdet på siden.

I "kilde / index.html.erb":

 <% page_articles.each_with_index do |article, i| %> <%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
  <%= article.body %> <% end %>

Da må vi opprette en ny Sass-del for våre indeksstiler og bruke litt magi, så i "kilde / stylesheets / all.sass":

@import 'index_posts'

Og i "kilde / stylesheets / _index_posts.sass":

.innlegg + ytre beholder

Jeg føler også at det er en god ide å legge til en bakgrunnsfarge for å gjøre vår ytre beholder lett synlig-for nå.

Deretter forplikte seg til Git:

git add -all git commit -m 'Legger til Sass delvis for indeksposter Centers content'

Nyeste artikler, koder og kalendere er i "layout.erb" og gjelder ikke for øyeblikket. La oss fokusere isteden på å gjøre denne indekslisten av innlegg pop. La oss gi h2 tittel en klasse post-tittelen og la tittel og avsnitt av kroppseksemplar spenne for åtte (ut av tolv) kolonner på tvers av siden. Innleggene må også skiftes to kolonner fordi vi vil unngå at vår kopi går over hele siden og dermed overskrider en sunn linjebredde (mål) for lesing av 45-75 tegn.

Så i "kilde / index.html.erb":

 <% page_articles.each_with_index do |article, i| %> <%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
  <%= article.body %> <% end %>

Og i "kilde / stylesheets / _index_posts.sass":

.post-title, .posts p + shift (2) + span-kolonner (8)

Nå snakker vi. Innholdet vårt er justert og pent sentrert på siden. Det vi mangler er noen form for visuelt hierarki; våre h2 titlene er ikke mye større enn innholdet i innleggene våre. For å gi en bedre leseopplevelse, bør vi sørge for at titler og deres tilsvarende tekst har bedre visuell kontrast enn det.

For det første trenger vi bedre tekst til å jobbe med, så la oss gjøre bruk av en middlemanhjelp for dummy-tekst. La oss legge til en erb utvidelse til våre bloggposter og legg til følgende i våre testposter.

Merk: Vi trenger utvidelsen ".erb" bare fordi vi vil kjøre litt rubinkode mellom denne konstruksjonen <%= %>.

I "kilde / innlegg / 2012-01-01-eksempel-artikkel.html.markdown.erb":

Dette er et eksempel på artikkelen. Du vil sikkert slette den og skrive dine egne artikler! <%= lorem.sentences 5 %>

Vi går over detaljene i et øyeblikk, men først noen få flere stiler i "kilde / stylesheets / _index_posts.sass":

.post-tittel skriftstørrelse: 1.7em .posts p font-size: 1.05em margin-bottom: 4em

Det er litt lettere på øynene, ikke sant? Vi har justert overskriftene og avsnittene i en rimelig grad. En liten ekstra margin mellom innlegg gjør hele forskjellen. Når det gjelder hierachi, er det en god start.

Forplikte seg til å gi:

git add --all git commit -m 'Justerer størrelse for tittel og kroppstekst Tilfører dummy-tekst Legger til .erb-utvidelse til dummy-innlegg'

bunntekst

På med bunnteksten. Jeg tror vi skal ta vare på de grufulle flytende elementene på bunnen først. La oss pakke "Nylige artikler" og "Merker" i en footer og bli kvitt "etter år". Relevant merking er en del av det globale layoutet i "kilde / layouts / layout.erb". Finn koden i side tag nedenfor utbytte og tilpass det som følger. I "kilde / oppsett / layout.erb":

  Siste innlegg
  <% blog.articles[0… 10].each do |article| %> <%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
 <% end %> 
 
  Tags
  <% blog.tags.each do |tag, articles| %> <%= link_to "#tag (#articles.size)", tag_path(tag) %>
 <% end %>

Ovennevnte standardvirksomhet med bare å løpe gjennom våre innlegg og merker som følger med Middleman, er greit. Jeg vil imidlertid ha det litt smartere, og introdusere shuffling til både de siste innleggene og kodene. På den måten ser brukeren ikke bare de siste ti artiklene eller en stor liste med tagger, men en randomisert versjon av begge som alltid er ti gjenstander lenge. De bruker heller ikke mye plass og la meg justere begge elementene konsekvent i bunnteksten. Jeg omdøpte h3 for innlegg også, i "kilde / layouter / layout.erb":

  Tilfeldige innlegg
  <% blog.articles.shuffle[0… 10].each do |article| %> <%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
 <% end %> 
 
  Tags
  <% blog.tags.to_a.shuffle[0… 10].each do |tag, articles| %> <%= link_to "#tag (#articles.size)", tag_path(tag) %>
 <% end %>

### Justering

Jeg tror vi har forbedret brukeropplevelsen ganske mye gjennom den lille forbedringen. Ruby gjorde jobben vår super lett. Nå trenger denne oppslaget bare litt trykk for bedre justering. Vi lager en ny Sass delvis for bare bunnteksten. I "kilde / stylesheets / all.sass":

@import 'footer'

Og så i de delvise "kilde / stylesheets / _footer.sass":

footer + border-top i ytterkant: 1px solid $ base-border-farge-polstring: topp: 4em bunn: 4em .recent-innlegg + skift (2) + span-kolonner (6) .footer-tags + span-columns 2) .recent-innlegg, .footer-tags h3 skriftstørrelse: 1.7em li font-size: 1.05em

For å få noen konkrete testdata, la jeg til et par flere eksempel innlegg via mellommanngeneratoren og ga det litt dummy lorem-tekst. Via terminalen:

mellommannartikkel 'Din fancy tittel'

Jeg bør nok nevne at jeg også trengte å legge til en ".erb" -utvidelse til disse nye innleggene til dummy lorem-tekstgeneratoren. Frontmatteren inneholder et par flere koder for å leke med også.

I "kilde / innlegg / 2015-12-01-din-fancy-title.html.markdown.erb":

--- tittel: Eksempel Postdato: 2015-12-01 Tags: eksempel, bourbon, snill, mellommann --- Dette er et eksempel på artikkelen. Du vil sikkert slette den og skrive dine egne artikler! <%= lorem.sentences 5 %>

Målet var å ha minst ti innlegg og koder for å se om alt justeres riktig. La oss se hva vi har her:

Bakgrunnsfarger har fullfylt sin plikt for nå. La oss drepe dem og sjekke om vi er fornøyd med det faktiske resultatet:

Jeg tror vi kan forlate det slik for nå. Tid til å forplikte oss!

git legg til ... /layouts/layout.erb gco -m 'Tilpasser layout og legger til footer' git add ... /stylesheets/_footer.sass.../stylesheets/all.sass git commit -m 'Legger til stiler for bunntekst og import Sass partial' git legg til ... /posts/*.markdown.erb git commit -m 'Legger til en haug med dummy innlegg med: dummy lorem text dummy tags'

Utplassere

Før vi går videre, bør vi distribuere til GitHub Pages, sjekke vår fremgang og sørge for at vi ikke løper inn i noen overraskelser.

mellommann distribuere

Åpne nettleseren din, gå til yourusername.github.io/your_project_name og se om du er fornøyd med nettstedet ditt så langt.

Utdrag

Hva skal vi gjøre neste? Du har rett, bunnteksten skriker i store bokstaver EKSTRAKSJON! Vi skal ta

, lag en ny mappe for partials og legg markeringen der inne. I sin tur må vi gjøre det delvis fra "kilde / layout / layout.erb":

  <%= yield %> 
 <%= partial "partials/footer" %>

Deretter i den delvise "source / partials / _footer.erb":

  Tilfeldige innlegg
  <% blog.articles.shuffle[0… 10].each do |article| %> <%= link_to article.title, article %>
 <% end %> 
 
  Tags
  <% blog.tags.to_a.shuffle[0… 10].each do |tag, articles| %> <%= link_to "#tag", tag_path(tag) %>
 <% end %>

Hvis du har lagt merke til, har du sett at jeg fjernet datoen for listen over artikler i bunnteksten. Jeg gjorde dette av to grunner. Først og fremst skal vi spare litt mer plass, slik at vi ikke lett løper inn i scenariet at justeringen med kodene bryter når tittelen for innlegget er litt lengre. For det andre trodde jeg det er litt distraherende og legger ikke for mye.

Denne listen over tilfeldige artikler i bunnteksten er en nyttig måte å introdusere nye ting til publikum. Datoen spiller ikke en stor rolle i det. Det samme gjelder antall artikler for tagkoblingene. De kaster bort plass uten å legge for mye verdi. Også, hvis du ikke har for mange artikler for en bestemt tag, ser den ikke ut med en gang med en gang. Jeg vil helst ha mer plass til en stabil layout. Det føles også litt mer rent, men det er helt subjektivt.

Begå:

git add --all git commit -m 'Fjerer footer i delvis Fjerner dato fra postlinker i footer Fjerner antall artikler for koder i footer Ikke gitt nok verdi til å ofre plass'

Flere datoer

Mens vi er på det. La oss ta vare på datoen i våre indekstitler. Jeg tror deres størrelse er altfor fremtredende som ikke forbedrer vårt visuelle hierarki, og jeg liker ikke å ha det på slutten av tittelen. Jeg vil helst holde den på den andre siden og bruke den som et visuelt anker som ikke hopper rundt med varierende tittellengder.

I "kilde / index.html.erb":

 <% page_articles.each_with_index do |article, i| %> <%= article.date.strftime('%b %e') %> <%= link_to article.title, article %>
 <%= article.body %> <% end %>

Og i "kilde / stylesheets / _index_posts.sass":

.post-date skriftstørrelse: 0.7em margin: venstre: em (-80px) høyre: em (20px)

Tittelen på innlegget blir omorganisert og begynner med spannet som inneholder datoen. Jeg forlot et lite mellomrom mellom spekteret med datoen og tittelen selv, fordi hvis jeg justerer datoen med artikkelen kropps tekst for mindre skjermer, har jeg en naturlig en tegn mellom mellom dato og tittel - og trenger ikke å bruke Sass unødvendig.

Sass-koden er enkel. De negative marginene hjelper meg å visuelt forankre datoen til venstre for tittelen, og jeg brukte en Bourbon-funksjon for å konvertere deres pikselverdier til ems. Enkelt, men jeg liker hierarkiet vi har oppnådd. Øynene har noe å hoppe til via datoene og resten har nok hvite plass slik at vi kan holde seg borte fra å bruke grenser for å dele våre innlegg. Jeg glad!

Forplikte seg til å gi:

git add ... /index.html.erb.../stylesheets/_index_posts.sass git commit -m 'Endringer rekkefølge for dato og post tittel på indeks siden Styles dato for å lage visuelle anker'

Og distribuere:

mellommann distribuere

Farge

La oss bringe denne tingen til liv litt, men ikke for mye. Mindre er mer! Jeg dro til COLOURlovers og spilte med et par fargepaletter. Se opp for løsninger som kan forbedre ditt visuelle hierarki, men vær borte fra farger som er skrikende høyt. Jeg skjønner at dette er vett, siden farger kan være veldig subjektive og kulturelt lastet, men det er hvordan jeg nærmer seg det for øyeblikket uansett.

I våre variabler "kilde / stylesheets / base / _variables.scss":

$ matcha-green: # 78B69D; $ tekst-farge: mørkere ($ medium-grå, 20%);

Tilbake til virksomheten; Etter å ha spilt med noen ideer, la jeg til to nye globale farger til Sass-variablene fra Bitters. $ Matcha-grønne er nå fargen jeg ønsker å bruke for min identitet og plassert i denne filen, kan jeg gjenbruke denne variabelen hvor jeg vil. Skal jeg ombestemme meg hvilken grønn jeg vil, må jeg bytte den på et sted. Også, jeg var ikke så fornøyd med standardfarge for tekst. Ved å bruke en Sass-funksjon, mørket jeg en av de forhåndsinnstilte fargene fra Bitters med 20 prosent og lagret den som $ Text-farge. Posttitler på hover, samt datoer og kropps kopi mottok den nye tekstfargen. Standarden var for mørk etter min mening.

I "kilde / stylesheets / base_typography.scss":

// overgang: farge $ base-duration $ base-timing;

Og så i "kilde / stylesheets / _index_posts.sass":

.fontstørrelse etter tittel: 1.7em a + overgang (farge .4s brukervennlig) farge: $ matcha-grønn &: sveverfarge: $ tekstfarge .post-datofarge: $ tekstfarge .posts p farge: $ tekstfarge

Jeg har også lagt til en liten overgang gjennom en Bourbon mixin for å svinge over .post-tittelen. Dette endres fra $ Matcha-grønne til $ Text-farge over .4 sekunder. Sjekk artiklene mine om Bourbon Mixins hvis du vil vite mer.

I tilfelle du lurer på om ease-in-out del, det er en av 32 måter å gå overgangsadferd. ($ easy-in-out, som en $variabel, som i dokumentasjonen, vil kaste en feil) Det er en liten forbedring, men ser mye bedre ut enn nettleserens standardinnstillinger. For å gjøre dette arbeidet måtte jeg også uncomment standard overgangsadferd fra Bitters først i "base_typography.scss".

I "kilde / stylesheets / _footer.sass":

borderline-footer: 1px solid rgba ($ text-farge, .3) .recent-innlegg, .footer-tags farge: mørkere ($ mediumgrå, 20%) a + overgang (alle .1s brukervennlighet ) farge: $ tekstfarge &: sveverfarge: $ matcha-grønt grensebunn: 2px solid $ matcha-grønn

Til slutt endret jeg også fargene til bunnteksten. Dette gir oss et sammenhengende utseende og forhåpentligvis litt subtil undertrykkelse. Overgangsadfærden måtte sped opp for koblingene i bunnteksten. Siden de er gruppert så tett sammen, følte jeg det wold var bedre hvis de var litt snappier og understreket også.

Når det gjelder farger, gjorde jeg det motsatte som med titlene i indekslisten. Siden bunntekstlisten ikke trenger å være som til stede på siden - spesielt med så liten avstand mellom dem - ga jeg dem standard grå tekstfargen og bruker bare $ Matcha-grønne når du svinger. I dette eksemplet bruker vi bare hvitt plass og størrelsen på typen for å oppnå hierarki.

Oh, og grensen over fotfesten behøvde litt opasitet via Sass RGBA funksjon. Jeg skjønte at 30 prosent ugjennomtrengelighet er akkurat nok til å gjøre jobben sin uten å stikke ut så mye.

Ikke så loslitt utseende, for en så liten mengde kode. Nøyaktig hvordan jeg liker det - jo mindre kode du skriver, jo færre feil er det å bite deg!

Forplikte seg til å gi:

git add -all git commit -m 'Første forsøk på å justere farger Legger til ny merkefarge som $ matcha-green Legger til ny $ tekstfarge: Kropps kopi Posttitler svever Footer headers Passer over hoveroverganger Kommentarer ut Bitters standard overgang'

## Tweaks

En liten ting som irriterer meg, er linjens høyde på kroppens kopi. La oss tweak det også. I "kilde / stylesheets / _index_posts.sass":

.innlegg p linjehøyde: 1.35em

Begå:

git legg til ... /source/stylesheets/_index_posts.sass git commit -m 'Justerer linjens høyde for kropps kopi på indeks'

Og igjen, distribuere:

mellommann distribuere

Gå i stykker

God jobb så langt! Det er høy tid for en annen pause. I den neste opplæringen skal vi legge til en navbar og en "hero-enhet" på toppen. Ser deg der! Få deg en matbit og slapp av for litt!

Webdesign