Share
V-ati intrebat vreodata cum au fost create toate aceste teme "reviste" pentru WordPress si alte platforme? Multe, dacă nu toate, au fost concepute folosind un cadru Grid CSS - cel puțin în esență, dacă nu chiar în realitate. Adică, puteți utiliza un cadru CSS existent sau puteți crea propriile dvs. de la zero. Deși este posibil să se proiecteze structuri complexe de pagini web fără un cadru, este, probabil, un act în masochism. În acest articol veți obține o prezentare generală a pachetului actual de cadre și pe care ar trebui să îl utilizați.
Grilele de glisare au fost utilizate în editarea tipărită cu mult înainte de Web. Ele sunt o fundație invizibilă utilizată pentru a obține coeziune vizuală în designul revistei și în ziarul de pagini. Acestea reprezintă, în esență, o latură care împarte spațiul orizontal și vertical în unități coerente unde pot fi plasate text, titluri, imagini și publicitate.
Același concept a fost adaptat pentru designul paginii web din același motiv, folosind codul CSS (Cascading StyleSheets) pentru a poziționa elementele HTML. De fapt, multe site-uri editoriale, difuzate de edituri mari din domeniul mass-media, aplică grile pentru a obține o privire pe site-urile lor similare cu conținutul lor tipărit.
Rețineți că axa verticală nu este la fel de bine susținută în sistemele CSS Grid, deoarece înălțimea unei pagini web nu este la fel de importantă ca o pagină tipărită. (Totuși, aceasta este o problemă minoră în designul paginilor web, cu excepția cazului în care vă așteptați aceleași caracteristici ca și sistemele Desktop Publishing - aka DTP - care sunt greu de suportat fără un limbaj asemănător PostScript pentru implementare și suport pentru browsere).
Nu toți designerii susțin utilizarea de cadre de rețea peste mese sau chiar deloc. Dar hai să facem față; există structuri pe care pur și simplu nu le poți face doar cu tabele HTML fără eforturi dureroase - și multe cuiburi care sunt greu de descifrat, ar trebui să facă vreodată schimbări.
Sigur, dacă folosiți grilaje, va trebui să adăugați un anumit markup HTML tag pentru conținutul dvs., mărind astfel dimensiunile fișierelor de pagină. De asemenea, aceasta înseamnă că marcajul și stilul nu sunt cu adevărat separate - un principiu pe care mulți designeri web ar dori să-l adere. (Unii oameni simt, in mod corect sau in mod gresit, ca naasayerii cadrelor CSS sunt designeri care sunt ingrijorati ca nevoia de servicii va scadea. Cu toate acestea, cu aceasta logica, coderii au probleme, mai ales cu cresterea codului cross-browser biblioteci cum ar fi jQuery.)
De fapt, folosirea unui cadru de rețea CSS înseamnă că browserul dvs. încarcă fișierele CSS o singură dată și le păstrează stocate în cache "pe partea clientului". În plus, marcajul HTML suplimentar necesar pentru a aplica cadrul CSS "invizibil" este rareori atât de semnificativ încât problemele legate de lățimea de bandă pentru cititori ar trebui să fie o preocupare. (Interesant este că majoritatea nașpailor par să vorbească despre Grid-urile Yahoo UI, nu atât Blueprint.)
În majoritatea exemplelor cu care am colaborat, și în oricare dintre temele revistei care utilizează rețele pe care le-am inspectat, vorbim despre creșteri de dimensiuni reduse relativ mici - în special în comparație cu codul de platformă blog utilizat. O singură imagine mare va ocupa probabil mai mult spațiu. Cu conexiuni rapide la internet, într-adevăr nu este așa de mare.
Design & Beneficii estetice
Indiferent dacă utilizați rețele CSS pentru prototipuri sau sisteme de producție, există mai multe avantaje estetice și de design:
Iată o scurtă listă a unor cadre mai populare:
Există și alte cadre Grid Grid CSS pe care le puteți găsi enumerate în Google Code, dar din cele trei sau patru mai multe pe care le-am analizat, cele mai multe fiind incomplete în ceea ce privește documentația sau chiar fișierele de proiect, așa că le-am lăsat în urmă. Dacă știți despre un cadru care nu este enumerat, vă rugăm să ne spuneți în comentarii!
Permiteți-mi să subliniez că aceasta nu este o comparație cuprinzătoare a cadrelor CSS. De fapt, nu am folosit nimic altceva decât Blueprint, deși am scanat docs pentru toate cadrele listate mai sus și am jucat un pic cu YAML și Grid Designer. Blueprint, YUI Grids și YAML sunt, fără îndoială, "cele trei mari" din spațiul cadru CSS, iar 960 pare a fi o alegere solidă pe locul patru.
În alegerea unui cadru, am luat în considerare faptul că nu sunt un designer instruit - dincolo de ceea ce am studiat singur de ani de zile. Mă descurc în design atunci când este necesar, deși într-o formă foarte minimalistă. De fapt, pentru că am petrecut câțiva ani, fie că mi-am publicat propria revistă de imprimare, fie că lucram la alții, am făcut un aspect destul de bun (foarte rău) de aspect al paginii, folosind principiile designului de rețea care lucrau cu Adobe PageMaker. Deci, mi se pare foarte natural sa lucrez cu Grid-urile CSS pentru designul web. Se pare că având în vedere numărul de teme WordPress aflate acolo - vezi lista de la sfârșitul acestui articol - care se bazează pe un cadru de rețea (mai ales Blueprint), designerii se simt destul de confortabil și cu rețelele.
Cu toate acestea, cu timpul întotdeauna limitat, am nevoie de ceva ușor de învățat și de utilizat, dar robust. Am constatat că Blueprint CSS Grid se potrivește nevoilor mele. Se integrează frumos cu diverse biblioteci JavaScript - inclusiv jQuery, care poate avea ca rezultat interfețe web sexy. Efectuează bine (deși nu 100% perfect) în majoritatea browserelor - deși trebuie să testați pentru acel ghimpe mare din partea designerilor web, browser-ul IE.
Bazându-mă pe cercetarea mea greoaie a rețelelor CSS în ultimul an, Blueprint pare a fi cel mai robust cadru, cel mai puțin restrictiv, cel mai bine susținut - în ceea ce privește cât de larg este utilizarea acestuia - cea mai mică dimensiune și cadrul cu cele mai multe instrumente . De fapt, frumusețea Blueprint-ului este că puteți produce foarte repede codul CSS pentru un cadru personalizat, folosind instrumente cum ar fi Generatorul CSS de la Kematzy Blueprint Grid. Deși puteți face acest lucru cu Grid Designer, o comparație rapidă ar sugera că nu este la fel de robustă ca Blueprint.
Pe marginea flipului, scanarea și navigarea în documentația pentru Yahoo! UI Grids CSS mă determină să cred că dacă vrei doar să faci niște layout-uri simple de pagini web și vrei o mână de presetări pentru a te juca, poate că vrei să te uiți în această opțiune. Cu toate acestea, simt că este prea restrictiv pentru a-mi plăcea. (S-ar putea să doriți să citiți Foo Hack's Blueprint CSS Framework vs. YUI Grids.)
În cele din urmă, atunci când vine vorba de a învăța ceva nou online - cum ar fi un limbaj de programare și o bibliotecă / cadru de coduri - aplic mereu "regula umerilor giganților". Am prima listă scurtă a opțiunilor care par potrivite pentru ceea ce am nevoie, apoi selectați în funcție de cât de mult a fost scris despre ea. Poate nu pare corect cu opțiunile mai noi, dar procesul nu este mult mai arbitrar decât numărul de persoane care aleg aplicații web pe care să le folosească. Există prea multe acolo pentru a ține pasul și având o comunitate de susținere existentă face o mare diferență.
Blueprint CSS Grid Framework este ceea ce voi folosi în toate tutorialele mele la NETTUTS (atunci când este relevant). În loc să copiați lista de caracteristici din documentele Google Code, permiteți-mi să mă concentrez asupra motivului pentru care l-am ales personal. Unele dintre aceste puncte se suprapun cu ceea ce am spus mai sus:
După cum am menționat mai sus, fac probleme în IE - dar nu toată lumea? Mai multe teme WP care utilizează Blueprint au rezolvat probleme de browser IE, așa că extrapol în convingerea mea că acestea pot fi rezolvate în cea mai mare parte.
Blueprint, de la această scriere, nu acceptă aspectul lichid - ceva ce nu sunt un fan mare de oricum. Totuși, un astfel de sprijin apare, în cazul în care vă sprijiniți în acest fel.
Ei bine, aceasta este o chestiune de alegere, nu-i așa? Unele Grid-uri CSS vin cu un grid.png sau chiar cu un fișier .psd pe care îl puteți utiliza în mod transparent în Photoshop, Fireworks, GIMP etc., în timp ce vă stabiliți elementele de design. Sunt o școală mai veche și întotdeauna îmi proiectez machetele începând pe hârtie:
Veți observa că nicăieri în acest proces nu se folosește software-ul grafice pentru machetarea layout-ului. Asta pentru că nu sunt un designer și folosesc o abordare foarte minimalistă pentru ceea ce proiectez (doar pentru mine). Dar dacă intenționați să folosiți, de exemplu, Focuri de artificii pentru momeală, ați face acest lucru între pașii 3 și 4.
Am încercat să fiu cuprinzătoare în căutarea mea de CSS Grid Frameworks, scanând peste 120 de articole pentru potențialii clienți. Cu toate acestea, este posibil să fi ratat câteva opțiuni, deci nu ezitați să oferiți altora.
Indiferent de cadrul CSS pe care îl decideți să îl utilizați, faceți acest lucru deoarece se potrivește cel mai bine necesităților dvs. generale. Dacă paginile / șabloanele pe care le proiectați vor avea publicitate, luați în considerare ce tip de anunțuri. La început, când am selectat teme pentru site-urile mele, am ales pentru anunțurile AdSense (care sunteți IAB compatibil). Mai recent, am ales / proiectat blocuri de anunțuri de 125x125, pe care le prefer foarte mult în majoritatea blocurilor AdSense.
Dacă sunteți interesat, există o specificație de proiect W3C intitulată CSS Grid Positioning Module Level 3 (scris de doi angajați Microsoft), care discută despre integrarea layout-ului bazat pe rețea în CSS. Caracteristicile discutate în acest proiect ar putea fi în IE 8.
Iată câteva linkuri către câteva din numeroasele articole extraordinare despre rețelele CSS.
Dacă simțiți că nu sunteți gata să abordați grilele și designul temelor încă, dar aveți nevoie de o temă bazată pe grilă, aici este probabil una dintre cele mai cuprinzătoare liste pe care le veți găsi. (Există, de fapt, mai mult de 46, dacă includeți variații.) Acesta include reviste, reviste, galerii, specialități și diverse teme premium care utilizează fie explicit sau implicit Rețelele CSS. (Este posibil ca unul sau doi să nu folosească grile, deși la prima vedere ele par a fi.)
Câteva dintre aceste teme sunt gratuite sau au o versiune gratuită. Cele mai multe sunt pentru platforma WordPress. Această listă include doar teme accesibile publicului larg, nu neapărat teme personalizate ale rețelei folosite de diverși bloggeri. (A se vedea linkurile selectate din lista precedentă, inclusiv Wall Web Designer și Smashing Magazine pentru instantanee ale unor astfel de site-uri. A se vedea, de asemenea, Subtracția lui Khoi Vinh, ca exemplu al unui site bazat pe grilă).
Avertisment: Unele dintre aceste teme ar putea să nu funcționeze în WP 2.5x+
Lista de teme de reviste de mai sus este compilate din următoarele referințe, precum și din căutarea în Google.com.
Accentsconagua