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

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

113 comentarios

1 2 3

Kundali Bhagya
102

Good work friend I read some articles that you posted in your blog. I just want to admire blog and your work. Thanks for posting such posts here.

Crocodil Caras
104

Quality articles is the secret to interest the users to pay a visit the site, that's what this site is providing. I'm really enjoying the design and layout of your website. It's a veryy easy on the eyes which makes it much more enjoyable https://uebqzqd0l1.ga/

ayrh
107

Agra Escorts Akola Escorts Aligarh Escorts Allahabad Escorts Amravati Escorts Amritsar Escorts Bareilly Escorts Belgaum Escorts Bhavnagar Escorts Bhilai Escorts Bhiwandi Escorts Bhopal Escorts Bhubaneswar Escorts Bikaner Escorts Bokaro Escorts Chandigarh Escorts Cuttack Escorts Daman Escorts Dehradun Escorts Durgapur Escorts Erode Escorts Faridabad Escorts Gangtok Escorts Gorakhpur Escorts Gulbarga Escorts Guntur Escorts Guwahati Escorts Gwalior Escorts Howrah Escorts Hubli Escorts Hyderabad Escorts Indore Escorts Itanagar Escorts Jabalpur Escorts Jaipur Escorts Jalandhar Escorts Jhansi Escorts Jodhpur Escorts Kakinada Escorts Kalyan-Dombivali Escorts Kochi Escorts Kolhapur Escorts Kozhikode Escorts Kurnool Escorts Loni Escorts Lucknow Escorts Ludhiana Escorts Madurai Escorts Maheshtala Escorts Malegaon Escorts Mangalore Escorts Meerut Escorts Mysore Escorts Nagpur Escorts Nanded Escorts Nashik Escorts Nellore Escorts Kolkata Escorts Panaji Escorts Patiala Escorts Pimpri-Chinchwad Escorts Port Blair Escorts Raipur Escorts Rajahmundry Escorts Rajkot Escorts Ranchi Escorts Rourkela Escorts Saharanpur Escorts Salem Escorts Sangli Escorts Shillong Escorts Shimla Escorts Siliguri Escorts Silvassa Escorts Solapur Escorts South Dumdum Escorts Sri Ganganagar Escorts Srinagar Escorts Surat Escorts Trivandrum Escorts Udaipur Escorts Ulhasnagar Escorts Vadodara Escorts Varanasi Escorts Vijayawada Escorts Visakhapatnam Escorts Warangal Escorts Vapi Escorts Ujjain Escorts Agartala Escorts Kanpur Escorts Mumbai Escorts Navi Mumbai Escorts Noida Escorts Pune Escorts Ramagundam Escorts Thane Escorts Vasai-Virar Escorts Ahmedabad Escorts Bangalore Escorts Bellary Escorts Chennai Escorts Coimbatore Escorts Delhi Escorts Dhanbad Escorts Dharwad Escorts Gaya Escorts Gurgaon Escorts Jammu Escorts Pathankot Escorts

mihaitzabosss
108

Hey there where ya goin’, not exactly knowin’, who says you have to call just one place home. He’s goin’ everywhere, B.J. McKay and his best friend Bear. He just keeps on movin’, ladies keep improvin’, every day is better than the last. New dreams and better scenes, and best of all I don’t pay property tax. Rollin’ down to Dallas, who’s providin’ my palace, off to New Orleans or who knows where. Places new and ladies, too, I’m B.J. McKay and this is my best friend Bear. https://johnsoncountychemdry.com/ link

Karim
109

Looking for a type of business where you can make big profits? Maybe you need a little extra flour to help pay the bills? No matter which path you want to take, you can take advantage of multi-tiered marketing to earn cash. Below, you will read useful tips and see strategies for success in MLM, so read on! Try to stand outside every day. Sometimes it is easy to sit back and give a day off, but to succeed in multi-level marketing, you should always think about moving the needle. Promote your business every day. It does not have to be a major company. Just a little social sharing will do. Do not try to drown people in your personal life with the MLM business you are working in. You can share with friends and family first. But, you should not be too blunt with them in trying to develop your customer list. By doing this you can look aggressive, which can harm your relationships. https://newtfcheck.blogspot.com/

Gary
110

newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection

Gary
111

newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection

Gary
112

newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtestoftf-healthbyredirection newtfcheck

1 2 3

Publica tu opinión