Los 10 kits de interfaz de usuario web front-end de código abierto más populares

Puede ahorrar mucho tiempo de desarrollo trabajando con kits de interfaz de usuario frontend. El más popular es Bootstrap, aunque demasiados sitios homogéneos dependen de ese marco.

Para darle algo de variedad, he seleccionado mi selección de los mejores marcos de interfaz de usuario de código abierto más nuevos que existen.

Todos estos tienen sus propios estilos únicos y diferentes niveles de soporte para componentes dinámicos. Pero si empareja estos marcos con algunos complementos de JavaScript, puede construir casi cualquier cosa.

También te puede interesar: 20 marcos CSS adaptables y ligeros para un inicio rápido.

1. UIKit

marco del kit ui

El marco UIKit es liviano, fácil de personalizar y fácil de agregar. Sigue una estructura modular donde creará elementos de página con clases reutilizables.

Es perfecto para estructurar una nueva página sin tener que codificar su propia cuadrícula o rodar sus propias pilas de fuentes. Este marco incluso viene con un conjunto de iconos único que puede agregar a su página utilizando una fuente web.

Con UIKit puede ejecutar Sass o Less junto con cualquier administrador de paquetes (generalmente npm).

Además, con una enorme lista de componentes, puede incorporar cualquier cosa, desde campos de carga hasta migas de pan y mucho más.

2. Fundación

fundación zurb

La biblioteca de la Fundación Zurb está a la altura de TwitterBootstrap. Pero parece que Foundation recibe menos atención debido a su interfaz menos estilizada.

Con Foundation, tiene acceso a elementos de interfaz personalizados, componentes y una cuadrícula predeterminada. Todo lo que necesita para construir un frontend increíble se puede encontrar en la biblioteca de Foundation.

Eche un vistazo a su página de presentación si desea obtener más información. Cuenta con un montón de sitios enormes que ejecutan Foundation con cuadrículas personalizadas, funciones receptivas, básicamente, todo lo que necesita en un nuevo proyecto web.

3. miligramo

miligramo css

Para un enfoque minimalista del desarrollo frontend, consulte Milligram. Esta biblioteca CSS de código abierto es súper pequeña y viene con un montón de características de interfaz realmente simples.

Funciona a través de Bower, Yarn y npm, por lo que puede encajar en cualquier flujo de trabajo de administración de paquetes.

El único problema es que Milligram requiere la biblioteca Normalizar, por lo que debe agregarla a su página. Pero si tiene una herramienta de minimización de CSS, puede combinar fácilmente las dos bibliotecas y reducir sus solicitudes HTTP.

4. One-Nexus

marco one-nexus

Aquí hay una biblioteca frontend más nueva que en realidad ofrece algunos módulos bastante locos.

El marco One-Nexus es masivo. Admite dispositivos táctiles y de diseño receptivo, se ejecuta en Sass y funciona con herramientas de compilación automatizadas. Sin embargo, creo que este es uno de los marcos más complejos para comenzar.

Si ya está familiarizado con los marcos y la línea de comandos, One-Nexus es realmente increíble. ¡Tiene tantos módulos que te harán girar la cabeza!

Pero puede llevar algún tiempo acostumbrarse a la configuración y configurar su diseño inicial a la perfección.

5. IU semántica

marco de interfaz de usuario semántico

Si está buscando un marco probado, consulte la interfaz de usuario semántica. Esta es una hermosa biblioteca frontend actualmente en v2.2 con toneladas de características.

Considero Semántico como el Bootstrap desconocido para el desarrollo frontend. No es tan popular entre los codificadores principales, pero tiene los mismos beneficios que Bootstrap.

La biblioteca semántica incluye botones, pestañas, menús desplegables, todo lo que necesita. Además, ofrece una depuración simple y un montón de temas increíbles para que pueda personalizar su diseño desde el primer momento.

6. CSS puro

marco css puro

He usado Pure CSS en algunos proyectos pequeños y realmente lo disfruto. Este es uno de los mejores frameworks porque le permite personalizar sus archivos para incluir las funciones que necesite.

Encontrará más información en la página de inicio que incluye enlaces de descarga y algunas guías de configuración.

Tenga en cuenta que la estética de Pure se siente muy minimalista, pero no demasiado simple. Imitan un poco de Bootstrap junto con algunos consejos del diseño de materiales de Google. Una biblioteca divertida para usar en cualquier proyecto tanto personal como comercial.

7. Kit de interfaz de tinta

marco del kit de tinta ui

Con el Kit de interfaz de tinta puede crear algunas páginas increíbles que responden. Se verán simples y seguirán un formato de código muy simple, pero eso generalmente es lo que desea en un marco frontend.

Ink incluso viene con su propia biblioteca JS que puedes ejecutar sobre Vanilla JS. Necesitará algunos ajustes si nunca antes ha usado tinta. Sin embargo, es una gran biblioteca comparable a jQuery en sintaxis.

Esto se ejecuta en Sass, funciona con HTML semántico y se siente como cualquier gran marco frontend.

8. Trabajo preliminar CSS

marco de trabajo css

Todavía tengo que hacer muchas pruebas en GroundworkCSS, pero este es un marco de respuesta fuerte.

Actualmente, en la versión 2.x, puede descargar toda la biblioteca de Groundwork en dos estilos: HTML / CSS / JS básico o en una plantilla para Ruby on Rails.

Ambos funcionan igual, y ambos proporcionan un sistema frontend robusto para codificar páginas utilizables.

Consulte su diseño de demostración para tener una idea de cómo se verá esto en su sitio.

9. Materialise.css

página de inicio de materialize.css

Desde que Google anunció su cambio hacia el diseño de materiales, se ha convertido en uno de los lenguajes de diseño de interfaz de usuario más grandes. Y si bien se creó originalmente para Android, se abrió camino en la web con muchos marcos como Materialise clonando el estilo.

Todo el marco se ejecuta como es de esperar: totalmente receptivo, cumple con los estándares y admite restablecimientos personalizados para todos los navegadores.

La única diferencia es que sus elementos predeterminados toman el estilo de diseño del material.

Y si bien este es probablemente mi marco de material favorito disponible, puede navegar a través de otros para ver qué más le llama la atención.

10. Acabado

marco de acabado

Cuando se trata de rendimiento, no puede pasar por alto la calidad de su código. Topcoat toma esto en serio como un marco con el rendimiento en mente.

Es totalmente personalizable y súper fácil de personalizar con HTML y CSS fáciles de leer. Cualquier edición que realice seguirá una estructura clara con convenciones de nomenclatura BEM para CSS.

El beneficio real con Topcoat es la prueba de carga y el enfoque en el rendimiento. Cualquier persona que necesite un diseño personalizado que se cargue rápido debe buscar en Topcoat.

11. Pétalo

marco de pétalos css

Petal es uno de los frameworks CSS más nuevos del mercado. Una vez más, es totalmente receptivo, 100% de código abierto, y puede soportar cualquier otro marco importante en esta lista.

Pero es bastante pequeño y está destinado a permanecer así. Se basa en el preprocesador Less CSS y también requiere Normalizar.

En última instancia, este es un marco súper pequeño que debería atraer a los desarrolladores de Less CSS. También puede consultar los documentos en línea para obtener fragmentos de código y ejemplos en vivo de elementos de página.