Recientemente lancé la primera versión de producción de Halfmoon, un marco de front-end que he estado construyendo durante los últimos meses. Esta es una breve publicación introductoria sobre qué es el marco y por qué decidí construirlo.
El discurso del ascensor
Halfmoon es un marco de interfaz de usuario con algunas cosas interesantes a su favor:
- Modo oscuro integrado en: La creación de una versión en modo oscuro de un sitio está lista y es muy sencilla.
- Componentes modulares: Se ha prestado mucha atención a la creación de componentes modulares, como formularios, barras de navegación, barras laterales, menús desplegables, brindis, accesos directos, etc., que se pueden usar en cualquier lugar para crear diseños, incluso complejos como paneles de control.
- JavaScript es opcional: Muchos de los componentes que se encuentran en Halfmoon están diseñados para funcionar sin JavaScript. Sin embargo, el marco todavía viene con una poderosa biblioteca de JavaScript sin dependencias adicionales.
- Todas las clases de CSS que necesitas: Los nombres de las clases deberían resultarle familiares instantáneamente a cualquiera que haya usado Bootstrap porque esa fue la inspiración.
- Compatibilidad con varios navegadores: Halfmoon es totalmente compatible con casi todos los navegadores del mundo, incluidos los realmente antiguos como Internet Explorer 11.
- Fácilmente personalizable: Halfmoon usa propiedades CSS personalizadas para cosas como colores y diseños, lo que hace que sea extremadamente fácil personalizar las cosas a su gusto, incluso sin un preprocesador CSS.
En muchos sentidos, puede pensar en Halfmoon como Bootstrap con una implementación de modo oscuro integrada. Utiliza muchos componentes de Bootstrap con un marcado ligeramente alterado en muchos casos.
Bien, genial, pero ¿por qué este marco?
Siempre que se introduce un nuevo marco, inevitablemente surge la misma pregunta: ¿Por qué realmente construiste esto? La respuesta es que me encantan los modos y temas oscuros. Las herramientas que vienen con un modo claro y oscuro (junto con un interruptor de palanca) son mis favoritas porque siento que poder cambiar un tema por capricho hace que sea menos probable que me aburra mirándolo durante horas. A veces leo en condiciones de poca luz (rezo por mis ojos), y los modos oscuros son mucho más cómodos en ese tipo de situación.
De todos modos, hace unos meses, quería crear una herramienta simple para mí que facilitara la implementación del modo oscuro para un proyecto de tablero en el que estaba trabajando. Después de investigar un poco, llegué a la conclusión de que solo tenía dos opciones viables: elegir una biblioteca de componentes basada en JavaScript para un marco front-end, como Vuetify para Vue, o desembolsar algo de dinero en efectivo para un tema oscuro premium para Bootstrap (y yo no le gustó el aspecto de los libres). No quería usar una biblioteca de componentes porque me gusta construir sitios web simples renderizados por servidor usando Django. Esa es solo mi taza de té. Por lo tanto, construí lo que necesitaba: un marco de interfaz de usuario atractivo y gratuito que está en la misma línea que Bootstrap, pero que incluye temas claros y oscuros igualmente atractivos desde el primer momento.
Planes futuros
Solo quería compartir Halfmoon contigo para hacerte saber que existe y está disponible gratuitamente si estás buscando un marco extensible en la misma línea que Bootstrap que priorice el modo oscuro en la implementación.
Y, como puede imaginar, sigo trabajando en Halfmoon. De hecho, tengo muchas mejoras en mente:
- Más componentes
- Más opciones de personalización (usando variables CSS)
- Más ejemplos y plantillas
- Mejores herramientas
- Ejemplos de accesibilidad mejorados en los documentos
- Implementaciones vainilla de JavaScript de componentes útiles, como selección múltiple personalizada (piense en Select2, solo sin jQuery), tablas de datos y validadores de formularios, entre otras cosas.
En resumen, el plan es crear un marco que sea realmente útil cuando se trata de crear cuadros de mando complejos, pero que sigue siendo excelente para crear cualquier sitio web. La documentación del marco se puede encontrar en el sitio web del proyecto. El código es de código abierto y tiene licencia del MIT. También puede seguir el proyecto en GitHub. Me encantaría que lo revises, dejes comentarios, abras problemas o incluso contribuyas.