Consideraciones para crear un marco CSS

Hace unos ocho meses, comencé a construir un marco que eventualmente se convertiría en Halfmoon . Hice una publicación en este mismo sitio web anunciando el lanzamiento de la primera versión. Halfmoon se ha anunciado como una alternativa a Bootstrap con una función de modo oscuro incorporada, que es especialmente buena cuando se trata de crear paneles y herramientas. Todo esto todavía se aplica al marco.

Sin embargo, hoy me gustaría hablar de un área del marco que está un poco subestimada. Creo que nuestra industria en su conjunto subestima seriamente el valor de la personalización y la personalización del usuario, es decir, que los usuarios puedan establecer sus propias preferencias de diseño. Chris ha escrito antes sobre saber quién está hecho un sistema de diseño, señalando un espectro de flexibilidad dependiendo de quién debe ayudar un sistema.

Pero es más que sistemas de diseño. Hablemos de cómo Halfmoon aborda estos problemas porque son consideraciones importantes para saber qué marco funciona mejor para sus necesidades específicas.

¿Para quién es Media Luna?

Antes de profundizar, abordemos una pregunta importante: ¿Es Halfmoon el marco adecuado para usted? Aquí hay una lista de preguntas para ayudar a responder eso:

• ¿Está creando un panel, una herramienta o incluso un sitio web de documentación? Halfmoon tiene muchos componentes y características únicas que son específicas de estos casos de uso.
• ¿Está familiarizado con los nombres de las clases de Bootstrap, pero desearía que el diseño tuviera un aspecto un poco más premium?
• ¿Sus usuarios quieren o esperan un modo oscuro en su sitio web?
• ¿No te gustan las dependencias? Halfmoon no utiliza jQuery y tampoco tiene un proceso de compilación que involucra preprocesadores CSS. Todo es puro, CSS básico y JavaScript.
• ¿Está cansado de lidiar con sistemas de construcción complejos y herramientas de interfaz de usuario? Esto se relaciona con el punto anterior. Personalmente, me resulta difícil lidiar con herramientas de front-end y procesos de construcción. Como se mencionó anteriormente, Halfmoon no tiene un proceso de compilación, por lo que simplemente ingresa los archivos (locales, CDN o npm) y comienza a compilar.

Si respondió afirmativamente a alguna (o todas) de estas preguntas, probablemente debería probar Halfmoon. Sin embargo, es importante tener en cuenta que Halfmoon no es una biblioteca de componentes de interfaz de usuario para React/Vue/Angular, por lo que no debes entrar esperando eso. Además, si te gusta más el desarrollo puramente basado en utilidades, Tailwind CSS es una mejor opción para ti. Cuando se trata de utilidades CSS, Halfmoon adopta un enfoque intermedio: hay utilidades además de clases semánticas para componentes comunes.

Usando propiedades personalizadas de CSS

Primero, dejemos de lado las cosas fáciles. Las propiedades personalizadas de CSS son increíbles y espero que reemplacen por completo las variables del preprocesador en el futuro. La compatibilidad con el navegador ya alcanza un sólido ~96% y, con la eliminación gradual de Internet Explorer por parte de Microsoft, se espera que se convierta en una característica estándar.

Halfmoon se construye enteramente utilizando variables CSS porque proporciona un enorme grado de personalización. Ahora, podrías pensar inmediatamente que todo esto significa que hay algunas propiedades personalizadas para los colores, pero es más que eso. De hecho, hay más de 1.500 variables globales en Halfmoon. Casi todo se puede personalizar anulando una propiedad. Aquí hay un ejemplo ingenioso de los documentos:

De eso estamos hablando aquí cuando se trata de personalización: ¿el sistema sigue funcionando bien si la persona que lo usa anula algo? He escrito extensamente sobre esto (y mucho más) en la página oficial de documentos de Halfmoon .

Las variables no son un concepto nuevo para los marcos. Muchos frameworks en realidad usan variables Sass o Less y lo han hecho durante bastante tiempo. Sigue siendo una forma buena y eficaz de establecer una experiencia personalizable. Pero al mismo tiempo, se bloquearán en un preprocesador (lo cual, nuevamente, no tiene por qué ser algo malo). Al confiar en cambiar en las propiedades personalizadas de CSS (y variableizar todas las cosas), confiamos en CSS nativo, y eso no requiere ningún tipo de dependencia de compilación. Por lo tanto, las propiedades personalizadas no solo pueden facilitar la personalización de un marco, sino que también son mucho más flexibles en términos de la pila tecnológica que se utiliza.

Hay que lograr un equilibrio. Sé que sugeriré crear variables para todo, pero puede ser igualmente difícil administrar y mantener evaluación y evaluación de variables (como cualquier otra cosa en el código base). Por lo tanto, apóyese en gran medida en las variables para hacer que un marco o sistema de diseño sea más flexible, pero también tenga en cuenta cuánta flexibilidad necesita proporcionar y si agregar otra variable es parte de ese alcance.

Decidir qué componentes incluir

Cuando se trata de crear un marco CSS, decidir qué componentes incluir es una gran parte de esa terrible experiencia. Por supuesto, para un desarrollador que trabaja en un proyecto apasionante, desea incluirlo todo. Pero eso simplemente no es factible, por lo que tomé algunas decisiones por mi parte.

A partir de ahora, Halfmoon tiene la mayoría de los componentes que puedes encontrar en frameworks similares como Bootstrap o Bulma. Estos marcos son excelentes y se utilizan ampliamente, por lo que son un buen marco de referencia. Sin embargo, como ya mencioné, una característica única de Halfmoon es el enfoque en la creación de herramientas y paneles de control en la web. Este nicho, si se le puede llamar así, me ha llevado a crear algunos componentes y características únicas:

• 5 tipos diferentes de barras laterales, con controladores de superposición y alternancia integrados. Las barras laterales son muy importantes para la mayoría de los paneles y herramientas (y es complicado hacerlo bien), por lo que esto fue una obviedad.
• 2 tipos diferentes de barras de navegación. Hay uno que se pega al final de la página, que puede usarse con gran efecto para los botones de acción. Piense en las acciones que aparecen cuando selecciona elementos en la tabla de datos. Podrías colocar esos botones de acción aquí.
• Menús desplegables omnidireccionales (con 12 ubicaciones diferentes, 3 para cada dirección).
• Hermosos componentes de forma.
• Sistema de atajos de teclado incorporado, con una manera fácil de declarar nuevos para su herramienta.
• Gran cantidad de servicios públicos. Por supuesto, esto no es comparable a Tailwind CSS, pero Halfmoon tiene suficientes clases de utilidades responsivas para manejar muchos casos de uso desde el primer momento.

Además, el modo oscuro incorporado, la enorme capacidad de personalización y la apariencia estándar de los componentes deben trabajar juntos para hacer de Halfmoon una gran herramienta para crear herramientas web y paneles de control. ¡Y espero que no esté ni cerca de terminar! Las próximas actualizaciones traerán un validador de formulario ( video de demostración ), más componentes de formulario, componente de selección múltiple, selector de fecha y hora, componente de tabla de datos, etc.

Entonces, ¿qué es exactamente lo que falta en Halfmoon? Bueno, los más obvios son las pestañas, el grupo de listas y los controles giratorios. Pero está previsto que todos estos se agreguen en v1.2.0, que es la próxima actualización. También faltan otros componentes, como carruseles, navegación en árbol, avatares, etc., que están ligeramente fuera de alcance.

Proporcionar preferencias de usuario

Los marcos a menudo pasan por alto dar a los usuarios finales la capacidad de establecer sus preferencias. Cosas como establecer el tamaño de fuente de un artículo o si utilizar un tema claro o oscuro. De cierto modo, es algo gracioso, porque la web se está poniendo al día con lo que los sistemas operativos han permitido hacer a los usuarios durante décadas.

A continuación se muestran algunos ejemplos de personalización de usuarios en la web:

1. Pudiendo seleccionar tu modo de color preferido . Y, aún mejor, el sitio web guarda y respeta automáticamente sus preferencias cuando se carga la página. O mejor aún, observe las preferencias de su sistema operativo y adáptelas automáticamente.
2. Establecer el tamaño predeterminado de los elementos. Especialmente el tamaño de la fuente. Una fuente pequeña puede verse bien en un diseño, pero permitirá a los usuarios establecer su tamaño de fuente ideal para que el contenido sea realmente legible. Técnicamente, todos los navegadores modernos tienen una opción para ampliar el contenido, pero a menudo es difícil de manejar y en realidad no guarda la configuración.
3. Establecer la compacidad de los elementos. Por ejemplo, algunas personas prefieren un acolchado grande con esquinas redondeadas, mientras que otras consideran que es una pérdida de espacio y prefieren una interfaz de usuario más estrecha. Algo así como Gmail te permite decidir si quieres mucho espacio para respirar en tu bandeja de entrada o hacerla lo más pequeña y estrecha posible para ver más contenido.
4. Configuración del color primario en el sitio web. Si bien esto es completamente cosmético, sigue siendo encantador poder configurar su color favorito en cada botón y enlace de un sitio web.
5. Habilitando un modo de alto contraste. Alguien me señaló esto en GitHub. Aparentemente, muchos (y me refiero a muchos) marcos CSS a menudo no alcanzan el contraste mínimo recomendado entre los colores de primer plano y de fondo en elementos comunes, como los botones. Esa lista incluye Halfmoon. Esto suele ser una compensación, porque los elementos demasiado contrastantes suelen ser peores (puramente en términos estéticos). La personalización del usuario puede permitirle activar un modo de alto contraste, si tiene dificultades con el contraste predeterminado.

Permitir personalizaciones de usuario puede ser realmente difícil de lograr, especialmente para un marco, porque eso podría significar cambiar grandes partes de CSS para acomodar las diferentes configuraciones y combinaciones de personalización. Sin embargo, con un marco como Halfmoon (es decir, construido completamente usando variables CSS), esto se vuelve trivial ya que las variables CSS se pueden configurar y cambiar en tiempo de ejecución usando JavaScript , así:

// Get the html tag (for reading and setting variables in global scope)var myElement = document.documentElement;// Read CSS variablegetComputedStyle(myElement).getPropertyValue("--variable-name");// Set CSS variablemyElement.style.setProperty("--variable-name", "value");

Por tanto, la personalización del usuario se puede implementar utilizando Halfmoon de la siguiente manera:

• El usuario establece una preferencia. Básicamente, eso significa que se cambia el valor de una variable. La variable se configura con JavaScript (como se muestra arriba) y el nuevo valor se almacena en una cookie o en un almacenamiento local.
• Cuando el usuario regresa al sitio web, sus preferencias se recuperan y configuran usando JavaScript (nuevamente, como se muestra arriba) una vez que se carga la página.

Aquí hay ejemplos visuales para aclarar el punto.

Configurar y guardar el tamaño de fuente predeterminado

En el ejemplo anterior, cada vez que se cambia el control deslizante de rango, la variable --base-font-sizese actualiza al valor del control deslizante. Esto es ideal para las personas que prefieren un texto más grande. Como se explica en la sección anterior, este nuevo valor se puede guardar en una cookie o almacenamiento local, y la próxima vez que el usuario visite el sitio web, la preferencia del usuario se puede configurar al cargar la página.

Establecer la compacidad del contenido

En este ejemplo solo se actualizan dos variables para pasar de una vista expandida a una compacta:

• --content-and-card-spacingcambiado de 3rem (30px)a 2rem (20px).
• --card-border-radiuscambiado de 0.4rem (4px)a 0.2rem (2px).

Para un escenario de la vida real, podría tener un menú desplegable que le pregunte al usuario si prefiere que su contenido sea Predeterminado o Compacto , y elegir uno obviamente establecería las variables CSS anteriores como tema del sitio. Una vez más, esto podría guardarse y configurarse al cargar la página cuando el usuario visite el sitio web en su próxima sesión.

¿Espera pero por qué?

Incluso con todos los ejemplos que he mostrado hasta ahora, es posible que todavía te preguntes por qué es realmente necesario. La respuesta es realmente sencilla: una talla no sirve para todos . En mi estimación, alrededor de la mitad de la población prefiere una interfaz de usuario oscura, mientras que la otra mitad prefiere la luz. De manera similar, las personas tienen grandes variaciones sobre las cosas que les gustan cuando se trata de diseño. La personalización del usuario es una forma de mejorar la UX , porque le permite elegir lo que prefiere. Puede que esto no sea tan importante en una página de destino, pero cuando se trata de una herramienta o panel (que hay que usar durante mucho tiempo para hacer algo), tener una interfaz de usuario que se pueda personalizar es una gran ayuda para la productividad. Y saber que Halfmoon está diseñado para eso lo hace ideal para este tipo de casos de uso.

Además, ¿sabe que la gente suele quejarse de que todos los sitios web creados con un determinado marco (por ejemplo, Bootstrap) tienen el mismo aspecto? Este es un paso para garantizar que los sitios web creados con Halfmoon siempre se vean distintos, de modo que la atención se centre en el sitio web y el contenido en sí, y no en el marco que se utilizó para crearlo.

Una vez más, no estoy diciendo que se deba permitir que todo se personalice. Pero saber para quién es el marco y para qué está diseñado ayuda a aclarar qué se debe personalizar.

Mirando hacia el futuro

Creo firmemente que la flexibilidad para la personalización y la contabilidad de las preferencias del usuario a menudo se pasan por alto en la web, especialmente en el panorama de los marcos. Eso es lo que intento abordar con Halfmoon.

En el futuro, quiero que a los desarrolladores les resulte mucho más fácil implementar las preferencias de los usuarios y también promover la diversidad de diseños con nuevas plantillas y temas. Dicho esto, aquí hay algunas cosas en el horizonte para Halfmoon:

• Un validador de formularios ( video de demostración )
• Nuevos componentes, incluidos controles deslizantes de rango, pestañas y controles giratorios.
• Preferencia del usuario del modo de alto contraste
• Componente de selección múltiple (como Select2, solo que sin jQuery)
• Un selector de fecha y hora
• Un componente de tabla de datos
• Un creador de formularios basado en GUI
• Más temas y plantillas

Por supuesto, puedes obtener más información sobre Halfmoon en el sitio web de documentación y, si quieres seguir el proyecto, puedes darle una estrella en GitHub .