Share
În partea anterioară a acestei serii, am aflat despre API-ul Behance, folosind-o pentru a capta piesele de portofoliu ale unui utilizator și a le afișa pe o pagină web. În această parte vom modela pagina web, prezentând piesele de portofoliu într-un mod atractiv.
Pentru a începe, vom pregăti setul de instrumente:
Vom folosi Normalize pentru a face stilurile elementului de bază mai coerente în diferite browsere și pentru a minimiza șansele de rezultate neașteptate.
De asemenea, vom folosi mai puțin pentru stylingul site-ului nostru. Indiferent de preprocesorul pe care îl preferați, este recomandabil să le utilizați în fluxul de lucru. Sunt un fan mare, în loc să fiu nevoit să trag culoarea dorită în selectorul de culori dintr-o aplicație separată, pur și simplu folosind funcții de control LESS cum ar fi uşura() și întuneca() pentru a ne oferi o gamă de variante de culoare.
Pentru a ne ajuta în continuare, vom folosi LESSHat pentru a ne ajuta să scriem Mai puțin cod cu colecția sa Mixins. Vom folosi de asemenea Remixins dezvoltat de Christopher Ramirez. Remixins este o colecție de mixuri de convertit px în rem unități. Colecția include mixurile pentru specificarea marimea fontului, margine, umplutură, lăţime și înălţime, și poziția CSS (stânga, dreapta, fund, și top).
În plus, vom avea nevoie, de asemenea, de un instrument pentru a compila mai puțin în CSS obișnuit. În acest tutorial, vom folosi o aplicație numită Koala, disponibilă în Windows, OSX și Ubuntu. Puteți utiliza, bineînțeles, orice compilator preferați, dar cu orice noroc, veți putea urma acest tutorial indiferent de platforma pe care o utilizați.
Pentru mai multe despre LESS, vă rugăm să consultați aceste tutoriale:
Fonturile sistem standard ca Arial tocmai nu o fac pentru mine azi. Deci, în acest tutorial voi folosi în schimb Google Fonts. Am ales Cantata One pentru titlu și Open Sans pentru textul implicit al corpului. Aceasta este o preferință personală, sunteți liber să excludeți Fonturile Google sau să utilizați alternative dacă doriți.
Vom folosi, de asemenea, icoane pentru un pic de decor pe site-ul nostru. În zilele noastre avem o mulțime de opțiuni pentru pictogramele de fonturi. Cu toate acestea, în timpul căutării mele am fost destul de surprinzător că numai câteva dintre aceste fonturi includ pictograma Behance din colecția lor. În orice caz, pentru acest tutorial vom folosi Fundația Icon Fonturi 3, așa cum a inclus pictograma Behance și este de asemenea disponibilă printr-un CDN.
În directorul rădăcină al proiectului, să creăm niște foldere noi denumite Mai puțin și css (care va fi dosarul de ieșire al fișierului LESS). Creați un nou fișier numit stil.less și apucați Remixins, precum și mai puțin. Pune aceste trei foi de stil LESS în Mai puțin pliant. În această etapă, lista de fișiere și foldere din directorul nostru de proiecte ar trebui să arate astfel:
| - css | - index.html '- mai puțin | - lesshat.less | - remixins.less - stil.less
Apoi, adăugați Normalize, fonturile Iconirii Fundației și foaia de stil Google pentru fonturi în interiorul cap tag, împreună cu style.css, care va fi fișierul de ieșire din style.less.
De asemenea, deschideți aplicația Koala (sau orice formă de compilare preferați) și adăugați directorul nostru de proiect la acesta.
Directorul de proiect din KoalaÎnainte de a scrie orice stiluri, să adăugăm câteva pictograme pe site-ul nostru. Mai întâi vom adăuga marca de localizare a hărții lângă elementul de locație al utilizatorului cu Fi marker clasă. Adăugați această clasă în dreptul opțiunii Profilul-locație clasa ca atare:
...user.city, user.country...
Acest lucru va adăuga a :inainte de pseudo element la div, injectând pictograma marcator prin intermediul pictogramelor Fundației. Apoi, vom adăuga logo-ul Behance în secțiunea subsolului cu Fi-social-Behance clasă.
...Behance
...
Să ne deschidem stilul și să importăm atât mai puțin, cât și remixins.less folosind (referinţă) marcă.
@import (referință) 'lesshat.less'; @import (referință) "remixins.less";
(referinţă) marcajul a fost introdus în LESS 1.5. Aceasta înseamnă că LESS va folosi fișierul doar ca referință, nu va compila și va scoate conținutul în fișier. Este o caracteristică foarte puternică care minimizează stilurile duplicate și inutile.
În stilless interior, vom adăuga următoarele variabile care stochează paleta de culori și familia de fonturi a site-ului nostru web.
@ bg-body: #fafafa; @ bg-header: # 303746; @ bază de culoare: # 353537; @ color-name: # e0e0e0; @ culoare-titlu: # 6b919f; @ font-body: "Open Sans", Arial, sans-serif; @ font-name: "Cantata One", Georgia, Times, serif;
Plasarea acestor variabile într-un singur loc acționează ca un fel de ghid de stil, dar ne ajută, de asemenea, să ne menținem stilurile într-un mod mai convenabil. De exemplu, dacă există ceva pe site-ul pe care dorim să îl modificăm, putem schimba pur și simplu valoarea în cadrul acestor variabile. Este o modalitate mult mai sigură de a modifica stilurile, în loc să efectuați "Căutați și înlocuiți".
Chiar dacă am adăugat Normalize, care ne-a standardizat stilurile de elemente, avem încă câteva stiluri pentru a ne ajuta să ne urmărim nevoile particulare. Pentru a începe, vom modifica dimensiunea cutiei, setând toate dimensiunile cutiilor (inclusiv pseudo-elementele) frontieră-box. Acest lucru va da dimensiunile noastre o bază mult mai controlabilă de a lucra.
Putem aplica acest lucru cu .box-dimensionare Mixuri din biblioteca LESSHat, după cum urmează:
*, *: înainte, *: după .box-size (box-border);
Apoi, vom seta html dimensiunea fontului la 62,5%, care este o abordare pentru a face unitățile relative mai ușor de gestionat.
html font-size: 62,5%;
62,5% aici este măsurată în funcție de standardul browserului 1em care este de 16px; astfel încât 62.5% din 16px este egal cu 10. Prin acest lucru, vom fi cu ușurință capabili să dăm seama de conversia lui rem în px prin înmulțirea cu 10. 1.2rem, de exemplu, va fi egal cu 12px și așa mai departe. În plus, dacă aruncăm o privire la sursa remixins.less, vom găsi dimensiunea fontului de bază în @ Base-font-size-px este setată la 10.
Puteți consulta aceste articole pentru mai multe despre unitatea relativă CSS:
Noi folosim a figura element pentru a conține acoperirea imaginii portofoliului. Dar noi figura elementul a moștenit valorile marjei de la Normalize, ceea ce cauzează spațiu alb neintenționat între imaginile din portofoliu. Deci, aici vom elimina marja din figura element.
figura marja: 0; / * suprascrie stilul implicit Normalize.css * /
Utilizarea unei hack-uri clare este o metodă populară ca recurs la unele probleme de aspect cauzate de elementele plutitoare care nu reușesc să-și elibereze elementele copilului. Deci, aici vom adăuga vârful clar de către Nicolas Gallagher, pe care l-am transformat în LOCĂ.
.clarfix * zoom: 1; &: înainte, &: după content: ""; afișare: tabel; &: după clar: ambele;
Dacă analizați structura HTML, am adăugat clearfix clasa la unele elemente.
Pentru corp, vom seta stilurile de fonturi care se aplică pe întreaga pagină. Aceste stiluri includ dimensiunea fontului, culoarea fontului, greutatea fontului, familia fontului și culoarea de fundal. Aici, vom folosi .marimea fontului() mixin din biblioteca Remixins pentru a genera dimensiunea fontului. Toate mixurile incluse în biblioteca Remixins generează o px unitatea de rezervă, utilă pentru browserele care nu acceptă rem unitate.
corpul .font-size (16px); fundal-culoare: @ bg-corp; culoare: @ bază de culoare; font-family: @ font-base; font-weight: 300;
După ce ați salvat fișierul, Koala va compila automat ieșirea. Și codul de mai sus ar trebui să arate așa în CSS obișnuit.
corp font-size: 16px; dimensiune font: 1.6rem; fundal-culoare: #fafafa; culoare: # 353537; font-family: "Open Sans", Arial, sans-serif; font-weight: 300;
Apoi, vom adăuga stilurile pentru site-ul Header, după cum urmează.
.portofoliu-antet .padding (50px, 0); fundal-culoare: @ bg-header; text-align: centru; .profile-avatar img .size (80px); raza de graniță: 50%; .profile-name .font-dimensiune (24px); .margin-bottom (10px); culoare: @ color-name; font-family: @ font-name; greutatea fontului: 400; . câmpurile de profil .max-width (320px); .font-size (14px); culoare: lumina (@ bg-header, 50%); margin-stânga: auto; margin-dreapta: auto; .field-list umplutură: 0; .field-item display: inline-block; &: după content: ','; &: ultimul copil: după content: "; .locația profilului .font-size (14px); culoare: lighten (@bg-header, 30%); (10px); .font-size (18px);
Aceasta este o bucată de sintaxă, așa că haideți să o descompunem în bucăți și să examinăm ce face. În primul rând, am adăugat culoarea de fundal în Antet cu culoarea stocată în lista noastră @ Bg-header variabil. Folosim .umplutură () Mixuri de la Remixins pentru a adăuga umplutură în partea superioară și inferioară a antetului, oferind astfel mai mult spațiu vertical alb. Am adăugat și noi text-align: centru astfel încât conținutul nostru arată mai bine.
.portofoliu-antet .padding (50px, 0); fundal-culoare: @ bg-header; text-align: center; ...
Am setat dimensiunea imaginii avatarului utilizatorului .mărimea() Se amestecă și se formează circulară prin stabilirea razei de margine la 50%. Puteți vedea că aceste stiluri sunt declarate în .profil-avatar img.
.profil-avatar img .size (80px); raza de graniță: 50%;
Mai jos sunt regulile pentru numele utilizatorului. Aici setăm mărimea fontului cu a .marimea fontului() mixin. Am desfășurat serviciul @ Culoare-nume variabilă pentru culoarea fontului și a trecut familia de fonturi cu @familie de fonturi variabil. Și, în sfârșit, am adăugat greutatea fontului: 400; pentru a face fontul să arate mai curajos decât restul.
.nume-profil .font-size (24px); .margin-bottom (10px); culoare: @ color-name; font-family: @ font-name; greutatea fontului: 400;
Apoi, vom examina regulile pentru zona câmpurilor de creare a utilizatorilor, pe care le vizăm .profile-domenii. În Behance, puteți adăuga cât mai multe abilități sau specialități de câmp așa cum doriți. Asta înseamnă că fiecare utilizator poate avea descrieri de calificare scurte sau foarte lungi. Prin urmare, am decis să stabilesc lățimea cu a lățimea maximă. Am setat culoarea fontului pentru 50% mai ușoară din fundalul Header cu lighten (@ bg-header, 50%).
În plus, fiecare dintre elementele de câmp este separat de o virgulă pe care am furnizat-o printr-un :după pseudo-elemente. Cu toate acestea, logic, ultimul element nu ar trebui să aibă o virgulă, așa că am selectat ultimul element cu :ultimul copil și setați conţinut proprietatea să fie goală conţinut:".
.câmpuri de profil .max-width (320px); .font-size (14px); culoare: lumina (@ bg-header, 50%); margin-stânga: auto; margin-dreapta: auto; .field-list umplutură: 0; .field-item display: inline-block; &: după content: ','; &: ultimul copil: după content: ";
În continuare, sunt regulile de stil pentru modelarea locației utilizatorului. Aici setăm culoarea ușor mai ușoară decât culoarea de fundal, cu 30% exactă. Și, de asemenea, am extins ușor spațiul dintre text și pictograma marker din fonturile Fundației Icon adăugând margin-dreapta la :inainte de pseudo-element de.
.profil-locație .font-size (14px); culoare: lumină (@ bg-header, 30%); &: înainte de .margin-dreapta (10px); .font-size (18px);
După adăugarea acestor stiluri, Header-ul ar trebui să pară așa:
Următorul fragment conține toate stilurile pentru portofoliul nostru.
.portofoliu-domeniu .margin (50px, auto); .max lățime (960 x); lățime: 100%; .pagina de portofoliu padding-left: 0; . portofoliu-element .margin-bottom (30px); .height (320px); .padding (0, 15px); plutește la stânga; listă-tip: none; lățime: 33,33333333333333%; . portofoliu-conținut text-align: center; . portofoliu-acoperire lățime: 100%; . portofoliu-imagine border: 8px solid #fff; max-lățime: 100%; . portofoliu-titlu .font-size (14px); culoare: întunecată (@ color-title, 10%); text-transform: capitalizare; vertical-aliniere: mijloc; lățime: 100%; .portfield-fields .font-size (12px); culoare: întunecată (@ bg-corp, 30%); .field-list umplutură: 0; .field-item display: inline-block; &: după content: ','; &: ultimul copil: după content: ";
Multe dintre stilurile de mai sus sunt decorative. Dar aici sunt câteva lucruri cheie care merită notate:
Mai întâi, am setat .portofoliu din zona lățimea la 100%, dar păstrați lățimea maximă la 960 px. Acest lucru va permite ca lățimea să se adapteze grațios în dimensiunile mai mici ale ferestrei de vizualizare. De asemenea, după cum puteți vedea mai sus, am setat .portofoliu de element lățime la 33,33333333333333%. Acest lucru se datorează faptului că vom afișa trei elemente pe fiecare rând. 33,33333333333333% este derivat din împărțirea a 100% la 3.
.Portofoliul-acoperire lățimea este setată la 100%, va umple astfel lățimea părintelui. .Portofoliu-image este setat cu max-width: 100% astfel încât imaginea să nu depășească lățimea părintelui, indiferent de dimensiune. Toate aceste setări de lățime ne vor ajuta să facem site-ul nostru fluid.
Acum, secțiunea de portofoliu ar trebui să arate așa.
Apoi, vom adăuga stilurile pentru subsol. Footerul este simplu și simplu; se compune numai din textul "Realizat de" și o pictogramă Behance din fonturile Fundației Icon. Mai jos sunt toate regulile de stil pentru subsol.
.portofoliu-subsol .margin (30px, auto); .max lățime (960 x); text-align: centru; lățime: 100%; .power-by .font-size (12px); culoare: întunecată (@ bg-corp, 30%); text-transform: majuscule; .power-logo .width (36px); .height (36px); culoare: # 1769ff; afișare: inline-block; marja: 0 auto; overflow: ascuns; poziție: relativă; text-decoration: nici unul; text-liniuță: 100%; spațiu alb: acum; &: înainte de .line-height (38px); .font-size (36px); afișare: inline-block; înălțime: 100%; stânga: 0; poziția: absolută; text-indent: 0; top: 0; lățime: 100%;
Similar cu secțiunea de portofoliu, setăm lățimea subsolului la 100% și aliniem-o cu centrul ferestrei browserului marja: 0 auto;. De asemenea, aliniem tot conținutul la centru pentru al face să arate ordonat. Apoi ascundem textul înăuntru .putere-logo folosind metoda Kellum și afișați numai logo-ul Behance cu culoarea mărcii sale, albastru # 1769ff.
Notă: Behance au o întreagă secțiune de dezvoltatori cu privire la liniile directoare privind branding-ul dacă doriți să aruncați o privire.
Subsolul ar trebui să pară destul de complet, așa cum se întâmplă.
Avem un aspect fluid, dar acum vom face ca pagina noastra sa fie receptiva. Din fericire, site-ul nostru este doar un singur site web cu un layout foarte simplu. Deci, nu va fi nevoie de un cod de lungă durată pentru a fi receptiv. Pentru început, vom adăuga fereastra meta (crucială) în cap etichetă.
Apoi adăugăm câteva interogări media, după cum urmează.
@media numai pe ecran și (min-lățime: 768px) și (max-lățime: 959px) .portfolio-area .portfolio-item width: 50%; Numai ecranul @media și (max-lățime: 767px) .portofoliu-zonă; portofoliu-element height: auto; lățime: 100%;
Aceste interogări media vor afișa două elemente la rând între lățimea ferestrei de vizualizare 959px și 768px și un element când lățimea ferestrei de vedere este de 767px și mai mică.
Site-ul nostru de portofoliu în diferite dimensiuni ale ferestrei de vederePrin stilul estetic al paginii noastre, tot ce trebuie să faceți este să adăugați un anumit sens. În următoarea și ultima parte a acestei serii, vom permite vizitatorilor să facă clic pe fiecare miniatură și să vadă o versiune mai mare, iar noi vom adăuga câteva animații CSS3 pentru a îmbunătăți experiența.
Accentsconagua