Acest tutorial vă va prezenta Pure, o bibliotecă CSS realizată din module mici, care vă poate ajuta să scrieți într-o manieră foarte receptivă, într-un mod foarte rapid și ușor. Pe parcurs, vă voi îndruma prin crearea unei pagini simple pentru a evidenția modul în care puteți utiliza unele dintre componentele bibliotecii.
De ce să creați structuri responsabile?
În ultimii ani în dezvoltarea web, Trei cuvintele care se învârt în jurul valorii de, sunt și sunt: Design Web Responsabil (RWD). În acest moment ar trebui să știți deja ce este, dar, doar în cazul în care ați pierdut-o, iată câteva resurse pentru a completa golurile:
Articole despre WebDesign Tuts+
Cursuri pe Tuts + Premium
Responsabil Web Design de către Ethan Marcotte
Dar întrebarea este: De ce mergeți receptivi? Răspunsul este că nu avem niciun control asupra rezoluției pe care dispozitivul următor o va folosi când vizitează site-ul nostru web. Nu mai putem afișa propoziții, cum ar fi "Cel mai bine văzut la rezoluția de 1024x768" (deși le puteți găsi în continuare pe web). Unul dintre principalele motive pentru acest fenomen a fost creșterea lățimii monitoarelor PC și, de asemenea, răspândirea dispozitivelor mobile conectate la Internet. În plus, bazându-se pe StatCounter, în prezent ~ 16% dintre utilizatori sunt conectați printr-un dispozitiv mobil. Acum nu spun asta RWD este doar o chestiune de optimizare a unui site pentru o anumită dimensiune a ecranului, ceea ce vreau să spun este că creăm o experiență extraordinară pentru utilizatorii care vizitează site-ul nostru web, indiferent de dispozitivele pe care le utilizează.
Cu toate acestea, este clar că nu toți lucrăm pentru o companie în care fiecare persoană are un singur rol (designer, dezvoltator, tester și așa mai departe). Deci, să spunem că sunteți un dezvoltator solo, care lucrează ca un freelancer și nu știți prea multe despre designul web. Există o mulțime de biblioteci disponibile care pot accelera fluxul de lucru. Cele mai complete sunt cu siguranță Boostrap și Fundația, dar uneori pot fi suprasolicitate și poate aveți nevoie de ceva mai mic. În aceste cazuri, Yahoo a lansat un nou proiect interesant pe care îl putem folosi, numit Pure.
Ce este pur?
Citând site-ul Pure, este un set de module CSS mici, receptive, pe care le puteți utiliza în fiecare proiect web. Așa cum am spus înainte, biblioteca completă este foarte ușoară, fiind doar de 4,2 KB minificate și gzipped, dar pentru a menține site-ul dvs. chiar mai ușor, puteți include doar câteva dintre modulele disponibile. Practic, este compus din următoarele module:
Baza
Grilă
Formulare
Butoane
Mese
Meniuri
Unul dintre lucrurile pe care le apreciez cu adevărat despre Pure este că se bazează pe Normalize.css, o bibliotecă bine cunoscută care face elemente mai consecvente și în conformitate cu standardele moderne și funcționează și în browserele mai vechi. Deoarece este foarte mic, nu oferă o soluție completă pentru toate problemele dvs., dar are mai multe elemente de interfață UI preconstruite, pe care le puteți găsi într-o mulțime de site-uri de pe web. O altă caracteristică interesantă a Pure este că este foarte extensibil și personalizabil. Autorii au folosit SMACSS pentru a-l construi și toate clasele sale încep cu pur-, astfel încât să le puteți recunoaște cu ușurință.
Deși Pure este un proiect interesant de văzut, rețineți că este cu adevărat nou și că nu ar fi potrivit pentru proiecte mari. De fapt, versiunea actuală (0.2.0 la momentul acestei scrieri) are câteva probleme pe care probabil că nu le-ați găsi în cadre mai mature, iar documentația sa ar putea fi, de asemenea, îmbunătățită. Cu toate acestea, mi-a plăcut și fiind un precursor, aveți avantajul de a studia și de a învăța Pure, încă de la început, care ar putea deveni următorul proiect cunoscut pe web.
Să vedem Pure în acțiune
Ei spun că o imagine este în valoare de o mie de cuvinte. Pentru noi, ca dezvoltatori și designeri, demo-ul pe care îl putem juca este chiar mai bun. Deci, pentru a vedea ce poate face Pure pentru noi, să creăm o aplicație demo de bază. Demo-ul nostru va consta dintr-o pagină de pornire simplă care conține informații despre mine (uneori imaginația mea mă sperie). Imaginea de mai jos vă arată ce ar trebui să arate rezultatul final pe un ecran mare:
Iar următoarea imagine, în schimb, vă arată cum va arăta pe un smartphone:
Pasul 1: Creați meniul orizontal
După cum am spus, Pure are mai multe elemente comune preconstruite pe care le puteți găsi într-o mulțime de site-uri de pe web. Un meniu orizontal este cu siguranță unul dintre ele și ne va oferi șansa să aruncăm o privire asupra unora dintre clasele modulului de meniuri.
Pentru a crea acest lucru folosind HTML5, avem de obicei un element care cuprinde o listă neordonată care conține legăturile principale ale site-ului nostru. Odată ce lista este creată, trebuie să o afișăm orizontal. Pentru a realiza acest lucru, trebuie să aplicăm trei clase în lista de învelitori (): .-Meniu pur, .pur-meniu deschis, și .pur-meniu orizontal. Prima clasă aplică reguli care sunt comune tuturor meniurilor din Pure. .pur-meniu deschis clasa este folosit pentru a arăta (în loc de a ascunde) elementele listă, în timp ce .pur-meniu orizontal clasa este cea responsabilă pentru afișarea elementelor de pe aceeași linie. Rețineți că în mod prestabilit, meniul nu este centrat.
Acum, pentru a îmbunătăți interfața cu utilizatorul, ar trebui să evidențiem elementul de listă care face legătura cu pagina curentă. Acest lucru se face prin aplicarea .pur-meniu selectat clasa la element pe care doriți să îl evidențiați. Procedând astfel, culoarea textului se va transforma de la gri la negru.
Codul complet al meniului nostru este afișat mai jos:
Pasul 2: Descrierea autorului
După meniu, puteți vedea că avem un "rând" ideal care conține pe partea stângă, o fotografie și pe partea dreaptă, o mică descriere a mea. Acest "rând" este de fapt a grilă receptivă realizat din două unități de rețea, unde primul împachetează fotografia și ocupă 25% din spațiul său, în timp ce cel de-al doilea împachetează descrierea și ocupă celelalte 75%, atâta timp cât lățimea ecranului este mai mare de 767 de pixeli. Dimpotrivă, dacă lățimea ecranului este egală sau mai mică, unitățile de rețea sunt stivuite și ocupă 100% din lățimea disponibilă. Rețineți că unitățile au o lățime de 100%, deci dacă elementele din interiorul lor au o lățime mai mică, ele vor ocupa doar o parte a unității. Pentru a vedea cum funcționează aceasta, încercați să redimensionați fereastra și observați modul în care fotografia nu consumă 100% din lățime, în timp ce, în același timp, unitățile de rețea sunt stivuite.
După cum sa menționat anterior, Pure are un modul specific pentru gestionarea rețelelor. Pentru a declara o rețea receptivă, trebuie să aplicați containerului o clasă numită .pur-g-r. Unitățile de rețea, în schimb, au un nume similar, .pur-u - * - *, unde partea finală a clasei specifică cât spațiu va ocupa unitatea dată. De exemplu, dacă aplicați unui element .pur-u-1-4 clasa, va rezerva 25% din lățimea disponibilă, așa cum am făcut pentru fotografie. Un alt exemplu ar putea fi .pur-u-2-3 care va permite unității să dețină 66,6% din spațiul din rețea.
Acest sistem de rețea este cu adevărat interesant, deoarece vă poate economisi mult timp dacă nu știți cum să gestionați pluti, clar, și alte reguli pentru a crea planuri. În plus, acestea vă vor salva de toată durerea de a gestiona partea receptivă a aspectului.
Cu aceasta, codul care implementează prima rețea ar trebui să arate astfel:
Aurelio De Rosa
Sunt un dezvoltator web și dezvoltator de aplicații italian, care au o diplomă de licență în Informatică și programare de peste 5 ani de experiență pentru web folosind HTML5, CSS3, JavaScript și PHP. Eu folosesc în principal LAMPĂ stivă și cadre ca jQuery, jQuery Mobile și Cordova (PhoneGap). Interesele mele includ, de asemenea, securitatea web, accesibilitatea web, SEO și WordPress.
În prezent, sunt lucrător pe cont propriu care lucrează cu tehnologiile citate. De asemenea, sunt un blogger regulat pentru mai multe rețele (SitePoint, Tuts + și FlippinAwesome) în care scriu articole despre subiectele pe care le lucrez de obicei și mai multe.
Pasul 3: Rețeaua de informații
A doua și ultima rețea este împărțită în trei părți egale. Le-am creat pentru a vă arăta alte componente ale bibliotecii, astfel încât să puteți avea o imagine de ansamblu asupra lor. De fapt, prima unitate are un tabel, al doilea are o formă, iar al treilea are un meniu vertical.
Codul de mai jos vă arată cum să împărțiți grila în trei părți:
Acum, hai să explorăm fiecare unitate a acestei rețele receptive.
Pasul 4: O masă responsabilă
Un altul dintre modulele disponibile în Pure este tabelele. Asa cum spune si numele, ea contine reguli pentru stilul a
element și copiii săi. În mod prestabilit, tabelele vor avea o margine verticală aplicată coloanelor separate separat vizual. Cu toate acestea, puteți adăuga și o margine orizontală, aplicând .pur-masă mărginită clasa sau arăta numai ultima folosind .pur-masă orizontală clasa la
element. În plus, puteți crea și tabele în formă de dungi pentru a ajuta utilizatorul să citească datele. Pentru a realiza acest lucru, aveți două posibilități. Primul va funcționa pe browserele care acceptă nth-copil și constă în aplicarea .pur-table cu dungi nume de clasă la
element. Al doilea, în schimb, funcționează în toate browserele, inclusiv în Internet Explorer 8 și în versiunile inferioare, dar este mai verbose. Se compune din adăugarea .pur-table-nui nume de clasă pentru fiecare altul
element. Din motive de compatibilitate, voi merge la a doua abordare.
În prezent, tabelele au o problemă atunci când sunt vizualizate pe ecrane mici, dar vor fi rezolvate în următoarea versiune. Rețineți că nu veți vedea acest lucru în demo pentru că l-am fixat. Înaltul cinci pentru mine.
Codul care creează tabelul cu dungi este prezentat mai jos:
Tabel de preț amuzant
Număr de ore
Preț (€)
Sigur (%)
1
30 €
0%
5
135 €
10%
10
255 €
15%
20
480 €
20%
50
1050 €
30%
Pasul 5: Un formular de contact stacked
Formularele sunt încă un alt modul al bibliotecii Pure. Vă permite să afișați formularele în mai multe tipuri diferite de stiluri. În această demonstrație, vom crea o formă stivuită, în care elementele de intrare sunt sub etichete. Pentru a face acest lucru, trebuie să adăugăm .Formă pură si .pură formă stivuit clase la element. Apoi trebuie să plasăm ambele eticheta si intrare etichete într-un ambalaj, în cazul în care vom aplica .Control pur-grup și apoi puneți toate aceste împachetări într-un element. Butonul de trimitere și butonul de resetare vor avea și un înveliș, dar ambalajul lor va avea clasa .Controalele pure. Rețineți că pentru butonul de trimitere am folosit clasa .pur-buton-primar pentru ao evidenția. Clasa citată aparține modulului Butoane și este utilizată pentru a schimba stilul butonului, aplicând o culoare albastră.
Iată cum ar trebui să arate codul de formular:
Contacteaza-ma
Pasul 6: Un meniu vertical cu o antet
Elementul final pe care îl veți învăța cum să creați, folosind Pure, va fi un meniu vertical cu un antet. Un meniu de acest tip este decorat cu un margine neagră, în jurul valorii de toate. Pentru ao folosi, vom aplica în lista de înfășurare, două dintre cele trei clase pe care le-am utilizat deja în primul pas, adică .-Meniu pur și .pur-meniu deschis. În plus, pentru a crea antetul, trebuie să adăugăm un alt element și să îl aplicăm .-Meniu pur-titlu clasă.
Codul pentru acest meniu este prezentat mai jos:
Unde mă găsești
Profilurile mele
Stare de nervozitate
LinkedIn
GitHub
Google+
Concluzie
Deci, aceasta completează această introducere la Pure. Sper ca ti-a placut. Dacă doriți să urmăriți dezvoltarea Pure, puteți vizita depozitul său pe GitHub. Simțiți-vă liber să prezentați probleme, să emiteți cereri de tragere și să contribuiți.
Accentsconagua
Share
