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.