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

desarrollo
108

Escrito por

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.

Alternativas al framework CSS Twitter Bootstrap

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

Framework CSS: Twitter 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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

Framework CSS: 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.

RELACIONADOS Alternativas ligeras a Bootstrap: Frameworks CSS (II) RELACIONADOS Alternativas minimalistas a Bootstrap: Frameworks CSS (III) RELACIONADOS Curiosidades y teorías de Undertale que quizás desconocías
x Alternativas ligeras a Bootstrap: Frameworks CSS (II)
Manz

108 comentarios

1 2 3

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

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

  • -1
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
Kasauti Zindagi Ki
14

Hi, constantly i used to check weblog posts here in the early hours in the morning, because i like to find out more and more.

  • -2
RC Rock Crawler
16

Hi, constantly I used to check weblog posts here in the early hours in the morning because I like to find out more and more. Thanks for your great post. For more info about RC Rock Crawler do check our page.

  • 1
Kasauti Zindagi Ki
17

Thank you for posting such a great article! I found your website perfect for my needs. It contains wonderful and helpful posts. Keep up the good work!. Thank you for this wonderful Article!Kasauti Zindagi Ki

gunawan dewa saputra
23

La publicidad en línea o comúnmente llamada marketing digital es un pilar de contenido gratuito en Internet que ha revolucionado el marketing empresarial en los últimos años al crear una miríada de nuevas oportunidades para que los anunciantes lleguen a clientes potenciales. Con el objetivo principal de dirigirse directamente a clientes potenciales personalmente. https://www.unair.ac.id/site/article/read/2551/unair-activist-create-splitter-digital-marketing-software-based-on-artificial-intelligence.html

Priya
25

Your comment is very good, you are a good man, I liked your idea. Whatever you write, you write amazing, you entertain us like this.I liked your article very much, you are an inspiration for me, I want to thank you from the heart

mihaitzaboss
35

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus non enim praesent elementum facilisis leo vel fringilla. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Ornare arcu odio ut sem. Orci nulla pellentesque dignissim enim sit amet. Pharetra massa massa ultricies mi quis hendrerit. Nibh sed pulvinar proin gravida hendrerit. Egestas purus viverra accumsan in. Justo nec ultrices dui sapien. Congue nisi vitae suscipit tellus mauris. Ultrices eros in cursus turpis massa tincidunt. https://eLearningClasses.com https://eLearningClasses.com

basededatos
37

https://www.basededatosempresas.net Pones información realmente muy útil. Gracias por publicar un artículo tan bueno los invito a pasar por mi web sobre base de datos de empresas para descargar link

mihaityzabooss
44

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis nunc sed. Volutpat ac tincidunt vitae semper quis. Arcu dictum varius duis at consectetur lorem donec massa. Orci a scelerisque purus semper eget duis. https://mapsandseo.com/ https://mapsandseo.com

mihaitzabosss
45

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus id interdum velit laoreet id donec ultrices. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Lobortis mattis aliquam faucibus purus in massa tempor nec. A diam sollicitudin tempor id eu nisl nunc mi. https://mapsandseo.com/ https://mapsandseo.com

mihaitzaboss
49

Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He’s got style, a groovy style, and a car that just won’t stop. When the going gets tough, he’s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he’s fan-riffic!https://cyphertop.com/ https://cyphertop.com/

mihaitzabosss
50

Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah… wishing for The Cities of Gold. Ah-ah-ah-ah-ah… some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah… some day we will find The Cities of Gold. https://www.kensingtonmorocco.com/ https://www.kensingtonmorocco.com/

  • -1

1 2 3

Publica tu opinión