Presentación sobre patrones de diseño CSS para simplificar, crear y mostrar. Aplicando esto a drupal.

1. Patrones de diseño
en CSS
por Iván Mejía
Monday, April 22, 13

2. 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

3. pero...
Monday, April 22, 13

4. los patrones también
sirven para crear y
presentar
Monday, April 22, 13

5. Pero vamos al inicio
Monday, April 22, 13

6. ¿De dónde venimos?
Monday, April 22, 13

7. ¿Cómo diseñamos
páginas web?
Monday, April 22, 13

8. ¿Composiciones finales
o fragmentos?
Monday, April 22, 13

9. Monday, April 22, 13

10. Monday, April 22, 13

11. Monday, April 22, 13

12. Monday, April 22, 13

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

14. Proceso de diseño
Skecth > STYLE TILES > Mockups
Monday, April 22, 13

15. Monday, April 22, 13

16. Monday, April 22, 13

17. Monday, April 22, 13

18. Patrones de css
(un poco de código)
Monday, April 22, 13

19. 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

20. 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

21. ¿Cómo se aplica esto a drupal?
Monday, April 22, 13

22. Modulo style guide
http://drupal.org/project/styleguide
Monday, April 22, 13

23. Ejemplos
Monday, April 22, 13

24. Trabajando con
Las H
Monday, April 22, 13

25. Table
Monday, April 22, 13

26. ¿Que otro?
Monday, April 22, 13

27. Para finalizar
Monday, April 22, 13

28. Usa patrones para
2-Ahorrar tiempo
3-Diseñar mejor
1-Simplificar
Monday, April 22, 13

29. Proposal: A Style Guide for
Seven
http://groups.drupal.org/node/283223
¡Extra!
Monday, April 22, 13

30. correo: koffer@gmail.com
twitter: @Koffer
Sitio: drupalmexico.com
medioyforma.info
Monday, April 22, 13