Share
Biblioteca de interfață de utilizator Yahoo este un set destul de extins de instrumente JavaScript pentru dezvoltatori. De multe ori lăsate neobservate sunt câteva alte componente utile ale bibliotecii care vor accelera codarea: unele biblioteci CSS. Astăzi, aș vrea să vă dau un tur al bibliotecii CSS Grids CSS.
De ce ar trebui să luați în considerare utilizarea bibliotecii CSS Grids CSS (denumită în continuare "grila YUI")? Ce o face să iasă în evidență? Nu m-am uitat prea mult la alte biblioteci de grilă, dar le găsesc convingătoare:
Grilele YUI utilizează ID-uri și clase ușor de reținut și marcaje clare; odată ce ați învățat, ați putea reveni la codul dvs. într-o lună și știți ce părți sunt din YUI și ceea ce face fiecare piesă.
Acest lucru reduce încărcarea de două ori: nu este nevoie să găzduiți fișierul pe serverul dvs., precum și o încărcare mai rapidă a paginii dacă clientul are fișierul memorat în cache.
Yahoo a coace în lățimile barei laterale care corespund liniilor directoare ale anunțurilor Biroului de publicitate interactivă.
Cu mai multe șabloane și abilitatea de a cuibui regiunile de pagini, Yahoo susține că oferă peste 1000 de combinații de layout ... toate în mai puțin de 5kb.
Desigur, grilele YUI nu sunt perfecte. Este puțin limitator atunci când vine vorba de lățimea barelor laterale pre-coapte; cu toate acestea, dacă se potrivesc nevoilor dvs., veți economisi timp, codificare și dureri de cap atunci când vă stabiliți site-ul.
Când începem, iată câteva resurse care vor fi de ajutor.
Înainte de a intra în griddy, să ne uităm la blocurile de construcție ale rețelelor YUI. Există cinci structuri diferite cu care veți lucra pentru a vă dezvolta aspectul; fiecare dintre aceste structuri este definită fie de un id, fie de o clasă (de obicei o clasă). Ele sunt după cum urmează:
Evident, întregul dvs. fișier HTML este documentul, dar în cazul nostru, este și divul imediat în interiorul corpului - divul care deține totul. Aici definiți lățimea site-ului dvs. Rețelele YUI vă oferă patru opțiuni de lățime: 750px, 950px, 100% sau 974px. Aceste lățimi nu sunt de fapt pixeli hardcoded; ele sunt ems, astfel încât pagina se va ajusta rapid când utilizatorul își ajustează dimensiunea fontului. Dacă acestea nu o taie, Yahoo a definit o lățime personalizată o briză. Iată codul pentru a crea un document la 800 de grade:
# custom-doc margine: auto; / * aceste două valori sunt necesare, ca * / text-align: left; / * ei ajută grila YUI centru de pagină * / lățime: 61.54em; / * 800px / 13 = em-valoare pentru majoritatea browserelor * / * width: 60.00em; / * 800px / 13.333 = em-valoare pentru IE * / min-width: 800px; / * opțional, dar recomandat * /
Pentru a seta lățimea, pur și simplu utilizați id-ul docului, doc2, doc3, sau doc4, respectiv valorilor date mai sus.
Există șapte șabloane de selectat. Primele șase definesc o dispunere de două coloane; fiecare are o lățime sau o orientare diferită pentru bara laterală, cu coloana principală de conținut preluând restul lățimii documentului. Șabloanele sunt 1) 160px în stânga, 2) 180px în stânga, 3) 300px în stânga, 4) 180px în dreapta, 5) 240px în dreapta și 6) 300px în dreapta. Pentru a obține șablonul dorinței dvs., adăugați simplu o clasă de yui-t # la același div pe care l-ați definit pe doc (înlocuiți # cu numerele de mai sus). După cum am menționat mai sus, aceste bare laterale sunt lățimile standard ale anunțurilor web, astfel încât orice publicitate ar trebui să se potrivească confortabil în interiorul acestora.
Cel de-al șaptelea șablon-yui-t7 nu este la fel de bine documentat (ciudat, nu este pe foaia de înșelătorie la care am legat-o mai sus, dar este pe această versiune mai veche). Se scade bara laterală, oferindu-vă pur și simplu o coloană cu lățime întreagă (care poate fi împărțită ulterior în coloane).
Blocurile reprezintă manifestarea reală a coloanelor pe care le-ați definit în șablon. Sunt doar două diviziuni în cadrul div div, ambele clasate cu yui-b. Din fericire, ei nu trebuie să fie copii imediați ai divului principal; Yahoo dă acest exemplu:
<-- Header Content --><-- Main Content --><-- Sidebar Content --><-- Footer Content -->
Puteți vedea din exemplul respectiv că nu aveți nevoie să puneți blocurile direct în divina rădăcină. Acest lucru vă permite să aveți un antet și un subsol cu lățime întreagă, ceea ce este, în general, o idee plăcută. Veți observa că blocul principal de conținut este în interiorul unui div cu un id de yui-main; Rețelele YUI fac acest lucru pentru a vă oferi posibilitatea de a avea fie bara laterală, fie coloana principală în codul dvs., ceea ce poate fi un avantaj atunci când vă gândiți la SEO sau accesibilitate.
Am grupat rețelele și unitățile împreună pentru că sunt cu adevărat similare; ambele sunt div. O grilă (definită cu clasa yui-g) spune în principiu 2 copii (de obicei unități) să-și împartă lățimea în mod egal. O unitate (clasa yui-u) ar trebui să fie întotdeauna copilul unei rețele și părintele conținutului tău.
Deci, care este diferența dintre un bloc și o rețea?
De asemenea, ori de câte ori aveți mai multe grile sau unități într-o rețea, este necesar să acordați primei o clasă de primii. Acest lucru se datorează faptului că nu fiecare browser oferă pseudo-clasa: primul-copil.
Dar dacă vrei să împarți o grilă neuniform? Viața nu este întotdeauna dreaptă, nu-i așa? Din fericire, YUI oferă o serie de opțiuni alternative clasei yui-g. Iată o listă a celorlalți:
Toate acestea sunt; dați doar 2 sau 3 unități în fiecare dintre grilele de mai sus și veți avea coloane inegale.
Ei bine, acum, când știi frânghiile, să trecem peste un exemplu de bază. Să presupunem că dorim aspectul standard al site-ului, știți, coloana cu conținut principal, cu o bara laterală în partea dreaptă - cu un pic de răsucire: vom împărți coloana principală în două mai mici și vom împărți unul din aceștia în două.
După cum am menționat, Yahoo oferă hosting pentru acest cadru, și de obicei este o idee bună să profitați de asta. De asemenea, Yahoo recomandă HTML 4.01 stricte Doctype, așa că am pus înăuntru. Iată ce începem:
O simplă YUI Grids CSS Exemplu
Accentsconagua