960 Sistem Grid - este foarte simplu, web design

Când m-am întâlnit primul sistem Grid 960, am fost extrem de entuziasmat de cât de ușor poate fi folosit pentru a pune în aplicare aspectele complexe.

Cu toate acestea, deoarece la acel moment eram încă un nou venit în raport cu design web, atunci când am descărca un fișier, nu a fost atât de multe informații care repede totul mi se părea foarte complicat:

În prezența unui astfel de număr mare de coduri, este posibil de a crea pur și simplu un aspect?

Ne vom uita la Sistem Grid exact 960. dar după citirea acestui ghid, veți găsi că cele mai multe dintre celelalte sisteme de rețele sunt foarte asemănătoare, și va fi mai ușor să lucreze cu ei odată ce ați înțeles câteva principii de bază.

Design bazat pe grila

Înainte de a porni la specificul sistemului Grid 960. Să aruncăm o scurtă privire la proiectarea pe baza grilei în ansamblu. Această idee, desigur, nu a apărut odată cu apariția Internetului. De fapt, ea vine de la una dintre cele mai vechi și cele mai fundamentale principii de design: aliniere.

Creierele noastre sunt folosite pentru a simplifica lucrurile, astfel încât acestea sunt mai ușor de înțeles. De aceea, încercăm să aducem pentru lucrurile care par a fi haotic. Prin urmare, vom vedea imagini de oameni în cratere lunare.

Desigur, ordinea mai ușor induse, cu atât mai rapid creierul nostru poate identifica șablonul și pentru a muta pe. Grila este atât de organizat și a ordonat ca au nevoie de gândire suplimentare puțin sau deloc din partea noastră.

Luați în considerare două pagini de aspect, care sunt prezentate mai jos:

In timp ce ambele aceste imagini sunt doar o grămadă de dreptunghiuri, imaginea de sus pare fundamental mai bine decât este situat mai jos. Putem recunoaște instantaneu structura, ia-l si mergi mai departe.

Coborâți imaginea apare vizual dezordonat. Nu există nici un model, ordine sau scop clar - doar arata ca o colecție de forme aleatoare.

Când ne uităm la ceva, ochii noștri au tendința de a încerca frenetic fracțiuni de secundă pentru a găsi un model, care mărește timpul ne ia pentru a evalua imaginea de ansamblu.

Curios, lucrurile aleatoare poate fi încă frumoasă. elemente aleatorii pot uita cu siguranță frumos în natură, în artă, și chiar și în proiectarea, dar nu au nici un loc într-o organizare logică a informațiilor.

Faptul este că grila este una dintre cele mai simple și mai puternice moduri de a crea ordine pe pagină. Ele pot părea rece și greu, dar amintiți-vă că acestea sunt foarte eficiente și eficace, în plus ele pot fi flexibile, dacă vă este frică că imaginația ta get împotmolit în toate elementele necesare pentru organizație.

De ce sistemul de rețea?

960 Sistem Grid - precum și alte instrumente similare - oferă o modalitate rapidă și ușoară de a crea o rețea pe bază planuri folosind CSS. Acest lucru se face prin furnizarea de testat pentru compatibilitate cu browsere și dimensiuni optimizate de pre-coloană, în care vă puteți plasa conținut.

Până la CSS3, nu pentru ca a fost doar pentru a rupe pagina de web în coloane, fără a recurge la calcule matematice plictisitoare.

De exemplu, dacă aveți o lățime de 1000 de pixeli în container, și doriți să-l împartă în trei coloane, ar fi 333 și 1/3 pixel de pe coloana (nu un număr bun). În plus, coloanele trebuie să fie separate, sau conținutul lor vor fuziona - astfel încât trebuie să adăugați padding.

Dacă adăugăm la această adâncitură 10 pixeli pe fiecare parte a fiecărei coloane, trebuie să scădem 20 în continuare pixeli pe lățimea fiecărei coloane. Aceasta ne dă o coloană 3 de aproximativ 313 pixeli în lățime și adâncite 10 pixeli pe fiecare parte (chiar și în acest caz, se obține 999 pixeli, în loc de 1000).

Doriți să creați 4 coloane de mai jos? Apoi, va trebui să înceapă întregul proces, de la numărul de start scade 80 de pixeli care pleacă din lățimea totală de 1000 de pixeli, 920 pixeli și apoi împărțit la 4 pentru a obține o lățime de 230 de pixeli pe coloană.

În cele din urmă, dacă doriți să adăugați o bară laterală, care va avea o lățime de o treime din lățimea paginii, aveți nevoie pentru a crea o coloană de 750 de pixeli pentru conținut și un altul în 250 de pixeli pentru bara laterală, apoi scade 40 de pixeli umplutură pentru a obține lățimea de o coloană 730 pixeli și 230 pixeli - cu o altă lățime.

Deja confuz?

La fel ca mulți designeri web sunt de până la tine. Nu este cu siguranță de rachete știință, dar nu este ceea ce vrei să faci din nou și din nou, de fiecare dată când se angajează un nou proiect.

Soluția? Găsește pe altcineva care se va ocupa de aceste calcule nebun lățimea coloanelor, scorul lor în CSS-document și vă permit să-l descărcați gratuit. (Acel om sa dovedit a fi Nathan Smith. Creator 960 System Grid).

960 Sistem Grid

960 System Grid - un mod simplu de a crea configurații de site folosind grila, care are o lățime de 960 de pixeli:

Motivul pentru care 960 de pixeli este selectat ca lățimea de bază, care numărul 960 permite crearea unui număr mare de opțiuni de rupere jos coloane și padding, folosind doar numere întregi. Și aceste opțiuni se potrivesc perfect în cele mai multe ecrane extensii.

GS 960 este disponibil în două versiuni de bază: o grilă cu 12 coloane și o grilă cu 16 coloane (vă puteți conecta o versiune de 24 de biți, pentru cei care au nevoie de un control extrem de proiectare).

In versiunea celor 12 coloane, coloana are cea mai ingusta latimea de 60 de pixeli. Lățimea fiecărei coloana următoare este mărită cu 80 pixeli.

Astfel, lățimile coloanelor dimensiuni disponibile sunt: ​​60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 și 940 de pixeli:

În versiunea 16 biți a coloanei îngustă are o lățime de 40 de pixeli, iar fiecare coloană urmând devine mai lat cu 60 de pixeli.

Astfel, lățimile coloanelor dimensiuni disponibile sunt: ​​40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 și 940 de pixeli:

Sesiuni clase CSS

Cand te uiti la graficul de mai sus, fiecare dintre cele întunecate dungi orizontale albastre pot fi văzute în sistemul Grid 960. ca o clasă CSS.

Pentru a crea un obiect în structura paginii dvs., lățimea care corespunde cu lățimea uneia dintre aceste unități, trebuie doar să-l atribuie la clasa div corespunzătoare - asta e tot!

Clasele sunt nume orientative în funcție de dimensiunile lor sgrid_1 - cea mai ingusta clasă CSS, grid_12 - cel mai larg (în versiunea cu 16 coloane din cea mai largă clasă - grid_16).

Numele de sistem permite incredibil de ușor pentru câteva secunde pentru a forma aspecte complexe. Pentru a umple întreaga lățime a paginii folosit un truc viclean. Esența ei constă în faptul că suma numerelor de clasă selectate trebuie să fie egal cu 12 în versiunea de 12 biți și 16 în versiunea de 16 biți.

De exemplu, într-o versiune cu 12 coloane, dacă aveți 3 bloc de text pe care doriți să plasați unul lângă altul în 3 coloane, pur și simplu atribuie grid_4 clasă fiecare dintre ele, pentru un total de 12 (4 + 4 + 4 = 12):

In mod similar, prin atribuirea de clasă CSS grid_4 în varianta cu 16 coloane, se poate crea cu ușurință un aspect de 4 coloane (4 + 4 + 4 + 4 = 16):

Pentru a vă asigura că utilizați clasele corespunzătoare, nu uitați să plasați elemente ale versiunii de 12 biți într-un div cu container_12 de clasă, clase și versiunea pe 16 biți într-un div cu container_16 de clasă.

Dacă ați lucrat niciodată înainte cu 960 GS, sper că acum vei scăpa de exclamație în maniera „Aici este! „Ceea ce se va referi la cât de ușor este de a manipula aspectul folosind acest sistem.

Push Me, Pull Me

Grid System 960 permite elemente independente muta, trăgându-le de-a lungul o margine orizontală. Acest lucru se realizează prin împingere sau tragere clase CSS.

Luați în considerare cele două exemple prezentate mai jos. Primul exemplu este un aspect care constă din 4 coloane, folosind doar clasă grid_3.

În a doua variantă, am tras prima coloană și pune-l în locul acestuia din urmă, astfel încât coloanele au deplasat cu o poziție, cu privire la modul în care acestea sunt de obicei situate în structura:

Rețineți că aveți posibilitatea să glisați și să fixați blocuri de oriunde. Dacă aș fi vrut să trageți un element din cele două coloane, am realizat clasa push_2. și așa mai departe.

push / pull afectează profund structura paginii în documentul HTML.

De exemplu, imaginați-vă că, în exemplul de mai jos, introduceți numele site-ului în logo-ul si pune-l pe primul element pe pagină.

Logo-ul este unul dintre cele mai importante elemente ale site-ului, și v-ar dori să-l prezinte ca primul element HTML-marcare. În același timp, sa dedus că centrul vizual al paginii.

Pentru a localiza vizual un element de logo-ul între cele două coloane de text, ar trebui să utilizați următoarele HTML-cod:

Ca rezultat, aspect de ieșire va fi după cum urmează:

În ciuda faptului că logo-ul se află la începutul markup, vizual va fi amplasat în centrul paginii.

spații complet gol

Vei întâlni de multe ori o situație în care trebuie să creați în structura spațiului gol (spațiu negativ - acesta este un instrument excelent de management de proiectare).

Pentru a realiza acest lucru, se aplică pentru blocuri div prefix de clasă și sufix. Punerea lor în aplicare este foarte similar cu punerea în aplicare a claselor de tragere sau împingere.

De exemplu, pentru a lăsa un spațiu gol, care va fi egală cu lățimea unei coloane, folosiți clasa elementului prefix_1 frontal sau după elementele clasei suffix_1:

Dupa cum se poate vedea în exemplul de mai sus este utilizat pentru clasa suffix_3. pentru a crea un spațiu gol, după cele trei coloane mari.

Începutul și sfârșitul

Și, în concluzie, vreau să vă dau câteva informații despre clasele de alfa ( „primul“) și omega ( „ultima“), care urmează să fie aplicată tuturor elementelor rețelei, care sunt afiliate la alte grile.

Este evident faptul că clasa de alfa este aplicat pe primul element copil, și clasa de omega la acesta din urmă.

Ca atare, aceste clase determină limitele zonei în care puteți plasa modulele de rețea în cadrul altor module.

Rezumând

După primirea acestei noi cunoștințe, trebuie să simțiți acum 960 expert Sistem Grid.

Principiile de bază ale sistemului includ numai 5 concepte pe care trebuie să le rețineți:

• Utilizați clasa container_12 pentru versiunea de sistem cu 12 coloane și container_16 pentru versiunea cu 16 coloane;
• Utilizați clase grid_1. grid_2. grid_3 etc. pentru a seta lățimea coloanelor. Dacă doriți să umple lățimea orizontală a paginii, asigurați-vă că suma de numere de clasă este de 12 sau 16, respectiv (grid_4 + grid_2 + grid_6 = 12);
• Utilizați și trage împinge clase. pentru a plasa în mod independent, elementele de pe pagina, indiferent de poziția lor în documentul de marcare;
• Utilizați clase pentru prefix și sufix. pentru a crea spații goale în structura;
• Utilizați clase alfa și omega. pentru a stabili limite pentru elementele de rețea imbricate.

Sistemul Grid 960 este, de asemenea, utilizat resetare CSS. Acesta este un fișier opțional, care se bazează pe popular set de resetare CSS Erika Meyera. Dacă vă place, utilizați-l. Dacă nu, trimite-l la cosul tau!

Resurse 960 Sistem Grid

Acum, că ești un design expert de web, pe baza grilei și 960 Grid System. aici sunt unele instrumente și resurse pe care le puteți găsi în scopul de a înțelege în continuare subiectul.

Fluid Sistem Grid 960

Versiunea adaptivă remarcabila a 960 GS. Plutitoare machete web permit să se adapteze structura pentru a se potrivi pagina. Ei au folosit unele coduri foarte complexe, dar dacă utilizați acest sistem, va face toata munca grea pentru tine:

1 kb CSS Grid

Sistem de grilă extrem de simplu, elementar și ușor de înțeles. Ea are multe caracteristici pentru a configura, dar implicit la 960 pixeli în baza:

Sistem Grid Variabilă

grilă simplă și flexibilă de designer CSS bazat pe sistemul Grid 960:

-Grid Bazat Design Galerie foto

Dacă sunteți sceptici cu privire la sistemul de rețea 960 și pentru a se asigura că proiectul se bazează pe o grilă va poate oferi ca designer de web, a verifica afară această galerie de machete. După cum puteți vedea, cu puțină imaginație și ingeniozitate, aveți posibilități nelimitate:

Typogridphy

Citat de pe site-ul oficial: «Typogridphy - cadru CSS conceput pentru a oferi web designeri și dezvoltatori de interfață pentru a crea rapid grila atractiv plotare de calitate tipografic":

Grid Fluid Tiny

Acest designer de grile pentru versiunea sistemului de adaptare al sistemului Grid 1KB descris mai sus:

Dincolo de grila

Trebuie să recunoaștem, chiar și cu toate oportunitățile oferite de sistemele de rețea, cum ar fi 960 GS. există încă o serie de limitări. Nimeni nu spune că toate site-urile web ar trebui să fie stabilite pe baza grilei - aceasta va duce la stagnarea creativității și lipsa de dezvoltare a noilor aspecte de pagină.

Mai mult, experimentarea cu 960 GS. Vei vedea că există mai multe moduri de a merge dincolo de sistem care va face sa reconsidere proiectele.

960 Sistem Grid - și altele, cum ar fi sistemul de ea - oferă doar o bază solidă pentru multe cazuri la crearea unui site web, nu caută să vină cu un design revoluționar, ci pur și simplu doresc să transmită informații în mod clar și logic, într-un mod care este familiar mare numărul de utilizatori.

Gândurile tale de pe sistemele de rețea?

Traducerea articolului «960 Grid System Made Easy» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z