02-12-2010

960 Grid, un framework para CSS /// Je

G rid 9 60 es un framework d e css qu e fa ci li ta l a maqu etaci n a u n estn dar de 9 60 px . En este tuto rial
v amos a c re aru n p gi na util iz and o este framewo rk .
P ara emp ez ar, Qu e s 96 0 Gri d?
9 60 G rid es un framework d e CS S que n os faci li ta la v id ae n un mil por ci ento ( si l o sa bemo su til iza r).
Es te g rid s ec re p or la ne cesi da d de ten er un estn dar e n el a ncho de l os sit i os web . En nu estros
d a sy a es s lo u n peq ue o po rcen ta je d e usu ario s que u ti li za n re sol uci n d e 80 0 x 60 0 pi xe les ,
mi entras l a ma yo ra ya u ti li za res olu ci one s de 10 24 x 768 px o may ores . Es po re so qu e un gru po d e
p erso nas d eci di crea reste si stema de ma que ta do b asa do e n 96 0px d e an cho , co n con fi gu raci one s
d e 12 y 16 co lu mnas pa ra po der co mb in ar entre s y a s crea rnu estros l ayo ut de un a forma simp le y
rp id a.
C o no ci en do e l g rid
C omo l es menc io nab a, p od emos uti li zar 12 o 16 c ol umnas p ara crear nu estros la yo uts, ca da u na de
l as co lu mn as tien e un marge n iz qui erdo y dere cho d e 10 px , pa ra c re ar 20 px de s epa raci n en tre
c ol umnas . Sab ie nd o esto, dec imos q ue si u tili zo 1 2 co lu mn as, c ad ac ol umna se r d e 60 px c ada u na y
s util iz o 16 c ol umnas , el an cho de ca da un a ser de 4 0p x. P orqu e no v isi tan la p g ina d emo. Pod rn
o bse rvar una g ama d ec omb ina cio ne sp ara da rse una i de a de co mo tra ba ja es te frame wo rk.
V eremo sa hora c omo es q ue se di vi de e l gri d en un a con fig uraci n d e 12 c ol umnas :
1 . 60 px
2 . 14 0p x
3 . 22 0p x
4 . 30 0p x
5 . 38 0p x
6 . 46 0p x
7 . 54 0p x
8 . 62 0p x
9 . 70 0p x
10 . 78 0p x
11 . 86 0p x
12 . 94 0p x
C omo v ern , cad a un ad e la s fi la sl le va u n nmero , qu es er el i de ntif ic ad or; es d eci r, el an cho de l a
c ol umna co rre spo nd e al n mero de a l a pa r. Y se forma as : g rid_x x d ond e xx es el n umero d e la
l ista . Pero, C mo 96 0 gri d sab e s uti li zo 1 2 o 16 col umna s?S impl e, ti ene u na cl ase . contai ner_ yy,
d on de yy e se l nu me ro de co lu mn as qu e vo y a util iz ar.
B asta de p al abre ra, v amos a c re aru na p gi na web c on uti li zan do e ste fra me wo rk y 12 c ol umna s.
Ma qu eta nd o co n 9 60 G rid

G rid d e 12 col umna s

La v erd ad es muy s enci l o maq uetar as , y a l ob serva rl a imag en no s damo s una i dea d e co mo hac erlo .
Pa ra lo sfi nes d e este tutori al, vamo sa c rear un la yo ut para un s it io fi ctic io l la ma do V os -V oz ( no s eme
o curr a otro no mb re) .
H ay u no sp unto s impo rta ntes an te s:
IMPOR TA NT E, d ebe mo s sab era l meno s lo b asi co en x html y css
In cl uir text, res et y 9 60 css s en el h tml
H ay qu e co lo car un <d iv cl ass= clea r> </d iv > des pue s de ca da fil a, e sto se de be a q ue ca da
co lu mn a est co n un flo at:l eft
Us aremos l os id p ara d if eren cia ru n div de o tro

jepserbernardino.com//960-grid-un-fra

1/1