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 minimalistas a Bootstrap: Frameworks CSS (III)

¿Quieres una alternativa ligera y rápida a Bootstrap? En esta tercera entrega encontrarás varios frameworks CSS para crear diseños web minimalistas.

En otras entregas de esta serie de artículos, hemos hablado de frameworks CSS a diferentes niveles. En la primera parte, mencionamos alternativas a Bootstrap que siguen su mismo objetivo: ser una colección gigante de componentes y código prediseñado, listo para utilizar y realizar los mínimos cambios posibles.

En la segunda parte, alternativas ligeras a Bootstrap presentamos un conjunto algo más numeroso, de frameworks CSS alternativos, donde no hay presente tanta carga de Javascript y el tamaño del mismo suele ser notablemente menor.

En esta tercera parte, hablaremos de alternativas a Bootstrap minimalistas, la mayoría de ellos con un tamaño menor de 10KB, siendo ideales para pequeños proyectos donde se busca la simplicidad, se quiere un sitio ligero y rápido, o no se quiere arrastrar con componentes o código prediseñado que nunca se va a utilizar.

1. Milligram

Milligram es un estupendo framework CSS muy sencillo que apenas ocupa 9KB. Está especialmente diseñado para tener un buen rendimiento y acelerar lo máximo posible un desarrollo visual.

Se trata de un framework minimalista que viene ya con tamaños de tipografías utilizando unidades rem (relativas a la fuente inicial) utilizando la tipografía Roboto por defecto, tiene definidos estilos visuales para citas, botones, listas, campos de formularios, tablas y códigos (sin resaltado de sintaxis). Utiliza grids con un tamaño máximo de 112rem y usando Flexbox, que hace que el código sea más simple y cómodo.

Milligram también provee documentación con algunos trucos y técnicas a la hora de utilizarlo, como por ejemplo, utilizar la estrategia Mobile First (que minimiza el código CSS sin utilizar) o extender herencia.

2. Wing

Wing CSS es un framework minimalista muy similar a Milligram, que está orientado para diseños intuitivos, ligeros y bonitos. Es aún más ligero que el anterior, ocupando apenas 5KB. Aún así, incorpora multitud de facilidades: tamaños de encabezados, sistema de grid de 12 columnas (mínimo 960px), botones, campos de formulario, menús de navegación y algunos componentes como tarjetas (cards) o utilidades para centrar o justificar, así como ocultar secciones en tablets o dispositivos móviles.

3. Skeleton

Skeleton es ideal para comenzar pequeños proyectos en los que quieres partir de una base. Más que un framework CSS, se podría hablar de Skeleton como de un boilerplate+framework muy, muy simple. Skeleton nos ofrece no sólo un código HTML organizado y comentado para utilizar de base, sino también un código CSS organizado y comentado, con ciertas facilidades como un sistema grid de 12 columnas (con un máximo de 960px) responsive y listo para utilizar en diferentes dispositivos, utiliza la tipografía Raleway por defecto, tiene un interfaz de botones muy visual y legible, así como formularios, listas, tablas y otras utilidades.

Otro proyecto similar muy interesante es awsm.css (Awesome CSS). Se trata de una librería CSS para «embellecer» HTML semántico, sin necesidad de utilizar clases o atributos.

4. Cutestrap

Cutestrap se plantea como una alternativa a Bootstrap y Foundation, pero intentando mantener la simplicidad siempre en mente. Formularios, tipografías (usando rems), sistema de grids y columnas así como utilidades para justificación o cambio de tamaño de textos. El código fuente está disponible en Sass y se utiliza la metodología BEM.

5. Primitive

Al igual que Skeleton, Primitive engloba una plantilla inicial con la que podemos empezar a trabajar en nuestro pequeño proyecto. Primitive incorpora una plantilla HTML5 donde nos recomienda empezar estableciendo el idioma por defecto, definir el ancho del viewport y opcionalmente otros detalles. La plantilla incorpora jQuery para manipular el DOM y utiliza el último modo de renderizado de IE.

Una vez dominado este punto, podemos comenzar a utilizar el framework CSS. Incluye múltiples elementos como contenedores con tamaño (útiles para el responsive), sistema de grid personalizado y flexible, tipografías, botones, formularios, tablas, etc... Como todos estos frameworks minimalistas, incluye algunas utilidades de ayuda para centrar elementos o textos o hacer responsive las imágenes. Primitive está disponible en formato CSS y en formato Sass, por si se quieren modificar las variables internas. Como curiosidad, su página oficial tiene un modo de visualización de «los 80's».

6. BassCSS

BassCSS se define como una herramienta de CSS a bajo nivel para desarrolladores web. Entre las diferentes características que busca este framework, se destacan las siguientes: código humano (entendible y sin inflar), sin efectos secundarios (evitar problemas comunes de especificidad), reutilizable (muy escalable), ideal para diseño y responsive por defecto.

BassCSS se basa en el diseño atómico de CSS: Encabezados y tipografías (con posibilidad de aumentar tamaño visual pero correctamente de forma semántica), listas, tablas y formularios, multitudes de utilidades para crear diseños y colocar elementos en un layout, sistema potente de grids, utilidades flexbox e incluso la posibilidad de utilizar addons para extender su funcionalidad.

Otro framework interesante para utilizar como punto de partida podría ser BareKit, con apenas unos 11KB de tamaño.

7. Papier

Papier es un framework CSS ultraminimalista que pretende adoptar la idea de diseño del Material Design de Google, con un tamaño máximo de 11KB. Se trata de un framework para crear diseños responsive, minimalistas y cuidando especialmente la semántica del HTML, con los elementos habituales: botones, cards, paginación, sistema de grids por columnas, tablas, formularios y pestañas, entre otros detalles.

Remarcar también un framework minimalista muy similar, llamado Furtive.

8. Bijou

Si lo que estás buscando es un framework excesivamente simple, dudo que encuentre uno más pequeño que Bijou. Con tan solo 2KB, es uno de los frameworks más pequeños, que permite crear más elementos en tu diseño: Sistema de grids (12 columnas), encabezados y tipografías, tablas legibles, botones y bloques de alertas.

También puede ser interesante para el aprendizaje, puesto que no hay excesivos componentes y se centra en un código limpio y claro, bastante consiso. Otros frameworks parecidos que pueden interesarte son ?css y minCSS, muy ligeros y simples, aunque no tanto como Bijou.

9. Siimple

Como su propio nombre indica, Siimple intenta centrarse en la creación de diseños simples y claros, teniendo en mente la tendencia de diseño Flat design (Diseños lisos).

En su página de documentación, podemos observar que se centran en una metodología muy parecida a BEM (siimple-elemento--atributo), permitiendo la creación de código muy legible. Incorpora los clásicos elementos como botones, campos de formulario, encabezados y tipografías, sistema grid de 12 columnas, etc.

Además, también incorpora un módulo de colores de forma adicional, llamado siimple-colors, con el que puedes cambiar rapidamente el esquema de colores de la interfaz de usuario.

10. Chocolate

Chocolate CSS es un framework ultra minimalista que está tanto disponible para diseños oscuros como para diseños claros. Llama la atención lo vistosos que son sus elementos, a pesar del minimalismo.

Chocolate CSS se basa en un sistema grid de los más habituales (12 columnas) incluyendo componentes como botones (con diferentes tamaños y estilos alternativos), estilos y efectos prediseñados para imágenes, tablas, listas e iconos. Todos ellos preparados para cambiar en cualquier momento de un diseño claro a un diseño oscuro, o viceversa.

Otros frameworks ultraminimalistas que te podrían interesar serían Lotus.css o MisType, este último orientado a un diseño ultraminimalista sin estilo visual, ideal para añadirle finalmente una capa extra de diseño gráfico.

Y con esto terminamos el bloque de frameworks CSS generalistas. ¿Conoces algún framework que no haya sido citado en estos tres artículos (1, 2, 3)? En el próximo artículo de esta serie hablaremos de frameworks CSS específicos para Grid.

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

7 comentarios de lectores
Angel
Angel
1

Te falta w3.css de https://www.w3schools.com/ No creer que puede ser interesante?

Manz
Manz
2

@Angel: Yo no recomendaría w3.css, creo que difiere bastante de lo que llamaría un buen framework (calidad de código, diseño de clases, obsoleto en cuanto a tecnología CSS, etc...).

  • -1
kevin vasquez
kevin vasquez
3

Flexbox amigos, creo que bueno al menos si quieres un codigo limpio y echo por ti... flexbox es lo mejor... Utilizaba bootstrap pero desde que descrubri las maravillas que se pueden hacer con flexbox... todo cambio y ahora es mas sencillo!!! Saludos

  • 1
Manz
Manz
4

Coincido con Kevin en cuanto a la creación de layouts. Personalmente, prefiero utilizar dos novedosos sistemas de CSS llamados Flexbox y Grid CSS, aunque también considero que están orientados para diferentes perfiles de desarrollador. Tienes más información sobre Flexbox y Grid CSS en el siguiente artículo: Flexbox: https://lenguajecss.com/p/css/propiedades/flexbox Grid CSS: https://lenguajecss.com/p/css/propiedades/grid-css

Hiber
Hiber
5

Gracias por sus articulos Manz. Una pregunta, usted cual utiliza de todas las recopilaciones que ha hecho, hasta ahora?

Manz
Manz
6

@Hiber: En la mayoría de los casos, suelo decantarme por usar soluciones personalizadas o crear mi propio código CSS, en lugar de utilizar un framework CSS. Esto es bueno en diseños a medida, aunque puede aumentar considerablemente el tiempo de desarrollo. Es precisamente por esta última característica, por lo que se usan framework, para intentar acelerar el tiempo de desarrollo y obtener resultados rápidamente. Por citar algunos de los más interesantes de esta lista (desde mi subjetivo punto de vista), mis preferidos son Milligram y Skeleton.

diseño madrid
diseño madrid
7

Normalmente no uso este tipo de aplicaciones, pero alguna de estas me ha llamado la atención y la probaré, gracias por el post, recomendaré la página.

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