Share
In questo tutorial continueremo a creare il nostro sito di podcast. Inizieremo lo styling del nostro indice dei post, creeremo un bel footer e gettiamo un po 'di colore nel mix. Tutto ciò che utilizza Sass e la suite Bourbon.
Bene, dove eravamo? Al momento il nostro sito non sembra troppo bello:
Attualmente i nostri post non sono allineati a qualcosa di diverso dal lato sinistro, quindi abbiamo bisogno di una griglia per risolvere questo pasticcio. Il nostro amato Bourbon Neat in soccorso! Per prima cosa aggiungeremo una classe messaggi come wrapper per i nostri post e renderlo un esterno-contenitore che centra il contenuto nella pagina.
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 %>
Quindi dobbiamo creare un nuovo partial Sass per i nostri stili di indice e applicare un po 'di magia, quindi in "source / stylesheets / all.sass":
@import 'index_posts'
E in "source / stylesheets / _index_posts.sass":
.post + contenitore esterno
Ritengo anche che sia una buona idea aggiungere un colore di sfondo per rendere il nostro contenitore esterno facilmente visibile, per ora.
Quindi impegnarsi a Git:
git add -all git commit -m 'Aggiunge Sass partial per i post degli indici Centra il contenuto'
Articoli recenti, tag e materiale del calendario si trovano in "layout.erb" e al momento non ci riguardano. Concentriamoci invece sulla creazione di questo elenco indice di post pop. Diamo il h2 intitola una classe titolo del post e lascia che il titolo e i paragrafi di copia del corpo si estendano per otto (su dodici) colonne nella pagina. I post devono spostare anche due colonne perché vogliamo evitare che la nostra copia venga eseguita su tutta la pagina e quindi superi una larghezza di riga (misura) sana per la lettura di 45-75 caratteri.
Quindi 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 %>
E in "source / stylesheets / _index_posts.sass":
.post-titolo, .posts p + shift (2) + span-columns (8)
Ora stiamo parlando. Il nostro contenuto è allineato e ben centrato sulla pagina. Ciò che ci manca è qualsiasi forma di gerarchia visiva; nostro h2 i titoli non sono molto più grandi del contenuto dei nostri post. Per offrire un'esperienza di lettura migliore, dovremmo assicurarci che i titoli e il testo corrispondente abbiano un contrasto visivo migliore di quello.
Innanzitutto, è necessario un testo migliore con cui lavorare, quindi utilizziamo un helper Middleman per il testo fittizio. Aggiungiamo un erb estensione al nostro blog e aggiungere quanto segue ai nostri messaggi di test.
Nota: abbiamo bisogno dell'estensione ".erb" solo perché vogliamo eseguire qualche codice ruby tra questo costrutto <%= %>.
In "source / posts / 2012-01-01-example-article.html.markdown.erb":
Questo è un articolo di esempio. Probabilmente vorrai cancellarlo e scrivere i tuoi articoli! <%= lorem.sentences 5 %>
Analizzeremo i dettagli in un attimo, ma prima alcuni altri stili in "source / stylesheets / _index_posts.sass":
.dimensione del font post-titolo: 1.7em .posts p font-size: 1.05em margin-bottom: 4em
Questo è un po 'più facile per gli occhi, vero? Abbiamo adeguato le intestazioni e i paragrafi in misura ragionevole. Un piccolo margine in più tra i post fa la differenza. In termini di gerarchia, è un buon inizio.
Impegnati a Git:
git add --all git commit -m 'Regola le dimensioni per il titolo e il testo del corpo Aggiunge il testo fittizio Aggiunge l'estensione .erb ai post fittizi'
Acceso con il piè di pagina. Penso che dovremmo occuparci prima degli orribili elementi fluttuanti sul fondo. Imballiamo "Articoli recenti" e "Tag" in un piè di pagina e sbarazzati di "Per anno". Il markup pertinente fa parte del layout globale in "source / layouts / layout.erb". Trova il codice nel a parte etichetta sotto dare la precedenza e adattarlo come segue. In "source / layouts / layout.erb":
L'attività di cui sopra, che prevede solo il passaggio in loop dei nostri post e dei tag forniti con Middleman, è soddisfacente. Voglio renderlo un po 'più intelligente, però, e introdurre mischiare sia i post recenti che i tag. In questo modo, l'utente non solo vede gli ultimi dieci articoli o un elenco enorme di tag, ma una versione randomizzata di entrambi è sempre lunga dieci elementi. Inoltre non consumano molto spazio e mi consentono di allineare entrambi gli elementi in modo coerente nel piè di pagina. Ho ribattezzato il h3 anche per i post, in "source / layouts / layout.erb":
### Allineamento
Penso che abbiamo migliorato l'esperienza utente un po 'attraverso quel piccolo miglioramento. Ruby ha reso il nostro lavoro super facile. Ora questo markup richiede solo una piccola spinta per un migliore allineamento. Creiamo un nuovo parziale di Sass per il solo piè di pagina. In "source / stylesheets / all.sass":
@import 'footer'
E poi nel parziale "source / stylesheets / _footer.sass":
footer + outer-container border-top: 1px solido $ base-border-color padding: top: 4em bottom: 4em .recent-posts + shift (2) + span-columns (6) .footer-tags + span-columns ( 2) .recent-posts, .footer-tags h3 dimensione del carattere: 1.7em li font-size: 1.05em
Per avere alcuni dati di test tangibili, ho aggiunto un paio di altri post di esempio tramite il generatore di middleman e gli ho dato un testo di lorem fittizio. Via il terminale:
articolo di mediatore 'Il tuo titolo stravagante'
Probabilmente dovrei menzionare che avevo anche bisogno di aggiungere un'estensione ".erb" a questi nuovi post per il generatore di testo di lorem fittizio. Il frontmaster contiene un paio di altri tag con cui giocare.
In "source / posts / 2015-12-01-your-fancy-title.html.markdown.erb":
--- titolo: Esempio Data post: 2015-12-01 tags: example, bourbon, necklace, middleman --- Questo è un esempio di articolo. Probabilmente vorrai cancellarlo e scrivere i tuoi articoli! <%= lorem.sentences 5 %>
L'obiettivo era di avere almeno dieci post e tag per vedere se tutto si allinea correttamente. Vediamo cosa abbiamo qui:
I colori di sfondo hanno soddisfatto il loro dovere per ora. Uccidili e controlla se siamo soddisfatti del risultato attuale:
Penso che possiamo lasciarlo così per ora. È ora di impegnare i nostri cambiamenti!
git add ... /layouts/layout.erb gco -m 'Adatta il layout e aggiunge footer' git add ... /stylesheets/_footer.sass... /stylesheets/all.sass git commit -m 'Aggiunge gli stili per il piè di pagina e importa Sass partial' git aggiungi ... /posts/*.markdown.erb git commit -m 'Aggiunge un sacco di post fittizi con: dummy lorem text dummy tags'
Prima di andare avanti, dovremmo implementare su GitHub Pages, controllare i nostri progressi e assicurarci che non ci siano sorprese.
distribuire l'intermediario
Apri il browser, vai a yourusername.github.io/your_project_name e vedi se sei soddisfatto del tuo sito finora.
Cosa dovremmo fare dopo? Hai ragione, il footer urla a caratteri cubitali ESTRAZIONE! Prenderemo il , crea una nuova cartella per i partial e inserisci il markup qui. A turno, dobbiamo renderizzare il partial da "source / layouts / layout.erb":
<%= yield %><%= partial "partials/footer" %>
Quindi nel parziale "source / partials / _footer.erb":
Se hai prestato molta attenzione, avrai visto che ho rimosso la data per l'elenco degli articoli nel footer. L'ho fatto per due ragioni. Prima di tutto, faremo risparmiare un po 'più di spazio in modo da non incappare facilmente nello scenario in cui l'allineamento con i tag si interrompe quando il titolo del post è un po' più lungo. In secondo luogo, ho pensato che fosse un po 'di distrazione e non aggiungesse troppo.
Questa lista di articoli randomizzati nel footer è un modo pratico per introdurre nuove cose al pubblico. La data non gioca un ruolo importante in questo. Lo stesso vale per il numero di articoli per i collegamenti dei tag. Sprecano spazio senza aggiungere troppo valore. Inoltre, se non hai troppi articoli per un determinato tag, non sembra subito vuoto. Preferirei avere più spazio per un layout stabile. Sembra anche un po 'più pulito, ma è completamente soggettivo.
Commettere:
git add --all git commit -m 'Estrai footer in partial Rimuove la data dai link dei post nel footer Rimuove il numero di articoli per i tag nel footer Non ha fornito un valore sufficiente per sacrificare lo spazio'
Mentre ci siamo. Prendiamoci cura della data nei nostri titoli di indice. Penso che le loro dimensioni siano troppo prominenti e che non migliorino la nostra gerarchia visiva e non mi piace averlo alla fine del titolo. Preferisco incollarlo dall'altra parte e usarlo come un ancoraggio visivo che non salti in giro con titoli di lunghezza variabile.
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 %>
E in "source / stylesheets / _index_posts.sass":
.dimensione font post-data: margine 0.7em: left: em (-80px) right: em (20px)
Il titolo del post è riordinato e inizia con lo span che contiene la data. Ho lasciato un piccolo spazio bianco tra l'intervallo e la data e il titolo stesso, perché se allineo la data con il testo del corpo dell'articolo per gli schermi più piccoli, allora ho uno spazio naturale di un carattere tra la data e il titolo e non ho bisogno usare Sass senza necessità.
Il codice Sass è semplice. I margini negativi mi aiutano ad ancorare visivamente la data alla sinistra del titolo e ho usato una funzione Bourbon per convertire i loro valori in pixel in ems. Semplice, ma mi piace la gerarchia che abbiamo raggiunto. Gli occhi hanno qualcosa da saltare attraverso le date e il resto ha abbastanza spazi in modo che possiamo stare lontano dall'usare i confini per dividere i nostri post. Io, felice!
Impegnati a Git:
git add ... /index.html.erb... /stylesheets/_index_posts.sass git commit -m 'Modifica l'ordine per data e post titolo nella pagina indice Stili data per creare un'ancora visiva'
E distribuire:
distribuire l'intermediario
Portiamo questa cosa alla vita un po ', ma non troppo. Meno è meglio! Sono andato a COLOURlovers e ho giocato con un paio di tavolozze di colori. Fai attenzione alle soluzioni che possono migliorare la tua gerarchia visiva, ma stai lontano dai colori che sono fragorosamente rumorosi. Mi rendo conto che questo è vago, dal momento che i colori possono essere molto soggettivi e culturalmente carichi, ma è così che mi avvicino al momento comunque.
Nelle nostre variabili "source / stylesheets / base / _variables.scss":
$ matcha-green: # 78B69D; $ text-color: darken ($ medio-grigio, 20%);
Ritornare agli Affari; dopo aver giocato con alcune idee, ho aggiunto due nuovi colori globali al mio file di variabili Sass di Bitters. $ Matcha-verde è ora il colore che desidero usare per la mia identità e inserito in questo file posso riutilizzare questa variabile ovunque mi piaccia. Dovrei cambiare idea su quale verde voglio, dovrò cambiarlo in una volta. Inoltre, non ero troppo contento del colore predefinito per il testo. Usando una funzione Sass ho oscurato uno dei colori preimpostati da Bitters del 20 percento e lo ho memorizzato come $ Text-color. Pubblica i titoli al passaggio del mouse, così come le date e la copia del corpo hanno ricevuto il nuovo colore del testo. Il default era troppo scuro secondo me.
In "source / stylesheets / base_typography.scss":
// transizione: color $ base-duration $ base-timing;
E poi in "source / stylesheets / _index_posts.sass":
.dimensione del font post-titolo: 1.7em a + transizione (colore .4s easy-in-out) colore: $ matcha-green &: hover colore: $ text-color .post-date color: $ text-color .posts p colore: $ testo-colore
Ho anche aggiunto una leggera transizione attraverso un mix Bourbon per il passaggio del mouse .titolo del post. Questo cambia da $ Matcha-verde a $ Text-color al di sopra di .4 secondi. Controlla i miei articoli su Bourbon Mixins se vuoi saperne di più.
Nel caso ti stia chiedendo il facilità in-out parte, è uno dei 32 modi per temporizzare il comportamento di transizione. ($ easy-in-out, come a $variabile, come nella documentazione, genererà un errore) È un piccolo miglioramento ma sembra molto meglio delle impostazioni predefinite del browser. Per fare questo lavoro ho dovuto anche decommentare il comportamento di transizione predefinito da Bitters prima in "base_typography.scss".
In "source / stylesheets / _footer.sass":
footer border-top: 1px solido rgba ($ text-color, .3) .recent-posts, .footer-tags color: darken ($ medio-grigio, 20%) a + transizione (tutti .1s easy-in-out ) color: $ text-color &: hover color: $ matcha-green border-bottom: 2px solid $ matcha-green
Infine, ho adattato anche i colori per il footer. Questo ci dà un aspetto coerente e, auspicabilmente, un po 'di understatement sottile. Il comportamento transitorio doveva essere accelerato per i link nel footer. Dal momento che sono raggruppati così strettamente insieme, ho sentito che sarebbe stato meglio se fossero stati un po 'più incisivi e sottolineati.
In termini di colore, ho fatto la oposite come con i titoli nella lista degli indici. Dal momento che l'elenco dei piè di pagina non ha bisogno di essere presente sulla pagina, soprattutto con una distanza così ridotta tra loro, ho dato loro il colore del testo grigio predefinito e uso solo il $ Matcha-verde quando si libra. In questo esempio usiamo solo spazi bianchi e il ridimensionamento del tipo per raggiungere la gerarchia.
Oh, e il bordo sopra il footer aveva bisogno di un po 'di opacità attraverso il Sass RGBA funzione. Ho calcolato che il 30 percento di opacità è sufficiente per fare il suo lavoro senza attenuarlo più di tanto.
Non troppo malandato, per una quantità così piccola di codice. Esattamente come mi piace: meno codice scrivi, meno bug ci sono per morderti!
Impegnati a Git:
git add --all git commit -m 'Primo tentativo di ottimizzazione dei colori Aggiunge nuovo colore del marchio $ matcha-green Aggiunge nuovo $ testo-colore: Body copy Post titoli hover Footer headers Prendersi cura delle transizioni hover Commenti out Bitter default transition'
## Ritocchi
Un'altra piccola cosa che mi irrita è l'altezza della copia del corpo. Andiamo a modificare anche questo. In "source / stylesheets / _index_posts.sass":
.messaggi p line-height: 1.35em
Commettere:
git add ... /source/stylesheets/_index_posts.sass git commit -m 'Regola l'altezza della riga per la copia del corpo sull'indice'
E, ancora, distribuire:
distribuire l'intermediario
Buon lavoro finora! È giunto il momento di un'altra pausa. Nel prossimo tutorial aggiungeremo una barra di navigazione e una "unità eroe" in cima. Ci vediamo lì! Prenditi uno spuntino e rilassati un po '!
Accentsconagua