Share
Under den föregående delen av denna serie lärde vi oss om Behance API, med hjälp av det för att fånga en användares portföljstycken och visa dem på en webbsida. I denna del kommer vi att utforma webbsidan och presentera portföljstyckena på ett lämpligt attraktivt sätt.
För att komma igång, kommer vi att förbereda vår verktygslåda:
Vi kommer att använda Normalisera för att göra grundelementelementen mer konsekventa över olika webbläsare och minimera risken för oväntade resultat.
Vi kommer också att använda MINDRE för att utforma vår hemsida. Vilken preprocessor du föredrar, är det definitivt rekommenderat att använda dem i ditt arbetsflöde. Jag är en stor fan av, istället för att tråla den önskade färgen i färgplockaren från en separat applikation, helt enkelt med hjälp av LÄSER kontrollfunktioner som t.ex. lätta() och mörkna() för att ge oss en rad färgvarianter.
För att hjälpa oss vidare, använder vi LESSHat för att hjälpa oss att skriva mindre kod med Mixins samling. Vi kommer också att använda Remixins utvecklade av Christopher Ramírez. Remixins är en samling Mixins att konvertera px in i rem enheter i. Samlingen innehåller Mixins för att specificera textstorlek, marginal, stoppning, bredd och höjd, och CSS position (vänster, höger, botten, och topp).
Dessutom behöver vi också ett verktyg för att kompilera LESS i vanlig CSS. I den här handledningen använder vi en app som heter Koala, som finns tillgänglig i Windows, OSX och Ubuntu. Du kan självklart använda vilken kompilator du föredrar, men med lycka till kommer du att kunna följa denna handledning oberoende av vilken plattform du använder.
För mer om MINDER, hänvisar du till dessa handledning:
Standard systemfonter som Arial gör det inte för mig idag. Så i den här handledningen använder jag Google Fonts istället. Jag har valt Cantata One för rubriken och Open Sans för standardtexten. Det här är en personlig preferens, du kan utesluta Google Fonts eller använda alternativ om du vill.
Vi kommer också att använda typsnitt ikoner för lite dekoration på vår hemsida. Dessa dagar har vi massor av alternativ för typsnitt ikoner. Under min sökning var jag dock ganska överraskad att endast några av dessa teckensnitt innehåller Behance-ikonen i sin samling. Under alla omständigheter kommer vi att använda Foundation Icon Fonts 3, eftersom den innehåller Behance-ikonen och även tillgänglig via en CDN.
Låt oss skapa några nya mappar som heter mindre och css (som kommer att vara utmatningsmappen för den MINDERA filen). Skapa en ny fil med namnet style.less och ta Remixins och LESShat. Sätt dessa tre LESS stilark i mindre mapp. I detta skede bör listan över filer och mappar i vår projektkatalog se ut så här:
| - css | - index.html '- mindre | - lesshat.less | - remixins.less' - style.less
Lägg sedan till Normalisera, grundkonfigurationsfonterna och vårt typsnitt i Google Font i huvud tagg tillsammans med style.css, som kommer att vara utdatafilen av style.less.
Också öppna Koala app (eller vilken form av sammanställning du föredrar) och lägg till vår projektkatalog till den.
Projektkatalogen i KoalaInnan vi skriver några stilar, låt oss lägga till några ikoner på vår hemsida. Först lägger vi till kartpositionsmarkeringen bredvid användarens platselement med fi-markör klass. Lägg till den här klassen bredvid profil-location klass som så:
...user.city, user.country...
Detta lägger till en :innan pseudoelement till div, injicera markörsikonen in genom våra stiftelsens ikoner. Därefter lägger vi till Behance-logotypen i sidfoten med fi-social-Behance klass.
...Behance
...
Låt oss öppna vår style.less och importera både lesshat.less och remixins.less med hjälp av (referens) markera.
@import (referens) 'lesshat.less'; @import (referens) 'remixins.less';
De (referens) märket introducerades i MINDER 1.5. Det betyder att MINDRE kommer att använda filen endast som referens, det kommer inte att kompilera och skriva ut innehållet i filen. Det är en mycket kraftfull funktion som minimerar dubbla och onödiga stilar.
Inside style.less lägger vi till följande variabler som lagrar färgpalett och fontfamilj på vår hemsida.
@ bg-body: #fafafa; @ bg-header: # 303746; @ färgbas: # 353537; @ färgnamn: # e0e0e0; @ färgtitel: # 6b919f; @ font-body: "Open Sans", Arial, sans-serif; @ font-namn: 'Cantata One', Georgia, Times, serif;
Att placera dessa variabler på ett ställe fungerar som en typ av stilguide, men det hjälper oss också att behålla våra stilar på ett bekvämare sätt. Till exempel, om det finns något på webbplatsen som vi vill ändra, kan vi helt enkelt ändra värdet inom dessa variabler. Det är ett mycket säkrare sätt att ändra stilar, istället för att utföra "Sök och ersätt".
Trots att vi har lagt till Normalisera som har standardiserat våra elementstilar, har vi fortfarande några stilar att tweak för att följa vårt specifika behov. Till att börja med ändrar vi boxningsstorleken och ställer in alla elementens (inklusive pseudo-elementen) rutans storlek till border-box. Detta kommer att ge våra dimensioner en mycket mer kontrollerbar grund att arbeta från.
Vi kan tillämpa detta med .box-dimensionering Mixins från LESSHat-biblioteket, enligt följande:
*, *: före, *: efter .box-dimensionering (border-box);
Därefter kommer vi att ställa in html typsnittstorlek till 62,5%, vilket är ett sätt att göra relativa enheter mer hanterbara.
html font-size: 62.5%;
62,5% här mäts mot webbläsarens standard på 1em vilket är 16px; så 62,5% av 16px är lika med 10. Genom att göra det kommer vi enkelt att kunna räkna ut konverteringen av rem i px genom att multiplicera den med 10. 1.2rem, till exempel kommer att vara lika med 12px och så vidare. Förutom detta, om vi tittar på remixins.less source, hittar vi basstorleken i @ Base-font-size-px variabeln är inställd på 10.
Du kan hänvisa dessa artiklar till vidare på CSS relativ enhet:
Vi använder en figur element för att innehålla portföljens bildomslag. Men vårt figur element har ärft marginalvärden från Normalisera vilket orsakar oavsiktligt vitt utrymme mellan portföljbilderna. Så här tar vi bort marginalen från figur element.
figur margin: 0; / * skriv över Normalize.css standardstil * /
Att använda ett clearfix-hack är en populär metod som ett användningsområde för vissa layoutproblem som orsakas av flytande element som inte klarar av att rensa sina barnelement. Så här lägger vi till Clearfix-tipset av Nicolas Gallagher som vi har blivit till MINDRE.
.clearfix * zoom: 1; &: före, &: efter innehåll: ""; display: bord; &: efter clear: both;
Om du tittar på vår HTML-struktur har vi lagt till clearfix klass till vissa element.
För kropp, Vi ställer in de teckensnittstyp som gäller hela hela sidan. Dessa stilar inkluderar teckensnittstorlek, teckensnittsfärg, typsnittsvikt, teckensnittsfamilj och bakgrundsfärgen. Här kommer vi att använda .textstorlek() mixin från Remixins bibliotek för att skapa teckenstorleken. Alla Mixins som ingår i Remixins bibliotek genererar a px unit fallback, användbart för webbläsare som inte stöder rem enhet.
kropp .font-size (16px); bakgrundsfärg: @ bg-body; färg: @ färgbas; font-family: @ font-base; typsnitt: 300;
Efter att ha sparat filen kommer Koala automatiskt att kompilera utmatningen. Och ovanstående kod ska se ut så här i vanlig CSS.
kropp font-size: 16px; fontstorlek: 1.6rem; bakgrundsfärg: #fafafa; färg: # 353537; font-family: "Open Sans", Arial, sans-serif; typsnitt: 300;
Därefter lägger vi till stilar för webbplatsens rubrik, enligt följande.
.portföljrubrik .padding (50px, 0); bakgrundsfärg: @ bg-header; text-align: center; .profile-avatar img .size (80px); gränsen: 50%; .profilnamn .font-size (24px); .margin-botten (10px); färg: @ färgnamn; font-family: @ font-name; font-vikt: 400; .profile-fält .max-bredd (320px); .font-storlek (14px); färg: ljusare (@ bg-header, 50%); marginal-vänster: auto; marginal-höger: auto; .field-list padding: 0; .field-item display: inline-block; &: efter innehåll: ','; &: sista barnet: efter innehåll: "; .profile-plats .font-size (14px); färg: ljusare (@ bg-header, 30%); &: före .margin-right (10px); .font-size (18px);
Det här är en hel del syntax, så låt oss bryta ner det och undersöka vad det gör. För det första har vi lagt till bakgrundsfärg i rubriken med den färg som lagras i vår @ Bg-header variabel. Vi använder .stoppning() Mixins från Remixins för att lägga vaddering på toppen och undersidan av rubriken, vilket ger mer vertikalt vitutrymme. Vi har också lagt till text-align: center så vårt innehåll ser mer ut i ordning.
.portföljrubrik .padding (50px, 0); bakgrundsfärg: @ bg-header; text-align: center; ...
Vi har ställt in användarens avatarbildstorlek med .storlek() Mixins och gjorde cirkulär genom att ställa gränsen till 50%. Du kan se att dessa stilar förklaras i .profil-avatar img.
.profil-avatar img .size (80px); gränsen: 50%;
Nedan följer reglerna för användarens namn. Här ställer vi in teckensnittstorleken med en .textstorlek() blanda i. Vi har implementerat @ Färg-namn variabel för teckensfärgen och passerade teckensnittsfamiljen med @typsnittsfamilj variabel. Och till sist har vi lagt till font-vikt: 400; för att göra teckensnittet ser djupare ut än resten.
.profilnamn .font-size (24px); .margin-botten (10px); färg: @ färgnamn; font-family: @ font-name; font-vikt: 400;
Därefter kommer vi att titta på reglerna för området användar kreativa fält, som vi riktar in mot .profilfälten. I Behance kan du lägga till så många färdigheter eller fältspecialiteter som du önskar. Det innebär att varje användare kan ha korta eller långa färdighetsbeskrivningar. Jag har därför bestämt mig för att ställa in bredden med a maximal bredd. Vi ställer in teckensnittsfärgen för 50% tändare från rubriken Bakgrund med lätta (@ bg-header, 50%).
Vidare separeras varje fältobjekt med ett komma som vi har levererat genom ett :efter pseudo-elementet. Logiskt sett måste det sista objektet inte ha ett komma, så vi har valt det sista objektet med :sista barnet och ställa in innehåll egendom ska vara tomt innehåll:".
.profilfält .max-bredd (320px); .font-storlek (14px); färg: ljusare (@ bg-header, 50%); marginal-vänster: auto; marginal-höger: auto; .field-list padding: 0; .field-item display: inline-block; &: efter innehåll: ','; &: sista barnet: efter innehåll: ";
Följande är stilreglerna för styling av användarplatsen. Här ställer vi färgen något ljusare än bakgrundsfärgen, 30% för att vara exakt. Och vi har också något utvidgat klyftan mellan texten och markörsikonen från Foundation Icon Fonts genom att lägga till margin-höger till :innan pseudo-elementet.
.profil-plats .font-size (14px); färg: ljusare (@ bg-header, 30%); &: före .margin-right (10px); .font-storlek (18px);
Efter att ha lagt till dessa stilar borde rubriken nu se ut så här:
Följande kod innehåller alla stilar för vår portfölj.
.portföljområde .margin (50px, auto); .max-bredd (960 x); bredd: 100%; .portfolio-list padding-left: 0; .portfolio-objekt .margin-bottom (30px); .height (320 x); .padding (0, 15px); flyta till vänster; lista-stil-typ: none; bredd: 33,33333333333333%; .portfolio-innehåll text-align: center; .portfolio-cover width: 100%; .portfolio-image border: 8px solid #fff; max bredd: 100%; .portfolio-title .font-size (14px); färg: mörkare (@ färgtitel, 10%); text-transform: kapitalisera; vertikaljustering: mitt; bredd: 100%; .portfolio-fält .font-size (12px); färg: mörkare (@ bg-kropp, 30%); .field-list padding: 0; .field-item display: inline-block; &: efter innehåll: ','; &: sista barnet: efter innehåll: ";
Många av ovanstående stilar är dekorativa. Men här är några viktiga saker att notera:
Först ställer vi in .portfölj-område bredd till 100%, men bevara maximal bredd vid 960px. Detta gör att bredden kan anpassas graciöst i mindre visningsstorlek. Också, som du kan se ovan, har vi ställt in .portfölj-objektet bredd till 33,33333333333333%. Detta beror på att vi kommer att visa tre objekt på varje rad. De 33,33333333333333% är härledd från uppdelningen av 100% med 3.
De .portfölj-cover bredden är inställd på 100%, så fyller den sin förälders bredd. De .portfölj-image är inställd med max-bredd: 100% så bilden kommer inte att överstiga föräldern bredden oavsett storlek. Alla dessa breddinställningar hjälper oss att göra vår hemsida flytande.
Nu bör portföljavsnittet se ut så här.
Därefter lägger vi till stilar för Footer. Footer är vanlig och enkel; den består bara av "Powered by" -text och en Behance-ikon från Foundation Icon Fonts. Nedan följer alla stilregler för Footer.
.portföljen .margin (30px, auto); .max-bredd (960 x); text-align: center; bredd: 100%; .Power-by .font-size (12px); färg: mörkare (@ bg-kropp, 30%); text-transform: stor bokstav; .power-logo .width (36px); .height (36px); färg: # 1769ff; display: inline-block; marginal: 0 auto; överflöde: gömd; position: relativ; text-dekoration: ingen; textindelning: 100%; white-space: nowrap; &: före .line-height (38px); .font-storlek (36px); display: inline-block; höjd: 100%; vänster: 0; position: absolut; textindelning: 0; topp: 0; bredd: 100%;
På samma sätt som portföljsektionen ställer vi bredden på foten till 100% och justerar den till mitten av webbläsarens fönster med marginal: 0 auto;. Vi anpassar också allt innehåll till mitten så att det ser ordentligt ut. Vi gömmer sedan texten inuti .power-logo Använd Kellummetoden och visa endast Behance-logotypen med sin varumärkesfärg, blå # 1769ff.
Notera: Behance har en hel utvecklare sektion om sina Branding Guidelines om du vill ta en titt.
Footer ska nu se ganska komplett, som så.
Vi har en fluid layout, men nu ska vi göra vår hemsida lyhörd. Lyckligtvis är vår hemsida bara en enda webbplats med en mycket enkel layout. Så det kommer inte att behöva någon lång kod för att göra det lyhört. Till att börja med lägger vi till (avgörande) metavisningsporten i huvud märka.
Nästa lägger vi till några mediefrågor, enligt följande.
@media-skärm och (minbredd: 768px) och (maxbredd: 959px) .portfolio-område .portfolio-objekt bredd: 50%; @media bara skärm och (max bredd: 767px) .portfolio-område .portfolio-item height: auto; bredd: 100%;
Dessa mediefrågor visar två objekt i rad mellan 959px och 768px visningsbredd och ett objekt när visningsbredd är 767px och lägre.
Vår portföljwebbplats i olika visningsstorlekarEfter att ha stylat estetiken på vår sida är allt som finns kvar att lägga till lite känsla. I nästa och sista delen av denna serie tillåter vi besökare att klicka på varje miniatyrbild och se en större version, plus vi lägger till några CSS3-animeringar för att förbättra upplevelsen.
Accentsconagua