Share
In deze tutorial gaan we door met het bouwen van onze podcast-site. We zullen onze index van posts gaan stylen, een leuk voetje maken en een beetje kleur in de mix gooien. Dat alles met behulp van Sass en de Bourbon-suite.
Goed, waar waren we? Op dit moment ziet onze site er niet geweldig uit:
Momenteel zijn onze berichten niet uitgelijnd op iets anders dan de linkerkant, dus we hebben een raster nodig om deze puinhoop op te lossen. Onze geliefde Bourbon Nette tot de redding! Eerst voegen we een klas toe posts als een wikkel voor onze berichten en maak er een buitenste container die de inhoud op de pagina centreert.
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 %>
Vervolgens moeten we een nieuwe Sass-partitie maken voor onze indexstijlen en wat magie toepassen, dus in "source / stylesheets / all.sass":
@import 'index_posts'
En in "source / stylesheets / _index_posts.sass":
.posten + buitenste container
Ik vind ook dat het een goed idee is om een achtergrondkleur toe te voegen om onze buitenste container gemakkelijk zichtbaar te maken - tot nu toe.
Verbind dan met Git:
git add -all git commit -m 'Voegt Sass partieel toe voor indexposts Centers-content'
Recente artikelen, tags en agendavullingen bevinden zich in "layout.erb" en hebben op dit moment geen betrekking op ons. Laten we ons concentreren op het maken van deze indexlijst met berichten. Laten we het geven h2 titel een klasse post-titel en laat de titel en alinea's van de body-copy overspannen voor acht (van de twaalf) kolommen op de pagina. De berichten moeten ook twee kolommen verschuiven omdat we willen voorkomen dat onze kopie over de hele pagina loopt en daardoor een gezonde lijnbreedte (maat) overschrijdt voor het lezen van 45-75 tekens.
Dus 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 %>
En in "source / stylesheets / _index_posts.sass":
.post-titel, .posts p + shift (2) + span-kolommen (8)
Nu zijn we aan het praten. Onze inhoud is uitgelijnd en mooi gecentreerd op de pagina. Wat we missen is elke vorm van visuele hiërarchie; onze h2 titels zijn niet veel groter dan de inhoud van onze berichten. Voor een betere leeservaring moeten we ervoor zorgen dat titels en de bijbehorende tekst een beter visueel contrast hebben dan dat.
Ten eerste hebben we betere tekst nodig om mee te werken, dus laten we gebruik maken van een Middleman-helper voor dummy-tekst. Laten we een toevoegen erb uitbreiding van onze blogposts en voeg het volgende toe aan onze testberichten.
Notitie: we hebben de extensie ".erb" alleen nodig omdat we robijncode tussen dit construct willen uitvoeren <%= %>.
In "source / posts / 2012-01-01-example-article.html.markdown.erb":
Dit is een voorbeeldartikel. Je wilt het waarschijnlijk verwijderen en je eigen artikelen schrijven! <%= lorem.sentences 5 %>
We zullen de details in een ogenblik bespreken, maar eerst nog enkele stijlen in "source / stylesheets / _index_posts.sass":
.fontgrootte na de titel: 1.7em .posts p font-size: 1.05em margin-bottom: 4em
Dat is een beetje makkelijker voor de ogen, nietwaar? We hebben de headers en alinea's in redelijke mate aangepast. Een kleine extra marge tussen de posten maakt het verschil. Qua hiërarchie is het een goed begin.
Commit to Git:
git add --all git commit -m 'Past grootte aan voor titel en lichaamstekst Voegt dummy tekst toe Voegt .erb extensie toe aan dummy berichten'
Aan met voettekst. Ik denk dat we eerst voor de afschuwelijke zwevende elementen op de bodem moeten zorgen. Laten we "Recente artikelen" en "Tags" in een voettekst plaatsen en "By Year" verwijderen. De relevante markup maakt deel uit van de globale lay-out in "source / layouts / layout.erb". Zoek de code in de terzijde onderstaande tag opbrengst en pas het als volgt aan. In "source / layouts / layout.erb":
De bovenstaande standaardbusiness van het gewoon doorlopen van onze berichten en tags die bij Middleman horen, is prima. Ik wil het echter een beetje slimmer hebben en schuifelen in zowel recente berichten als tags. Op die manier ziet de gebruiker niet alleen de laatste tien artikelen of een enorme lijst met tags, maar een gerandomiseerde versie van beide die altijd tien items lang is. Ze verbruiken ook niet heel veel ruimte en laten me beide items consequent in de voettekst uitlijnen. Ik hernoemde de h3 voor berichten ook in "source / layouts / layout.erb":
### Afstemming
Ik denk dat we de gebruikerservaring behoorlijk hebben verbeterd door die kleine verbetering. Ruby maakte ons werk supergemakkelijk. Nu heeft deze opmaak slechts een kleine duw nodig voor een betere uitlijning. We maken een nieuwe Sass-partitie voor alleen de voettekst. In "source / stylesheets / all.sass":
@import 'footer'
En dan in de gedeeltelijke "source / stylesheets / _footer.sass":
footer + outer-container border-top: 1px solid $ base-border-colour padding: top: 4em bottom: 4em .recent-posts + shift (2) + span-columns (6) .footer-tags + span-columns ( 2) .recent-berichten, .footer-tags h3 font-size: 1.7em li font-size: 1.05em
Om wat tastbare testgegevens te hebben, voegde ik een paar meer voorbeeldposten toe via de tussenpersoongenerator en gaf het wat dummy lorem-tekst. Via de terminal:
artikel van de tussenpersoon 'Your fancy title'
Ik moet waarschijnlijk vermelden dat ik ook een ".erb" -extensie moest toevoegen aan deze nieuwe berichten voor de dummy lorem-tekstgenerator. De frontmatter bevat nog een paar andere tags om mee te spelen.
In "source / posts / 2015-12-01-your-fancy-title.html.markdown.erb":
--- title: Example Post date: 2015-12-01 tags: example, bourbon, neat, middleman --- Dit is een voorbeeldartikel. Je wilt het waarschijnlijk verwijderen en je eigen artikelen schrijven! <%= lorem.sentences 5 %>
Het doel was om ten minste tien berichten en tags te hebben om te zien of alles goed is uitgelijnd. Laten we eens kijken wat we hier hebben:
De achtergrondkleuren hebben nu hun plicht vervuld. Laten we ze doden en controleren of we tevreden zijn met het daadwerkelijke resultaat:
Ik denk dat we het zo kunnen laten voor nu. Tijd om onze wijzigingen door te voeren!
git add ... /layouts/layout.erb gco -m 'Past lay-out aan en voegt voettekst toe' git add ... /stylesheets/_footer.sass... /stylesheets/all.sass git commit -m 'Voegt stijlen toe voor footer en importeert Sass partial' git add ... /posts/*.markdown.erb git commit -m 'Voegt een aantal dummy posts toe met: dummy lorem text dummy tags'
Voordat we verdergaan, moeten we ons inzetten op GitHub-pagina's, onze voortgang controleren en ervoor zorgen dat we niet voor verrassingen komen te staan.
tussenpersoon inzetten
Open uw browser, ga naar yourusername.github.io/your_project_name en tot nu toe kijken of je tevreden bent met je site.
Wat moeten we nu doen? Je hebt gelijk, de voettekst gilt in grote letters EXTRACTIE! We gaan de , maak een nieuwe map voor partials en plaats daar de markup. Op zijn beurt moeten we dat deel van "source / layouts / layout.erb" weergeven:
<%= yield %><%= partial "partials/footer" %>
Vervolgens in de gedeeltelijke "source / partials / _footer.erb":
Als je goed hebt opgelet, heb je gezien dat ik de datum voor de lijst met artikelen in de voettekst heb verwijderd. Ik deed dit om twee redenen. Allereerst gaan we wat meer ruimte besparen, zodat we niet snel tegen het scenario aanlopen dat de uitlijning met de tags verbreekt wanneer de titel van de post iets langer is. Ten tweede vond ik het een beetje afleidend en voegt het niet te veel toe.
Deze lijst met willekeurige artikelen in de voettekst is een handige manier om nieuwe dingen aan het publiek te introduceren. De datum speelt daarin geen grote rol. Hetzelfde geldt voor het aantal artikelen voor de tag-links. Ze verspillen ruimte zonder teveel waarde toe te voegen. Als u niet te veel artikelen voor een bepaalde tag heeft, ziet deze er ook niet meteen leeg uit. Ik heb liever meer ruimte voor een stabiele lay-out. Het voelt ook iets meer schoon aan, maar dat is volledig subjectief.
commit:
git add --all git commit -m 'Voettekst uitpakken in gedeeltelijke Verwijderd datum van bericht links in footer Verwijdert aantal artikelen voor tags in footer Heeft niet genoeg waarde opgeleverd om ruimte te offeren'
Terwijl we bezig zijn. Laten we de datum in onze indextitels verzorgen. Ik denk dat hun grootte veel te prominent is, wat onze visuele hiërarchie niet verbetert en ik vind het niet leuk om het aan het einde van de titel te hebben. Ik plak het liever aan de andere kant en gebruik het als een visueel anker dat niet rondslingert met verschillende titellengtes.
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 %>
En in "source / stylesheets / _index_posts.sass":
.post-date lettertypegrootte: 0.7em marge: links: em (-80px) rechts: em (20px)
De titel van het bericht wordt opnieuw gerangschikt en begint met de periode die de datum bevat. Ik liet een beetje witruimte achter tussen de reeks met de datum en de titel zelf, want als ik de datum uitlijn met de artikeltekst voor kleinere schermen, heb ik een natuurlijke ruimte tussen de datum en de titel en heb ik geen ruimte nodig om Sass onnodig te gebruiken.
De Sass-code is duidelijk. De negatieve marges helpen me om de datum links van de titel visueel te verankeren en ik heb een Bourbon-functie gebruikt om hun pixelwaarden in ems om te zetten. Eenvoudig, maar ik hou van de hiërarchie die we hebben bereikt. De ogen hebben iets om via de datums naar toe te springen en de rest heeft voldoende witruimte, zodat we weg kunnen blijven van het gebruik van randen om onze berichten te verdelen. Ik ben blij!
Commit to Git:
git add ... /index.html.erb... /stylesheets/_index_posts.sass git commit -m 'Wijzigt de volgorde voor datum en plaats de titel op de indexpagina Styles-datum om een visueel anker te maken'
En inzet:
tussenpersoon inzetten
Laten we dit ding een beetje tot leven brengen, maar niet te veel. Minder is meer! Ik ging naar COLOURlovers en speelde met een paar kleurenpaletten. Kijk uit voor oplossingen die je visuele hiërarchie kunnen verbeteren, maar blijf weg van kleuren die schreeuwerig luid zijn. Ik besef dat dit vaag is, omdat kleuren heel subjectief en cultureel geladen kunnen zijn, maar zo benader ik het op dit moment toch.
In onze variabelen "source / stylesheets / base / _variables.scss":
$ matcha-green: # 78B69D; $ tekstkleur: donkerder ($ middengrijs, 20%);
Terug terzake; na het spelen met enkele ideeën, voegde ik twee nieuwe globale kleuren toe aan mijn Sass-variabelenbestand van Bitters. $ Matcha-green is nu de kleur die ik wil gebruiken voor mijn identiteit en die in dit bestand wordt geplaatst. Ik kan deze variabele hergebruiken waar ik wil. Mocht ik van gedachten veranderen over wat voor soort groen ik wil, dan moet ik dit in één keer wijzigen. Ook was ik niet zo blij met de standaardkleur voor tekst. Met behulp van een Sass-functie heb ik een van de vooraf ingestelde kleuren van Bitters met 20 procent donkerder gemaakt en dat als opgeslagen $ Text-color. Titels plaatsen op hover, evenals data en body copy kregen de nieuwe tekstkleur. De standaard was volgens mij te donker.
In "source / stylesheets / base_typography.scss":
// overgang: kleur $ base-duration $ base-timing;
En dan in "source / stylesheets / _index_posts.sass":
.lettergrootte na de titel: 1.7em a + overgang (kleur .4s gemak-in-uit) kleur: $ matcha-green &: hover color: $ text-color. post-date kleur: $ text-color .posts p kleur: $ tekstkleur
Ik voegde ook een lichte overgang toe door een Bourbon-mix voor zwevend voorbij .post-titel. Dit verandert van $ Matcha-green naar $ Text-color over- .4 seconden. Bekijk mijn artikelen over Bourbon Mixins als je meer wilt weten.
In het geval dat je je afvraagt over de gemak-in-out deel, het is een van de 32 manieren om overgangsgedrag te timen. ($ ease-in-out, als een $variabele, zoals in de documentatie, zal een fout veroorzaken) Het is een kleine verbetering maar ziet er veel beter uit dan de standaardwaarden van de browser. Om dit te laten werken, moest ik ook eerst het standaard overgangsgedrag van Bitters ongedaan maken in "base_typography.scss".
In "source / stylesheets / _footer.sass":
footer border-top: 1px solid rgba ($ text-colour, .3) .recent-posts, .footer-tags kleur: darken ($ medium-grey, 20%) a + transition (all .1s ease-in-out ) kleur: $ tekstkleur &: hover color: $ matcha-green border-bottom: 2px solid $ matcha-green
Ten slotte heb ik de kleuren ook aangepast voor de voettekst. Dit geeft ons een coherent uiterlijk en hopelijk een beetje subtiel understatement. Het overgangsgedrag moest worden versneld voor de links in de voettekst. Omdat ze zo dicht bij elkaar zijn gegroepeerd, voelde ik dat het beter zou zijn als ze ook een beetje overzichtelijker en onderstreept zouden zijn.
Wat kleur betreft, heb ik het tegenovergestelde gedaan zoals bij de titels in de indexlijst. Omdat de voettekstlijst niet zo aanwezig hoeft te zijn op de pagina, vooral met zo weinig afstand, heb ik ze de standaard grijze tekstkleur gegeven en alleen de $ Matcha-green bij zweven. In dit voorbeeld gebruiken we alleen witruimte en de grootte van het type om de hiërarchie te bereiken.
Oh, en de rand boven het voettekstwerk had een beetje transparantie nodig via de Sass RGBA functie. Ik dacht dat de dekking van 30 procent net genoeg is om zijn werk te doen zonder veel uit te steken.
Niet te sjofel uitziend, voor zo'n kleine hoeveelheid code. Precies zoals ik het leuk vind - hoe minder code je schrijft, hoe minder bugs er zijn om je te bijten!
Commit to Git:
git add --all git commit -m 'Eerste poging om kleuren af te stemmen Voegt nieuwe merkkleur toe als $ matcha-green Voegt nieuwe $ tekstkleur toe: tekstkopie Berichttitels hover Footer headers Zorgt voor hover-overgangen Comments out Bitters standaard overgang'
## Tweaks
Nog een klein ding dat me irriteert, is de lijnhoogte van de body-kopie. Laten we dat ook aanpassen. In "source / stylesheets / _index_posts.sass":
.berichten p lijnhoogte: 1.35em
commit:
git add ... /source/stylesheets/_index_posts.sass git commit -m 'Regelt de regelhoogte voor body copy op index'
En, nogmaals, deploy:
tussenpersoon inzetten
Goed gedaan tot nu toe! Het is hoog tijd voor een nieuwe pauze. In de volgende zelfstudie gaan we een navigatiebalk en een 'hero-eenheid' bovenaan toevoegen. Zie je daar! Krijg een hapje en een beetje chillen!
Accentsconagua