Share
Under den forrige delen av denne serien lærte vi om Behance API, ved å bruke den til å fange en brukeres porteføljebrikker og vise dem på en nettside. I denne delen skal vi utforme nettsiden og presentere porteføljebittene på en passende attraktiv måte.
For å komme i gang, vil vi forberede vårt verktøy:
Vi vil bruke Normaliser for å gjøre grunnelementelementene mer konsistente over ulike nettlesere og minimere sjansen for uventede resultater.
Vi vil også bruke MINDRE for å utforme nettstedet vårt. Uansett hvilken forprosessor du foretrekker, er det absolutt tilrådelig å bruke dem i arbeidsflyten din. Jeg er en stor fan av, i stedet for å tråle den ønskede fargen i fargeplukeren fra et eget program, bare ved å bruke MINDRE kontrollfunksjoner som lette () og mørkere () å gi oss en rekke fargevarianter.
For å hjelpe oss videre, vil vi bruke LESSHat til å hjelpe oss med å skrive mindre kode med sin Mixins-samling. Vi vil også bruke Remixins utviklet av Christopher Ramírez. Remixins er en samling av Mixins å konvertere px inn i rem enheter i. Samlingen inneholder Mixins for å spesifisere skriftstørrelse, margin, padding, bredde og høyde, og CSS posisjon (venstre, Ikke sant, bunn, og topp).
I tillegg trenger vi også et verktøy for å kompilere MINDRE i vanlig CSS. I denne opplæringen bruker vi en app kalt Koala, som er tilgjengelig i Windows, OSX og Ubuntu. Du kan selvfølgelig bruke hvilken som helst kompilator du foretrekker, men med hell vil du kunne følge denne opplæringen uansett hvilken plattform du bruker.
For mer om LESS, vennligst se disse veiledningene:
Standard systemfonter som Arial gjør det bare ikke for meg i dag. Så i denne opplæringen vil jeg bruke Google Fonts i stedet. Jeg har valgt Cantata One for overskriften og Open Sans for standardtekstteksten. Dette er en personlig preferanse, du kan ikke ekskludere Google Fonts eller bruke alternativer hvis du ønsker det.
Vi vil også bruke fontikoner for litt dekorasjon på vår nettside. I disse dager har vi massevis av alternativer for font ikoner. Men under mitt søk ble jeg ganske overrasket over at bare få av disse skriftene inkluderer Behance-ikonet i samlingen deres. Under alle omstendigheter vil vi bruke Foundation Icon Fonts 3, som den inneholder Behance-ikonet og er også tilgjengelig via en CDN.
I prosjektprosjektets rotkatalog, la oss lage noen nye mapper som heter mindre og css (som vil være utdatamappen for den MINDRE filen). Lag en ny fil kalt style.less og ta Remixins samt LESShat. Sett disse tre LESS stilarkene i mindre mappe. På dette stadiet bør listen over filer og mapper i prosjektkatalogen se slik ut:
| - css | - index.html '- mindre | - lesshat.less | - remixins.less' - style.less
Deretter legger du til Normaliser, stiftikonets skrifttyper og vårt stilfelt i Google Font i hode tag sammen med style.css, som vil være utdatafilen til style.less.
Også, åpne Koala app (eller hvilken form for kompilering du foretrekker) og legg til vår prosjektkatalog til den.
Prosjektkatalogen i KoalaFør vi skriver noen stiler, la oss legge til noen få ikoner på nettstedet vårt. Først legger vi til kartplasseringsmerket ved siden av brukerens plasseringselement med fi-markør klasse. Legg til denne klassen ved siden av profil-plassering klasse slik:
...user.city, user.country...
Dette vil legge til en :før pseudoelement til div, injisere markørikonet inn gjennom stiftelsens ikoner. Deretter vil vi legge til Behance-logoen i bunntekstdelen med fi-sosial-Behance klasse.
...Behance
...
La oss åpne vår style.less, og importere både lesshat.less og remixins.less ved hjelp av (henvisning) merke.
@import (referanse) 'lesshat.less'; @import (referanse) 'remixins.less';
De (henvisning) merket ble introdusert i MINDRE 1,5. Det betyr at MINDRE bare vil bruke filen som referanse, det vil ikke kompilere og utføre innholdet i filen. Det er en veldig kraftig funksjon som minimerer dupliserte og unødvendige stiler.
Inside style.less, legger vi til følgende variabler som lagrer fargepaletten og fontfamilien på nettstedet vårt.
@ bg-body: #fafafa; @ bg-header: # 303746; @ fargebase: # 353537; @ fargenavn: # e0e0e0; @ fargetittel: # 6b919f; @ font-body: 'Open Sans', Arial, sans-serif; @ font-navn: 'Cantata One', Georgia, Times, serif;
Å plassere disse variablene på ett sted virker som en slags stilguide, men det hjelper oss også med å opprettholde våre stiler på en mer praktisk måte. For eksempel, hvis det er noe på nettstedet vi ønsker å endre, kan vi bare endre verdien i disse variablene. Det er en mye tryggere måte å endre stiler på, i stedet for å utføre "Søk og erstatt".
Selv om vi har lagt til Normaliser som har standardisert elementelementene våre, har vi fremdeles noen få stiler å tilpasse for å følge vårt spesielle behov. Til å begynne med, vil vi endre boksestørrelsen, og sette alle elementene '(inkludert pseudo-elementene') i boksstørrelsen til border-box. Dette vil gi våre dimensjoner et mye mer kontrollerbart grunnlag for å jobbe fra.
Vi kan søke dette med .box-sizing Mixins fra LESSHat bibliotek, som følger:
*, *: før, *: etter .box-størrelse (grense-boks);
Deretter skal vi sette html skriftstørrelse til 62,5%, som er en tilnærming til å gjøre relative enheter mer håndterbare.
html font-size: 62.5%;
62,5% her måles mot nettleserstandarden på 1em som er 16px; så 62,5% av 16px er lik 10. Ved å gjøre dette, vil vi enkelt kunne finne ut om konverteringen av rem i px ved å multiplisere det med 10. 1.2rem, for eksempel, vil være lik 12px og så videre. I tillegg til dette, hvis vi tar en titt på remixins.less kilde, finner vi basestørrelsen i @ Basis-font-size-px variabel er satt til 10.
Du kan referere disse artiklene for videre på CSS relativ enhet:
Vi bruker en figur element for å inneholde porteføljebildekselet. Men vår figur Elementet har arve marginalverdier fra Normaliser som forårsaker utilsiktet hvitt mellomrom mellom porteføljebildene. Så, her vil vi fjerne marginen fra figur element.
figur margin: 0; / * overskrive Normalize.css standard stil * /
Bruke en clearfix hack er en populær metode som et bruksområde til noen oppsettproblemer forårsaket av flytende elementer som ikke klarer å rydde sine barnelementer. Så her vil vi legge til clearfix-tipset fra Nicolas Gallagher som vi har blitt til mindre.
.clearfix * zoom: 1; &: før, &: etter innhold: ""; skjerm: bord; &: etter clear: both;
Hvis du ser på HTML-strukturen, har vi lagt til clearfix klasse til noen elementer.
For kropp, Vi vil angi skriftstiler som gjelder gjennom hele siden. Disse stilene inkluderer skriftstørrelsen, skriftfarge, skrifttypevekt, skriftfamilie og bakgrunnsfargen. Her vil vi bruke .skriftstørrelse() mixin fra Remixins bibliotek for å generere skriftstørrelsen. Alle Mixins inkludert i Remixins-biblioteket genererer en px enhet tilbakebetaling, nyttig for nettlesere som ikke støtter rem enhet.
kropp .font-size (16px); bakgrunnsfarge: @ bg-body; farge: @ farge-base; font-familie: @ font-base; font-weight: 300;
Etter å ha lagret filen, vil Koala automatisk kompilere utdataene. Og koden ovenfor skal se slik ut i vanlig CSS.
kropp font-size: 16px; fontstørrelse: 1.6rem; bakgrunnsfarge: #fafafa; farge: # 353537; font-familie: 'Open Sans', Arial, sans-serif; font-weight: 300;
Deretter legger vi til stilene for nettstedet Header, som følger.
.porteføljeoverskrift .padding (50px, 0); bakgrunnsfarge: @ bg-header; tekst-align: center; .profile-avatar img .size (80px); border-radius: 50%; .profile-name .font-size (24px); .margin-bunn (10 px); farge: @ farge navn; font-familie: @ font-navn; font-weight: 400; .profile-felt .max-bredde (320px); .font-størrelse (14 piksler); farge: lyser (@ bg-header, 50%); margin-left: auto; margin-høyre: auto; .field-list padding: 0; .field-item display: inline-block; &: etter innhold: ','; &: siste barn: etter content: "; .profile-plassering .font-size (14px); farge: lysere (@ bg-header, 30%); &: før .margin-right (10px); .font-size (18px);
Dette er en del av syntaxen, så la oss slå den i stykker og undersøke hva den gjør. For det første har vi lagt til bakgrunnsfarge i overskriften med fargen som er lagret i vår @ Bg-header variabel. Vi bruker .polstring () Mixins fra Remixins for å legge til polstring øverst og nederst på toppteksten, og gir dermed mer vertikal hvit plass. Vi har også lagt til tekst-align: center så vårt innhold ser mer ut i rekkefølge.
.porteføljeoverskrift .padding (50px, 0); bakgrunnsfarge: @ bg-header; tekstjustere: senter; ...
Vi har satt brukerens avatarbilde med .størrelse() Mixins og laget sirkelformet ved å sette grense-radius til 50%. Du kan se at disse stilene er erklært i .profil-avatar img.
.profil-avatar img .size (80px); border-radius: 50%;
Nedenfor er reglene for brukerens navn. Her setter vi skriftstørrelsen med en .skriftstørrelse() mixin. Vi har distribuert @ Farge-navn variabel for skriftfargen, og passerte skriftfamilien med @ Font-family variabel. Og til slutt har vi lagt til font-weight: 400; for å få skrifttypen til å se dristigere enn resten.
.profilnavn .font-size (24px); .margin-bunn (10 px); farge: @ farge navn; font-familie: @ font-navn; font-weight: 400;
Deretter skal vi se på reglene for området for brukerens kreative felt, som vi målretter mot .profil-felt. I Behance kan du legge til så mange ferdigheter eller felt spesialiteter som du ønsker. Det betyr at hver bruker kan ha korte eller veldig lange ferdighetsbeskrivelser. Jeg har derfor bestemt meg for å sette bredden med a max bredde. Vi setter skriftfargen for 50% lettere fra topptekstbakgrunnen med lette (@ bg-header, 50%).
Videre er hvert feltelement skilt av et komma som vi har levert gjennom en :etter pseudo-element. Logisk sett må det siste elementet ikke ha komma, så vi har valgt det siste elementet med :siste barn og sett innhold Eiendommen skal være tom innhold:".
.profilfelt .max-bredde (320px); .font-størrelse (14 piksler); farge: lyser (@ bg-header, 50%); margin-left: auto; margin-høyre: auto; .field-list padding: 0; .field-item display: inline-block; &: etter innhold: ','; &: siste barn: etter innhold: ";
Følgende er stilregler for styling av brukerens plassering. Her setter vi farge litt lysere enn bakgrunnsfargen, 30% for å være eksakt. Og vi har også litt utvidet gapet mellom teksten og markørikonet fra Foundation Icon Fonts ved å legge til margin-right til :før pseudo-element.
.profil-plassering .font-size (14px); farge: lyser (@ bg-header, 30%); &: før .margin-right (10px); .font-størrelse (18 piksler);
Etter at du har lagt til disse stilene, skal overskriften nå se slik ut:
Følgende utdrag inneholder alle stilene for porteføljen vår.
.porteføljeområde .margin (50px, auto); .maks-bredde (960 x); bredde: 100%; .portfolio-liste padding-left: 0; .portefølje-element .margin-bottom (30px); .height (320); .padding (0, 15px); flyte: venstre; liste-stil-type: none; bredde: 33,33333333333333%; .porteføljeinnhold text-align: center; .portfolio-cover bredde: 100%; .portfolio-image border: 8px solid #fff; maksimal bredde: 100%; .portfolio-title .font-size (14px); farge: mørkere (@ farge tittel, 10%); tekst-transformere: kapitalisere; vertikaljustering: midt; bredde: 100%; .portfolio-felt .font-size (12px); farge: mørkere (@ bg-kropp, 30%); .field-list padding: 0; .field-item display: inline-block; &: etter innhold: ','; &: siste barn: etter innhold: ";
Mange av stilene ovenfor er dekorative. Men her er noen viktige ting verdt å merke seg:
Først satte vi .portefølje-området Bredde til 100%, men opprettholde maksimal bredde ved 960px. Dette vil tillate at bredden tilpasses grasiøst i mindre visningsportstørrelse. Også, som du kan se over, har vi satt inn .portefølje-element bredde til 33,33333333333333%. Dette skyldes at vi vil vise tre elementer på hver rad. De 33,33333333333333% er avledet fra divisjonen på 100% med 3.
De .portefølje-cover Bredden er satt til 100%, det vil derfor fylle foreldrenes bredde. De .portefølje-bilde er satt med max-bredde: 100% slik at bildet ikke vil overstige overordnet bredde uavhengig av størrelsen. Alle disse breddeinnstillingene vil hjelpe oss med å gjøre nettstedet vårt flytende.
Nå bør porteføljeseksjonen se slik ut.
Deretter legger vi til stilene for Footer. Footer er ren og enkel; Den består bare av "Drevet av" tekst og et Behance-ikon fra Foundation Icon Fonts. Nedenfor er alle stilregler for Footer.
.portefølje-footer .margin (30px, auto); .maks-bredde (960 x); tekst-align: center; bredde: 100%; .Power-by .font-size (12px); farge: mørkere (@ bg-kropp, 30%); tekst-transformer: store bokstaver; .power-logo .width (36px); .height (36px); farge: # 1769ff; display: inline-block; margin: 0 auto; overløp: skjult; stilling: relativ; tekst-dekorasjon: ingen; tekstinnhold: 100%; hvit-rom: nowrap; &: før .line-høyde (38px); .font-størrelse (36px); display: inline-block; høyde: 100%; venstre: 0; posisjon: absolutt; tekstindeks: 0; topp: 0; bredde: 100%;
På samme måte som porteføljeseksjonen, stiller vi bredden på bunnteksten til 100% og justerer den til midten av nettleservinduet med margin: 0 auto;. Vi justerer også alt innholdet til senteret slik at det ser ordentlig ut. Vi skjuler da teksten inni .power-logo bruker Kellummetoden og viser kun Behance-logoen med sin merkefarge, blå # 1769ff.
Merk: Behance har en hele utviklerens seksjon om sine Branding Guidelines hvis du vil ta en titt.
Foten skal nå se ganske fullstendig ut, slik som det.
Vi har en fluid layout, men nå skal vi gjøre vår nettside lydhør. Heldigvis er nettstedet vårt bare en nettside med et veldig enkelt oppsett. Så det vil ikke kreve noen lang kode for å gjøre den lydhør. Til å begynne med vil vi legge til (avgjørende) meta viewport i hode stikkord.
Deretter legger vi til noen medieforespørsler, som følger.
@media bare skjerm og (min bredde: 768px) og (maks bredde: 959px) .portfolio-område .portfolio-element bredde: 50%; @media bare skjerm og (maks bredde: 767px) .portfolio-område .portefølje-element høyde: auto; bredde: 100%;
Disse medieforespørrelsene vil vise to elementer på rad mellom 959px og 768px visningsbredde, og ett element når visningsbredden er 767px og lavere.
Vår porteføljes hjemmeside i forskjellige visningsstørrelserEtter å ha stylet estetikken til siden vår, er alt det som igjen er å legge til litt teft. I neste og siste del av denne serien tillater vi besøkende å klikke på hver miniatyrbilde og se en større versjon, pluss vi legger til noen CSS3-animasjoner for å forbedre opplevelsen.
Accentsconagua