Comparativa de frameworks CSS

¿Qué se entiende por un framework CSS? ¿Cuál debemos utilizar según sus limitaciones o posibilidades? Ventajas e inconvenientes de los principales frameworks css comparados. Comparamos: 960, Blueprint, Bootstrap, Foundation y UiKit.

¿Qué es un framework CSS?

En mi opinión un framework no es solamente una herramienta sino una forma de organizar los archivos y de trabajar para cumplir unas buenas prácticas y ser más eficiente.

Less y Sass, por ejemplo, son herramientas fantásticas (y que uso en cuanto tengo oportunidad), pero no entrarían en este análisis. Entiendo que generan CSS y son más bien un preprocesador o un lenguaje que un framework. Vendrían a ser lo que Coffeescript a Javascript.

Frameworks CSS

(sin ningún orden de importancia en particular)

1. 960

Página 960

Este framework se basa en un contenido con un ancho de 960 píxeles. Se puede escoger entre layouts de 12 o de 16 columnas.

  • Layout de 12 columnas: Columnas de 60 px
  • Layouts de 16 columnas: Columnas de 40 px

960 se vende como un framework para prototipado rápido pero promete también adaptarse a un desarrollo más personalizado.

En este sentido tiene lo que parece una gran idea:

Al descargar el código vemos que incluye plantillas para Adobe Fireworks and Photoshop, OmniGraffle y Visio. Aquí podemos ver un ejemplo de qué aspecto tienen estas plantillas: Ejemplo plantilla 960

Peso:

La librería sugiere incluir los siguientes archivos:

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
  • reset.css 2 KB
  • text.css 1 KB
  • 960.css 10 KB

En total 2+1+10 = unos 13 KB

Existen variantes del archivo 960.css según el layout:

  • 96012col.css
  • 96016col.css
  • 96024col.css

Pero todas tienen pesos similares o menores.

Conclusiones

  • Integración con flujos de trabajo a través de plantillas para diseñar en Adobe Fireworks and Photoshop, OmniGraffle y Visio
  • Poco peso (unos 13 KB)

2. Blueprint

Página Blueprint

Blueprint promete agilizar el desarrollo y recortar tiempos con un sistema de retículas fácil de utilizar, un uso de la tipografía y una hoja de estilos para impresión.

Integración:

En este caso la libería incluye también una plantilla para photoshop con el siguiente aspecto: Plantilla Blueprint

Utilidades:

La librería incluye utilidades de línea de comando en ruby para ejecutar con rake. Incluye comandos para comprimir (lib/compress.rb) los CSS que generamos y validar el código fuente de la librería lib/validate.rb(`). El compresor resulta muy útil, ya que tenemos el script allí mismo sin utilizar otras herramientas. El validador puede no ser tan útil aunque podría serlo si queremos modificar el código fuente de ésta.

Peso:

La librería nos insta a incluir los siguientes archivos:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
  • screen.css 12 KB
  • print.css 1 KB
  • ie.css 2 KB

En total, incluso con el css de Internet Explorer 12 +1 + 2 = unos 15 KB. Sigue siendo un peso muy razonable y ligero.

Conclusiones

  • Librería con poco peso
  • Incluye algún script de línea de comandos útil si sabemos utilizarlo y tenemos Ruby instalado

  • Tiene alguna plantilla pero solamente un archivo .psd.

3. Bootstrap

Página Bootstrap

El framework desarrollado por Twitter es uno de los más establecidos.

Tiene multitud de componentes.

Peso:

Los archivos mínimos que debemos incluir son:

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
    ...
    ...[más cosas]
    ...
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  • bootstrap.min.css 103 KB
  • jquery.js 94 KB
  • bootstrap.min.js 28 KB

En total vemos que tiene un peso nada despreciable. Contando que ya utilizáramos jquery la broma nos saldría por 103 + 28 = 131 KB!

Si bien es cierto que podemos utilizar estrategias para mitigar esto:

1. Usar una CDN:

Podemos cargar bootstrap de una web externa. Al utilizarlo varias webs nos podemos ahorrar descargar la librería en algunos casos (el usuario ya la tendrá en caché) Bootstrap CDN es la Content Delviery Network más utilizada.

2. Descargar solamente los componentes que utilizemos.

Podemos decargar una versión personalizada de Bootstrap aquí Página Foundation

Si sólo saleccionamos los componentes que utilizemos el peso puede bajar drásticamente.

Iconos:

Twitter Bootstrap utiliza iconos de Glyphicons y lo hace de forma muy sencilla.

Simplemente poniendo una clase con el nombre glyphicon-nombre se mostrará el icono correspondiente.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Conclusiones

  • Librería muy usada y con una empresa importante detrás.
  • Multitud de componentes. Es muy sencilo utilizar sus iconos.

  • Tiene un gran tamaño, aunque existen etrategias para mitigar este inconveniente.

4. Foundation

Página Foundation

Con un nombre que coincide con el de clases principales de Objective C esta librería se anuncia como la más completa y avanzada.

Peso:

El ejemplo que proporciona Foundation incluye los siguientes archivos:

```
...[más cosas]...
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
...[más cosas]...
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
```
  • foundation.min.css 108 KB
  • modernizr.js 9 KB
  • jquery.js 262 KB
  • foundation.min.js 76 KB

Si no tenemos en cuenta modernizr.js (que podríamos utilizar de todos modos y tampoco es muy pesada) ni la versión de jquery.js (parece que no está comprimida porque ocupa muchísimo) vemos que tiene cierto peso. Mucho, vamos.

108 KB + 76 KB = 184 KB!

Al igual que en el caso de Bootstrap esta libería tiene muchos componentes y permite descargar una versión customizada para aliviar un poco el peso. Personalización Foundation

Utilidades:

Foundation se pued integar con multitud de herramientas y procesos como Sass Si estamos acostumbrados a utilizar Nodejs, Ruby y comandos de línea de comandos (valga la redundancia) podemos utiliza esto para acelerar el desarrollo y disminuir la posiblidad de errores.

Conclusiones

  • Librería sólida y con muchos componentes
  • Se integra bien en el uso de línea de comandos

  • Tiene un gran peso, aunque se puede aliviar descargando versiones personalizadas.

5. UIkit

Página UIkit

UIkit se anuncia como una librearía ligera y lo parece. El ejemplos mínimo que aparece en la web es:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

La verdad es que sería difícil que el ejemplo fuera más simple.

Peso:

Encontramos los siguientes archivos:

  • uikit.min.css 66 KB
  • jquery.js 86 KB
  • uikit.min.js 31 KB

Dejando de lado jquery.js, igual que en el resto de frameworks analizados, tenmos un peso medio: 66 + 31 = 97 KB. No es un peso excesivo pero tampoco es tremendamente ligero.

Utilidades:

Este framewrok utiliza less. Esto permite customizar ciertas variables de una forma más ágil que editando el css directamente.

Hay que reconocer que la mayoría permiten usar less o sass (al fin y al cabo generan css), pero algunos se integran mejor con el flujo de estos y ´ste lo tiene muy en cuenta en la documentación.

Conclusiones:

  • Librería simple
  • Se integra bien con less

  • Tiene un peso medio.

Conclusiones finales

En conjunto, vemos que el tema de responsive design y de maquetacón css ha ido ganando peso y complejidad con el tiempo.

Con estos frameworks css podemos tratar esta complejidad y ser más productivos pero no son la panacea universal. En mi opinión son una buena herramienta pero hay que conocerlos en detalle.

Un saludo y espero que sea útil esta comparativa :)


comments powered by Disqus