View
10
Download
1
Category
Preview:
DESCRIPTION
960m grid para template
Citation preview
Grid 9 60 es un framework d e css qu e fa ci li ta l a maqu etación a u n están dar de 9 60 px . En este tuto ri alv amos a c re ar u n pá gina util iz and o este framewo rk .
P ara emp ez ar, ¿ Qué e s 96 0 Grid?
9 60 Grid es un framework d e CS S que n os faci li ta la v id a e n un mil por ci ento (si l o sa bemo s u til iza r).Es te g rid s e c reó p or la ne cesida d de ten er un “están dar” e n el a ncho de los siti os web . En nu estros
d ía s y 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 solución d e 80 0 x 60 0 pixe les ,mientras l a ma yo rí a ya u ti li za res olu cione s de 10 24 x 768 px o may ores . Es po r e so qu e un gru po d e
p erso nas d ecidió crea r este si stema de ma que ta do b asa do e n 96 0px d e an cho , co n con figu racione sd e 12 y 16 co lu mnas pa ra po der co mb in ar entre sí y a sí crea r nu estros l ayo ut de un a forma simp le y
ráp id a.
Co no cien do e l g rid
C omo l es menc io nab a, p od emos uti li zar 12 o 16 c olumnas p ara crear nu estros la yo uts, ca da u na de
las co lu mn as tien e un marge n iz quierdo y dere cho d e 10 px , pa ra c re ar 20 px de s epa ración en trec olumnas . Sab ie nd o esto, dec imos q ue si u tili zo 1 2 co lu mn as, c ad a c olumna se rá d e 60 px c ada u na y
sí util iz o 16 c olumnas , 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 ráno bse rvar una g ama d e c omb ina cio ne s p ara da rse una ide a de co mo tra ba ja es te frame wo rk.
V eremo s a hora c omo es q ue se di vide e l grid en un a con fig uración d e 12 c olumnas :
1 . 60 px2 . 14 0p x
3 . 22 0p x4 . 30 0p x
5 . 38 0p x6 . 46 0p x7 . 54 0p x
8 . 62 0p x9 . 70 0p x
10 . 78 0p x11 . 86 0p x
12 . 94 0p x
C omo v erán , cad a un a d e la s fi la s l le va u n número , qu e s erá el i de ntific ad or; es d eci r, el an cho de l a
c olumna 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 lal ista . Pero,¿Có mo 96 0 grid sab e sí uti li zo 1 2 o 16 columna s? S imple, ti ene u na cl ase .container_ yy,
d on de “yy” e s e l nu me ro de co lu mn as qu e vo y a util iz ar.
B asta de p al abre rí a, v amos a c re ar u na p ágina web c on uti li zan do e ste fra me wo rk y 12 c olumna s.
Ma qu eta nd o co n 9 60 Grid
Grid d e 12 columna s
La v erd ad es muy s enci ll o maq uetar así , y a l ob serva r l a imag en no s damo s una idea d e co mo hac erlo .
Pa ra lo s fi nes d e este tutori al, vamo s a c rear un la yo ut para un s itio fi ctic io l la ma do V os -V oz (no s e meo currí a otro no mb re).
Hay u no s p unto s impo rta ntes an te s:
IMPOR TA NT E, d ebe mo s sab er a l meno s lo b asi co en x html y cssIn cluir text, res et y 9 60 css’s en el h tml
Hay qu e co lo car un <d iv class= ”clea r”> </d iv > des pue s de ca da fil a, e sto se de be a q ue ca daco lu mn a está co n un flo at:l eft
Us aremos los id p ara d iferen cia r u n div de o tro
02-12-2010 960 Grid, un framework para CSS /// Je…
jepserbernardino.com/…/960-grid-un-fra… 1/1
Recommended