Share
Sistemul de grid 960 a fost în jur de ceva vreme? dar a fost folosit cel mai mult pe partea de codificare a proiectelor ca un cadru HTML / CSS. Astăzi, vom vorbi despre avantajele utilizării sistemelor de grilă cum ar fi 960GS chiar la începutul unui proiect, înainte de a deschide chiar Photoshop sau Fireworks. Dacă nu ați folosit anterior un cadru sau doriți doar o reîmprospătare bună, acesta este un loc minunat pentru a începe!
Sunt șanse bune că ați auzit deja sau ați folosit deja un anumit cadru CSS? dar, doar în caz, să analizăm beneficiile cheie ale utilizării unui cadru CSS (aka grid system) în orice proiect web:
În cele din urmă, un cadru CSS ar trebui să contribuie la stabilirea unor orientări de bază pentru coloanele de conținut, oferind totodată designerilor un control deplin asupra desenelor lor.
În acest articol: Voi explica ce este un cadru CSS și de ce am ales 960. Apoi, voi trece peste elementele de bază ale modului de a aplica grila 960. Pentru a încheia discuția noastră, vă voi arăta câteva site-uri care utilizează grila 960 și modul în care acestea sunt structurate.
Un CSS Framework este o serie de foi de stiluri create pentru a ușura viața dezvoltatorilor web. Acestea sunt responsabile pentru diferitele quirks de browsere, sunt ușor de adaptabil și aplică principii de proiectare de bază (cum ar fi stabilirea marjelor vizuale plăcute între elemente).
De multe ori, aceste cadre au, de asemenea, foi de stil tipografice, care pot constitui un loc minunat pentru a începe să lucreze la tipografia site-ului dvs. (pentru mai multe informații despre tipografie, consultați acest articol).
Există două CSS-uri majore în acest moment: Blueprint și 960. Ambele sunt cadre perfect capabile, cu trăsături deosebite și ușor de utilizat. Pur și simplu se reduce la o chestiune de preferință a cadrului pe care vă simțiți cel mai confortabil folosind.
Înainte de a începe faza de proiectare a unui proiect, este important să discutați despre alegerea unui cadru cu persoana care urmează să codifice site-ul. Deseori, dezvoltatorii vor avea preferințe față de un anumit cadru CSS și, unul dintre principalele motive pentru care folosim cadrele în faza de proiectare este de a netezi tranziția de la proiectare la codificare, este o decizie majoră. Dacă codificați singur proiectul, asigurați-vă că vă simțiți confortabil cu cadrul de rețea pe care îl alegeți - nu este nimic mai rău decât să proiectați un întreg site bazat pe un cadru care vă sfârșește prin a displăcea.
Personal, am găsit că modelul 960 se potrivește mai bine nevoilor mele, deci asta am adoptat și asta vom discuta în acest articol. Cu toate acestea, principiile generale pe care le vom discuta se vor aplica oricarui cadru, inclusiv Blueprint.
960.gs se bazează în jurul introducerii tuturor elementelor site-ului dvs. într-un container de 960 pixeli lățime (inteligentă) și împărțind acel container în 12, 16 sau 24 de coloane de dimensiuni egale. Ele oferă un instrument de a utiliza lățimi alternative, dar 960 este ceea ce întregul sistem este dezvoltat și se întâmplă să arate destul de ascuțite.
De ce 960 de pixeli? Deoarece 960px este o lățime care este potrivită pentru numărul mare de platforme pe care navigăm pe web. Acesta permite, în esență, un monitor cu lățimea de 1024 pixeli pentru a afișa site-ul cu precizie și fără derulare orizontală, contabilizând lățimea browserului Chrome, barele de derulare și un pic de umplutură pentru lizibilitate. Există întotdeauna o margine de 10px plasată în partea dreaptă și la stânga a coloanei de conținut principal, ceea ce înseamnă că browserele mai mici vor putea întotdeauna să citească conținutul cel mai îndepărtat din stânga, fără text, dar fără fereastra browserului.
În plus, toate numerele din modelul 960GS sunt numere întregi bazate pe raportul de aur - nu există puncte zecimale sau probleme de spațiere funky. Dacă ați citit articolul nostru despre matematică și design web, știți cât de important este obținerea acestor numere.
Una dintre omisiunile greșite sau caracteristicile frumoase, în funcție de modul în care te uiți la ea, este modul în care 960 se ocupă (sau nu) de tipografie. Există un fișier text.css inclus, dar acest lucru este în principal pentru a se asigura că există cel puțin un lucru în loc, astfel încât, pe măsură ce faceți prototipuri rapide, elemente comune, cum ar fi titlurile, paragrafele și listele, au un stil de bază.
Nu voi intra prea adânc aici, dar să discutăm pe scurt diferențele cheie dintre 960.gs și Blueprint. In primul rand, Blueprint este un framework CSS bazat pe 950 pixeli - este foarte asemanator cu 960 in modul in care se ocupa de chestii de layout de baza (BP foloseste 24 de coloane cu abordari similare cu padding si ratios)? dar acolo Blueprint nu mai este similar.
Blueprint este un sistem cadru mult mai complex, robust și mai cuprinzător. A fost construit ca o foaie de stil cu drepturi depline pentru aproape orice element despre care vă puteți gândi (butoane radio, mese etc.). Sunt lucruri care îmi plac Blueprint, cel mai notabil fiind stilul său pentru elementele de formă și clasele de notificare construite. În plus, include o suită completă de stiluri pentru:
Problema pe care am avut-o cu Blueprint este că este prea complexă pentru a fi folosită în faza de proiectare? crearea unui design de la zero înseamnă redimensionarea tot ceea ce furnizează și este adesea greu să ții pasul cu exactitatea completă oferită de BP. În schimb, 960.gs oferă doar un aspect - perfect pentru a lăsa un designer să devină creativ în limitele realiste.
Grila 960 este aproape înspăimântător de ușor de utilizat (de fapt, puteți începe să vă întrebați: "De ce nu am folosit-o mai devreme?"), Cu doar câteva reguli simple pe care trebuie să le respectați.
După ce îl descărcați, aruncați o privire în interiorul directorului pe care tocmai l-ați dezarhivat. Vreau să vă atrag atenția asupra a două dosare: "schetch_sheets" și "template-uri". Dosarul "foi de schiță" conține un fișier PDF al diferitelor dimensiuni ale rețelei într-o fereastră de browser și folderul "șablon" conține șabloane pentru aproape orice program grafic sub soare (cum ar fi GIMP, Fireworks și Photoshop).
Scopul unui CSS Framework este de a vă face viața mai ușoară și ar trebui să căutați mereu modalități de a vă ajuta să reduceți timpul necesar pentru a crea un design. Utilizați aceste șabloane atunci când creați un design în Photoshop, tipăriți copii ale "foilor de schiță" atunci când discutați detaliile unui proiect cu un client (și asigurați-vă că te uiți la asta înainte de a pleca!).
De fapt, aș sugera să folosiți aceste foi de schițe de fiecare dată când începeți un proiect: vă permit să experimentezeți liber înainte de a vă închide la orice aspect. Va dura doar 5 minute de schițare pentru a realiza că un design va funcționa sau nu va funcționa, spre deosebire de 50 de minute + dacă îl proiectați și îl codificați.
Odată ce ați ajuns la un acord de bază cu privire la conceptul schițat pentru site-ul, este timpul să deschideți fișierele șablon. Acesta este probabil motivul central pentru care îmi place să folosesc sistemul 960? vine pre-ambalate cu șabloane pentru aproape orice program pe care îl puteți gândi. Se întâmplă să utilizez Photoshop, deci iată o captură de ecran a șablonului furnizat:
Principalul beneficiu aici este simplu: Șablonul conține ghiduri pre-construite pentru toate coloanele cu conținut principal care corespund direct cadrului CSS de pe partea de codificare a lucrurilor. Este ușor să desenați rapid coloanele cu conținut principal și să păstrați totul în designul dvs. curat și organizat.
Designerii experimentați ar putea vedea acest lucru ca fiind "un design cu roți de antrenament", dar sincer, nu este nimic în neregulă cu un sistem simplu de suprapunere care să ajute la îndrumarea cadrului pentru un design web.
Încă trebuie să proiectați totul pe site (desigur!), Dar păstrând design-ul dvs. în conformitate cu ghidurile, va face partea de dezvoltare a lucrurilor mult mai ușor. Ca și beneficiu suplimentar, având o abordare uniformă a umplerii între celulele de conținut este o modalitate excelentă de a vă face designul să arate mai profesionist. Aflați mai multe despre "Pixel Perfect Comps" aici.
Acum că ați obținut un design înclinat, este timpul să vorbim despre sintaxa rețelei 960. Așa cum am menționat la intro, puteți găsi mai multe informații despre utilizarea și prototiparea cu cadre CSS la Nettuts, așa că voi doar să acoperim elementele de bază aici.
Mai întâi, va trebui să menționați fișierele CSS corespunzătoare în design-ul dvs.: reset.css (fișierul de resetare care contabilizează quirks browser-ul), text.css (stilurile tipografice încorporate) și 960.css (sau 960_24_col.css dacă utilizați o grilă cu 24 de coloane). De obicei, am plasat toate stilul meu de site-specific într-un fișier separat (de obicei numit style.css), pentru a vă asigura că nu rup nimic în cadrul.
Sfat rapid: Faceți referință la propria foaie de stil după ce faceți referire la Cadrul de lucru, astfel încât să puteți ajusta anumite aspecte ale cadrului fără a modifica însăși cadrul (și dacă faceți o greșeală, nu trebuie să re-descărcați și să suprascrieți fișierele Framework). Cu aceste 4 fișiere, sunteți gata să începeți să vă proiectați site-ul.
Iată o prezentare generală rapidă a sintaxei trase de pe site-ul 960.gs:
????
Primul div este containerul dvs., ceea ce va fi stocat conținutul dvs. Prin definirea clasei sale ca fiind "container_12", spui: "Vreau ca acest container să aibă o grilă de coloană de 12 coloane" (Aceeași practică se aplică și atunci când se utilizează un număr de 16 și 24 grilă de coloană).
Acum, că ați definit containerul ca o structură de 12 coloane, începeți să vă structurați site-ul în așa fel încât să se potrivească în aspect. Dacă vă uitați la următoarele elemente div din ierarhie (după cum se observă în file), veți vedea sintaxa pentru definițiile acestora. "Grid_7" și "grid_3" sunt destul de ușor de înțeles: spui că acest element div va prelua numărul de coloane X. Cu toate acestea, 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Până acum, știu că te întrebi despre elementele Div imbricate în divizia "Grid_7". Poți să creezi divs care să ia un anumit număr de coloane în interiorul alt div, atâta timp cât nu depășește dimensiunea grilei părinte. În plus, primul și ultimul element trebuie să aibă "alfa" și "omega" anexate definiției lor de clasă, respectiv. Deci, în exemplul nostru de cod: "grid_2 alpha" este primul div imbricat în "grid_7", următorul element "grid_3" este în mijloc (și, prin urmare, nu are nevoie de un "alfa" sau "omega" și în cele din urmă "grid_2_ omega" este ultima div imbricată în "grid_7". Și din moment ce 2 + 3 + 2 = 7, definiția este corectă.
În scopul ilustrării acestui întreg proces, să trecem printr-un exemplu rapid de utilizare a Cadrului 960 în faza de proiectare a unui proiect personal al a mea.
Design-ul în sine este destul de simplu, dar este modul perfect de a vă arăta cum cadrul poate funcționa ca un instrument prin procesul de proiectare.
Site-ul Cerberus: Exemplu pe care îl vom folosi Mass Effect 2 este unul dintre jocurile mele preferate din ultimii 5 ani, și m-am simțit creând un site pentru organizația fictivă "Cerberus" ar fi o provocare. Principalele aspecte ale organizației sunt: profesionalismul și priceperea tehnologică, pe care am vrut să le transmit cu un design curat care și-a folosit întreaga schemă de culori. Pentru a începe, am schițat design-ul pentru site-ul (ar fi ipocrit pentru mine să acționez altfel, nu?).
Pe măsură ce priveam schița de design, am văzut cum să fac lucrul de proiectare în grilă 960. Mai jos este scheletul HTML al site-ului meu:
SiglăCerberus: forță pentru umanitate
NavigareConţinutBara lateralăBara lateralăBara lateralăSubsol
Dacă ați observat, am avut logo-ul acoperă doar 2 coloane, în timp ce sub antetul a preluat toate cele 12 spații. Din moment ce antetul div avea 12 coloane lungi, orice element secund poate avea o lungime de până la 12 coloane. Acest truc mi-a permis să fac header-ul, deoarece logo-ul a preluat 2 coloane și a lăsat restul gol (imaginea este de fapt imaginea de fundal pentru header-ul div). Din moment ce sub-antetul avea 12 coloane largi, a umplut întreaga lățime sub siglă (deoarece nu putea să se potrivească cu tot conținutul său în interiorul celor 10 spații rămase după logo).
Aceasta este de fapt o distincție importantă și este un alt instrument de proiectare pe care ar trebui să-l utilizați (și pentru a fi în siguranță, puteți folosi "prefixul" sau "sufixul" pentru a vă asigura că o anumită cantitate de spațiu este rezervată). Restul site-ului este destul de tăiat și uscat: 8 coloane pentru conținutul principal și 4 pentru bara laterală. Fiecare element al barei laterale este un element separat div; ele stivuie unul peste celălalt deoarece sunt constrânse la lățimea a 4 coloane.
Pentru a ilustra modul în care site-ul este configurat, am realizat o captură de ecran a site-ului și am marcat clar coloanele:
Acum, propriul meu exemplu ar putea să nu fie cel mai bun mod de a vă inspira într-adevăr să ieșiți și să creați niște designeri de web ucigași, deci aici sunt doar câteva exemple ale sistemului 960 în acțiune. Puteți găsi mai multe pe site-ul 960.gs.
Unul dintre aspectele cele mai atrăgătoare ale unui CSS-cadru este confortul pe care îl oferă designerilor. Cu toate acestea, ca orice alt instrument, trebuie să vă asigurați că o utilizați într-o manieră relevantă și utilă. Nu încercați să-l utilizați dacă nu se potrivește designului și nu lăsați-l să vă restricționeze creativitatea. Pentru majoritatea proiectelor (în special pentru ziare complexe sau layout-uri inspirate de blog), un cadru CSS poate fi un instrument de economisire a timpului, nu doar pentru a scuipa HTML / CSS rapid, ci pentru întregul proces de proiectare.
Doriți să citiți mai multe despre codificarea cu cadre CSS? Consultați biblioteca Nettuts de articole pe această temă (derulați până la partea de jos pentru tutoriale mai avansate).
Accentsconagua