Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.

1. Introducción a los
FRAMEWORKS CSS
Luis Miguel Martín
I Betabeers Badajoz
PCTEX - 20 Abril 2012

2. Introducción a los
FRAMEWORKS CSS
Luis Miguel Martín

3. ¿quién soy?

4. ¿Quién soy?
• Consultor, diseñador y
desarrollador front-end
especializado en crear sitios
web centrados en el usuario
• Más de 11 años experiencia
en diversos aspectos del
desarrollo web
• Fundamentalista de los
estándares web

5. INTRODUCCIÓN

6. Introducción
• Problemática del desarrollo con CSS
• ¿Qué es un Framework CSS?
• Ventajas e Inconvenientes
• Panorámica de Frameworks CSS
• Comparativa
• Entonces, ¿cuál elijo?

7. Problemática del desarrollo css

8. Problemática del desarrollo CSS
• Es lento:
– Diseño distinto en cada proyecto
– Preparación y optimización de gráficos
– Carácter artesano
• Reutilización de código anterior
• Se dedica mucho tiempo a tareas
infructuosas (depurar para IE,
extensiones propietarias,....)

9. Problemática del desarrollo CSS
• No existen normas a la hora de
programar en CSS (nomenclaturas,
identación,...)
• Dificultad con código de terceros
(incluso, dentro de un mismo equipo)
• El programador “puro” no sabe CSS:
– NO es un lenguaje de programación
• …

10. ¿qué es un framework css?

11. ¿Qué es un Framework CSS?
“Un conjunto de herramientas, librerías,
convenciones y buenas prácticas que
abstraen tareas repetitivas y
rutinarias en elementos genéricos
que pueden reutilizarse.”
JEFF CROFT
http://www.alistapart.com/articles/frameworksfordesigners/

12. ¿Y CUÁL ES SU OBJETIVO?
“Que el desarrollador o diseñador se
enfoque en las tareas que son
exclusivas de un determinado
proyecto, en lugar de reinventar la
rueda una y otra vez.”
JEFF CROFT
http://www.alistapart.com/articles/frameworksfordesigners/

13. Ventajas e inconvenientes

14. Ventajas
• Aumentan la productividad
• Código más consistente y estructurado
• Testeo y depuración minimizada
• Facilidad de mantenimiento
• Facilita el trabajo en equipo
• Agilizan la repetición de procesos
• Otras: preprocesado en servidor
(LESS/SASS), integración en CMS,...

15. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
• ¿Más lento que partir de cero?
• ¿Restricciones de diseño?

16. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”
• ¿Más lento que partir de cero?
• ¿Restricciones de diseño?

17. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”

18. CURVA DE APRENDIZAJE
• La mayoría de los frameworks tienen una
curva sencilla.
• Al aportar una base común documentada
facilita la incorporación de nuevos
miembros al equipo.
• Incluirlo en la metodología de trabajo
mejora el proceso de desarrollo y
disminuye el tiempo de aprendizaje.

19. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”

20. EXCESO DE CÓDIGO HTML Y CSS
• ¿Es crítico para tu proyecto?
• Emplea sólo lo que necesites
• Comprime. Minimiza. Une.
– Compresión HTTP
– Minimiza JS y CSS: Eliminar espacios en
blanco, saltos de carro, identaciones,…
– Combina archivos CSS y JS
– Otros: caché, CDN,…

21. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”

22. CÓDIGO NO SEMÁNTICO
• DIV y SPAN no tienen significado
semántico (son neutrales)
The global structure of an HTML document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

23. CÓDIGO NO SEMÁNTICO
DIV + ID/CLASS = valor semántico nulo Etiq. HTML5 = valor semántico alto
<div id="header"> <header>
... ...
</div> </header>
<div id="nav"> <nav>
... ...
</div> </nav>
<div class="article"> <article>
... ...
</div> </article>
<div id="footer"> <footer>
... ...
</div> </footer>

24. CÓDIGO NO SEMÁNTICO
LA SEMÁNTICA ESTÁ AQUÍ
<etiqueta class="tomate queso">Merendola</etiqueta>
No aquí
La semántica web no incluye CSS

25. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”

26. CÓDIGO “AJENO”
• Podemos vivir con ello ;-)
• Un framework es una herramienta. Hay
que estudiarla y comprenderla para
obtener resultados.

27. Inconvenientes
• Curva de aprendizaje
• Exceso de código HTML y CSS
• Código y clases no semánticas
• Código “ajeno”

28. Panorámica de frameworks css

29. Panorámica de frameworks css
• ¡¡Existe una enorme variedad!!
• Hablaremos de 1 Kb CSS Grid, 960.gs,
Blueprint, Foundation (Zurb) y
Bootstrap (Twitter)
• Algunos admiten plugins y extensiones
para hacerlos más versátiles (responsive
design, por ejemplo) o incorporar
funcionalidades

30. ¿qué nos permiten hacer?
• Resetear estilos para normalizar las
propiedades básicas de los elementos a
fin de eliminar diferencias de
visualización entre navegadores.
– reset.css
• Realizar una gestión global de las
tipografías que se usarán en la página.
– text.css

31. ¿qué nos permiten hacer?
• Maquetar un diseño de forma óptima
y compatible con todos los
navegadores.
– layout.css, grid.css,…
• Estilos específicos para impresión
– print.css
• Personalizaciones y código específco
– style.css, custom.css,…

32. 1Kb css grid
¡NO FUNCIONA!
http://1kbgrid.com/

33. 1Kb css grid
• Enfocado únicamente a disposición de
elementos en retícula.
• Retícula de 12 columnas, 60px ancho
con espaciado de 20px (personalizable)
• Ancho total: 960px

34. 1Kb css grid
<div class="row"> .grid_1 { width:60px; }
<div class="column grid_4"> </div> .grid_2 { width:140px; }
<div class="column grid_4"> </div> .grid_3 { width:220px; }
<div class="column grid_4"> </div> .grid_4 { width:300px; }
.grid_5 { width:380px; }
</div>
.grid_6 { width:460px; }
<div class="row“>
.grid_7 { width:540px; }
<div class="column grid_8"> </div>
.grid_8 { width:620px; }
<div class="column grid_4"> </div> .grid_9 { width:700px; }
</div> .grid_10 { width:780px; }
<div class="row"> .grid_11 { width:860px; }
<div class="column grid_2"> </div> .grid_12 { width:940px; }
<div class="column grid_4"> </div> .column {
<div class="column grid_3"> </div> margin: 0 10px;
<div class="column grid_3"> </div> overflow: hidden;
</div> float: left;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
html }
css completo

35. 960 grid system
http://960.gs/

36. 960 grid system
• Proporciona sistema de retículas mucho
más completo.
• Retículas base:
– 12 columnas (60px ancho/20px espaciado)
– 16 columnas (40px ancho/20px espaciado)
– 24 columnas (30px ancho/10px espaciado)
• Ancho fijo total: 960px (obviamente)

37. 960 grid system
<div class="grid_12">
<p>940</p>
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1“>
<p>60</p>
</div>
<!-- end .grid_1 -->
<div class="grid_11">
<p>860</p>
</div>
<!-- end .grid_11 -->
<div class="clear"></div>
<div class="grid_2">
<p>140</p>
</div>
<!-- end .grid_2 -->
<div class="grid_10">
<p>780</p>
</div>
<!-- end .grid_10 -->
html

38. 960 grid system
• Incorpora: reset CSS, estilos
tipográficos y soporte para idiomas RTL
• Incluye plantillas de diseño
• Extras:
– Personalizable: http://grids.heroku.com/
– Retícula fluida:
http://www.designinfluences.com/fluid960gs/
– Diseño adaptativa: http://adapt.960.gs/

39. 960 grid system
EJEMPLO
Diseño realizado sobre
una plantilla para
Fireworks de retícula de
960.gs (12 columnas)

40. 960 grid system
960 grider bookmark
http://peol.github.com/960gridder/

41. blueprint
http://blueprintcss.org/

42. blueprint
• Sistema de retícula completo y versátil.
• Retícula base de 24 columnas (30px
ancho/10px espaciado)
• Ancho fijo total: 950px
• Incorpora: reset CSS, estilos para
tipografías, formularios e impresión
• También, soporte para idiomas RTL

43. blueprint

44. blueprint
• Gran cantidad de plugins y extensiones
(botones, tabs, retícula fluida,…)
• Plantillas gráficas para diseñar sobre la
retícula
• Gemas para Rails
• Más información y recursos:
– https://github.com/joshuaclayton/blueprint-
css/wiki

45. foundation
http://foundation.zurb.com/

46. foundation
• Sistema de retícula completo,
adaptativo, móvil y muy flexible
• Retícula base de 12 columnas (fluidas,
fijas, combinables,…)
• Ancho máximo y mínimo configurable
• Nomenclatura muy sencilla y natural
• Incluye: formularios, botones, elementos
de interfaz, sliders, modales,…

47. foundation
Retícula adaptativa
Anchos de
1024px y 600px

48. foundation

49. foundation
Retícula adaptativa
Sólida retícula base,
adaptativa y móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails

50. foundation
Retícula adaptativa
Sólida retícula base,
adaptativa y móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails

51. foundation
Retícula adaptativa
Sólida retícula base,
adaptativay móvil
Elementos de interfaz
Botones, formularios, tabs,
sliders, tooltips, modales…
DOCUMENTACIÓN
Sencilla y completa
EXTRA
Gemas para
Conpass/SASS y Rails

52. bootstrap
http://twitter.github.com/bootstrap/

53. bootstrap
• Sistema de retícula completo,
adaptativo, móvil y muy flexible
• Retícula base de 12 columnas (60px
ancho/20px espaciado)
• Ancho fijo total: 940px
• Construido y personalizable con LESS
(variables, mixins, etc.)

54. bootstrap
• Incluye: tipografías, retículas adaptativas y
móviles, formularios, botones, elementos
de interfaz,… EL MÁS COMPLETO!
• Multitud de plugins jQuery: sliders,
modales, tooltips, tabs,…
• Extra:
– Skins para Bootstrap: http://bootswatch.com/
– Themes ($): http://wrapbootstrap.com/

55. bootstrap

56. bootstrap

57. bootstrap

58. bootstrap

59. bootstrap

60. bootstrap
BOOTStrap fireworks
http://www.extendingfireworks.com/?p=133
http://bootstrapfireworks.com/

61. comparativa

62. comparativa
PLANTILLAS Estilos Estilos
retícula TIPOGRAFIAs PLUGINS gemas
diseño FORMS IMPRESIÓN
BOOTSTRAP       
F0UNDATION      
BLUEPRINT       
960 GS     
1KB GRID 

63. Entonces, ¿cuál elijo?

64. Entonces, ¿cuál elijo?
• No hay frameworks mejores ni peores;
sino el que mejor se adapta a tu proyecto:
– ¿Qué tamaño va a tener el proyecto?
– ¿Necesitas integrarlo en Rails o SASS?
– ¿Quieres componentes ya listos para usar o
únicamente una retícula?
• Personalmente, eligiría 960.gs,
Foundation o Bootstrap (personalizado)

65. ¿preguntas?

66. Muchas gracias
Luis Miguel Martín
@lmmartin