Embed Size (px)
DESCRIPTION
Presentación sobre patrones de diseño CSS para simplificar, crear y mostrar. Aplicando esto a drupal.
Citation preview
Patrones de diseño en CSS
por Iván Mejía
Monday, April 22, 13
La razón de los patrones de diseño es minimizar el impacto de las tareas repetidas en el desarrollo de un diseño de página.
http://onwebdev.blogspot.com/2011/01/css-design-patterns.html
Monday, April 22, 13
pero...
Monday, April 22, 13
los patrones también sirven para crear y
presentar
Monday, April 22, 13
Pero vamos al inicio
Monday, April 22, 13
¿De dónde venimos?
Monday, April 22, 13
¿Cómo diseñamos páginas web?
Monday, April 22, 13
¿Composiciones finaleso fragmentos?
Monday, April 22, 13
Monday, April 22, 13
Monday, April 22, 13
Monday, April 22, 13
Monday, April 22, 13
STYLE TILES http://styletil.es
En su forma más simple, un Style tile es un grupo de elementos comunes como los colores, la tipografía, texturas, patrones y características de diseño. Es parecido a el material de un diseñador de interiores.
Monday, April 22, 13
Proceso de diseño Skecth > STYLE TILES > Mockups
Monday, April 22, 13
Monday, April 22, 13
Monday, April 22, 13
Monday, April 22, 13
Patrones de css(un poco de código)
Monday, April 22, 13
The Reset Pattern
html, body, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%;}
The Font Size Pattern
body {font-size: 62.5%} /* 1em = 10px */
Monday, April 22, 13
a:link, a:visited { color: #0062A0; text-decoration: underline;}
a:hover { color: #202124; text-decoration: none;}
a:active { color: #202124; text-decoration: none; color: #000;}
Monday, April 22, 13
¿Cómo se aplica esto a drupal?
Monday, April 22, 13
Modulo style guidehttp://drupal.org/project/styleguide
Monday, April 22, 13
Ejemplos
Monday, April 22, 13
Trabajando conLas H
Monday, April 22, 13
Table
Monday, April 22, 13
¿Que otro?
Monday, April 22, 13
Para finalizar
Monday, April 22, 13
Usa patrones para
2-Ahorrar tiempo
3-Diseñar mejor
1-Simplificar
Monday, April 22, 13
Proposal: A Style Guide for Seven
http://groups.drupal.org/node/283223
¡Extra!
Monday, April 22, 13
