Halfmoon: una alternativa Bootstrap con modo oscuro incorporado

Recientemente lanzó la primera versión de producción de Halfmoon, un marco de interfaz de usuario que ha estado construyendo durante los últimos meses. Esta es una breve publicación introductoria sobre qué es el marco y por qué decidió construirlo.

El discurso del ascensor

Halfmoon es un marco de interfaz de usuario con algunas cosas interesantes a su favor:

• Modo oscuro integrado: la creación de una versión en modo oscuro de un sitio 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, notificaciones, accesos directos, etc., que se pueden usar en cualquier lugar para crear diseños, incluso los complejos. como los paneles.
• 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 potente biblioteca de JavaScript sin dependencias adicionales.
• Todas las clases de CSS que necesitas: los nombres de las clases deben resultarle familiares al instante a cualquiera que haya utilizado Bootstrap porque esa fue la inspiración.
• Compatibilidad entre navegadores: Halfmoon es totalmente compatible con casi todos los navegadores que existen, incluidos los más antiguos como Internet Explorer 11.
• Fácilmente personalizable: Halfmoon utiliza propiedades CSS personalizadas para cosas como colores y diseños, lo que hace que sea extremadamente fácil personalizar las cosas a tu gusto, incluso sin un preprocesador CSS.

En muchos sentidos, puedes pensar en Halfmoon como Bootstrap con una implementación de modo oscuro integrada. Utiliza muchos componentes de Bootstrap con una marca ligeramente modificada en muchos casos.

Bien, genial, pero ¿por qué este marco?

Cada vez que se introduce un nuevo marco, inevitablemente surge la misma pregunta: ¿Por qué crearon esto? La respuesta es que me encantan los modos y temas oscuros. Las herramientas que vienen con un modo claro y uno oscuro (junto con un interruptor de palanca) son mis favoritas porque siento que poder cambiar un tema a mi antojo hace que sea menos probable que me aburra mirándolo durante horas. A veces leo en condiciones de poca luz (reza 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 sencilla que facilitara la implementación del modo oscuro para un proyecto de panel en el que estaba trabajando. Después de investigar un poco, llegué a la conclusión de que solo tenía dos opciones viables: adquirir una biblioteca de componentes basada en JavaScript para un marco de front-end, como Vuetify para Vue, o desembolsar algo de dinero por un tema oscuro premium para Bootstrap (y yo No me gustó el aspecto de los gratuitos). No quería usar una biblioteca de componentes porque me gusta crear sitios web simples renderizados en servidor usando Django. Esa es sólo mi taza de té. Por lo tanto, construí lo que necesitaba: un marco de interfaz de usuario atractivo y gratuito que sigue la misma línea que Bootstrap, pero que incluye temas claros y oscuros igualmente atractivos listos para usar.

Planes futuros

Solo quería compartir Halfmoon contigo para hacerte saber que existe y que está disponible gratuitamente si buscas un marco extensible en la misma línea que Bootstrap que prioriza el modo oscuro en la implementación.

Y, como podrás imaginar, todavía estoy 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 básicas de JavaScript de componentes útiles, como selección múltiple personalizada (piense en Select2, solo que 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 paneles de control complejos, pero que siga siendo excelente para crear cualquier sitio web. La documentación del marco se puede encontrar en el sitio web del proyecto . Todo el código es de código abierto y tiene licencia del MIT. También puedes seguir el proyecto en GitHub. Me encantaría que lo revises, dejes comentarios, abras problemas o incluso contribuyas.