Upload
jose-leiva
View
108
Download
2
Embed Size (px)
DESCRIPTION
Drupaleada Enero 2012. Hablamos sobre nuevas herramientas que nos facilitan el desarrollo, HTML5, CSS3 y Responsive Web Design.
Citation preview
José Leiva - @leivajd
AÑO NUEVO, HERRAMIENTAS NUEVASDRUPALEADA ENERO 2012
2011, CSS3, HTML5, RWD,WebFonts, y más
CSS3 magic!1!
Flash killer!2!
http://code.google.com/p/html5shim/
Web fonts3!
http://www.webtypography.net/
Salvadoras!4!
RWD5!
1. Fluid Grid2. Media Queries3. Imágenes, videos, fonts, flexibles.
.col1 { width: 6.25%;} /*60 / 960*/
.col2 { width: 14.58333333333333%;} /*140 / 960*/
.col3 { width: 22.91666666666667%; } /*220 / 960*/
@media screen and (max-width: 600px) { .class { background: transparent; }}
*Aplica si es menor a 600px.
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
@media screen and (min-width: 600px) and (max-width: 900px) { .column { float: none; }}*Aplica si es entre 600px - 900px.
img,embed,object,video { max-width: 100%;}
h2 { margin-bottom: .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; }
Mobile First
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
Frameworks6!
Qué tal uno propio?