Credit image

Recibe las actualizaciones de Emezeta.com en tu correo:
¡O sígueme en Twitter!

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Alternativas a Bootstrap: Frameworks CSS (I)

¿Buscas alternativas a Bootstrap para el diseño de una web? En este primer artículo encontrarás varios frameworks CSS diferentes para utilizar en tu web.

Hoy en día, cuando llevamos a cabo desarrollos o diseños web, y nos estamos enfocando en el aspecto visual de una página, solemos decantarnos por la utilización de un framework CSS que nos quite trabajo de encima y nos permita ir mucho más rápido al lograr nuestros objetivos. Además de un conocimiento profundo de HTML5 y CSS3, y unas nociones (mínimas, aunque sea) de Javascript, sería ideal tener conocimiento del panorama general en cuánto a frameworks CSS existentes.

Un Framework CSS es un conjunto de conceptos, prácticas, consejos y/o herramientas, para realizar tareas muy comunes y habituales de diseño web, de la forma más rápida y cómoda posible. Quizás, el framework CSS más popular con diferencia es Bootstrap, de Twitter.

Este artículo será el primero de varias partes, donde hablaremos de Frameworks CSS: Alternativas a Bootstrap. En esta primera parte me he centrado en los frameworks más populares, que incorporan no sólo código CSS, sino además componentes que requieren Javascript para su funcionamiento.

En la segunda y tercera parte hablaremos de frameworks más ligeros y simples (ideales para diseños rápidos y minimalistas) muchos de ellos que ni siquiera necesitan Javascript. En la cuarta parte veremos algunos frameworks para creación de cuadrículas o «grids» (mientras crece y crece el soporte para nuestros queridos Grids CSS nativos) y en la última parte veremos frameworks relacionados con componentes web.

1. Bootstrap

Probablemente, el framework más popular de la lista es Bootstrap. Se trata de un framework desarrollado por la gente de Twitter. Actualmente es uno de los más utilizados y que más se utilizan en el mercado.

Recuerda que Bootstrap consta de una librería CSS, una librería Javascript opcional (para algunos componentes que la requieren) y se le puede añadir un tema para proporcionarle una interfaz más personalizada o llamativa. Algunos temas interesantes podrían ser Material Kit, BMD o MDB (Material Design para Bootstrap), M8tro o Metro (Interfaz Metro de Microsoft), o la popular colección de temas simples Bootswatch.

2. Foundation

Foundation es casi con toda seguridad, el segundo framework más utilizado. Está orientado a la estrategia Mobile First, donde primero diseñas la interfaz para dispositivos móviles de una web, y luego vas adaptando las versiones más grandes como tablets o escritorio.

3. Semantic UI

Como su propio nombre indica, Semantic UI hace un énfasis bastante grande en la semántica del código HTML. Uno de los grandes problemas de Bootstrap, es que muchas veces debes añadir clases y código adicional para realizar cosas que ya se pueden hacer con código HTML directamente, siendo menos coherente y empeorando la calidad del código. Este framework intenta evitar precisamente este punto, manteniendo un equilibrio entre calidad de código y apariencia visual.

4. Materialize CSS

Otro framework muy utilizado últimamente es Materialize CSS. Se trata de un framework muy similar a Bootstrap, que aplica los conceptos y bases del Material Design, las normas de diseño aplicadas en las últimas interfaces de usuario de Google. Materialize es uno de los frameworks de Material Design más sencillos de utilizar y es una muy buena alternativa a Bootstrap.

5. Metro UI

Si eres de los que prefiere las interfaces de usuario de Microsoft, probablemente te guste más Metro UI, un framework orientado a construir diseños similares a la interfaz Metro de Microsoft. Este es uno de los frameworks más conocidos con esta apariencia, pero si lo prefieres, también tienes a tu disposición WinStrap o Bootmetro.

6. MUI

MUI es un framework bastante ligero (apenas ocupa 50KB) que sigue las normas básicas del Material Design, intentando hacer la interfaz lo menos sobrecargada posible, sin dependencias, manteniendo una línea general minimalista y orientandose a la optimización de velocidad de carga.

7. Ink

Un framework quizás bastante desconocido es Ink. Su objetivo principal es acelerar la creación de interfaces de usuario lo más rápido posible de una forma bastante eficiente. Tiene una documentación bastante detallada y hace un especial énfasis en los componentes de interfaz de usuario y la referencia Javascript.

8. Material Design Lite

Si no quedaste contento con el framework Materialize CSS y MUI te pareció demasiado simple, siempre puedes optar por utilizar Material Design Lite (MDL). Se trata de un framework oficial de Google para crear interfaces basadas en Material Design. La curva de aprendizaje, probablemente, sea más compleja que la de los frameworks anteriormente mencionados, pero cabe resaltar que es el que utiliza Google en webs como por ejemplo Google Wallet o Google Developers.

9. UI Kit

El objetivo de UI Kit es tener una serie de componentes ampliamente utilizados (y documentados de una forma muy legible y clara) que se puedan crear de una forma muy sencilla y rápida. La interfaz es muy legible y clara, y es muy sencillo de aprender y utilizar.

10. Kube

Por último, Kube es un framework creado por el mismo autor del editor WYSIWYG Redactor, que es desde mi punto de vista, uno de editores visuales más cuidados en prácticamente todos los aspectos. Kube se orienta en la simplicidad y el aspecto visual claro, limpio y agradable, ya que con este framework es muy sencillo crear interfaces sencillos y limpios, muy fáciles de leer y navegar por ellos.

¡Y esto es todo por esta primera parte! En el segundo artículo veremos Frameworks CSS: Alternativas ligeras a Bootstrap.

Escrito por Manz, el , en desarrollo. Comentarios recibidos: 6.

6 comentarios de lectores
Josep
Josep
2

Los frameworks están muy bien para aprender y/o para empezar una web rápidamente. Yo empecé mi última web con Bootstrap 3 y aprendí mucho (hacía 3 años que no hacía webs y no me dedico a eso), sobre todo con el uso de los media queries. Durante el proyecto empecé a optimizar la web hasta que acabé el proyecto sin usarlo y conseguir renderizados 'above the fold' de poquísimos milisegundos. Así que yo animo a usar este tipo de frameworks, pero no en producción. Al menos no si no están optimizados (es absurdo obligar al visitante a tragar con centenares de líneas de código CSS/JS *sin* usar).

  • 1
Silbido
Silbido
3

Muy buena colección de artículos. Muchas gracias. Te paso una alternativa más: HTML KickStart (http://www.99lime.com/elements/)

Juan Manuel HC
Juan Manuel HC
4

Yo descubrí el de propeller, esta muy genial, es una mezcla de bootstrap con material design, ojala puedas darle un vistazo y le hagas un articulo, gracias.

Diseño páginas
Diseño páginas
5

Una lista con la que estoy impresionado, gracias pro compartirla y sigue así, saludos.

Mac Woman
Mac Woman
6

Muy buen artículo, me iniciare cuando me permita mi carrera jajaja, estoy en medicina, pero me quiero enfocar un poquitin en el desarrollo web. Saludos..

  • 1
Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.