¿Cómo ajustar los bordes en mi app?

Así funciona el borde en una app GoodBarber, dónde está y cómo ajustar su color y su grosor, hasta el filete bajo un título.

Un borde es un trazo que sigue el contorno de un elemento. Marca dónde empieza y dónde termina, y revela su forma, esquinas rectas o redondeadas. Una celda, un campo, un botón, una pastilla de fecha, una pestaña de categoría, la barra de pestañas llevan uno. Tres ajustes lo describen:

• El color, transparente por defecto en una celda o un widget, a elegir en tu paleta o fuera de ella.
• El grosor, un número entero, en píxeles. Vale 1 por defecto.
• Los lados, en la cabecera de un widget: arriba, derecha, abajo e izquierda (top, right, bottom, left), cada uno activo o desactivado. Los cuatro activos enmarcan el título. Solo el de abajo lo subraya.

Eso es todo, y es lo que hace que el borde sea tan sencillo de ajustar. En el Design System de GoodBarber es el átomo Border, con sus claves color y size y, para una cabecera, una clave por lado.

En una app GoodBarber no añades un borde, lo revelas. Las celdas, los widgets de la Home y sus cabeceras llevan uno, de 1 px, transparente. Dale un color y aparece. Los campos y los botones también tienen uno, y el suyo ya se ve, gris claro en un campo, del color del texto en un botón de contorno. Es nuestro principio «Design by system», cada elemento se construye con su borde, listo para servir.

En un widget de la Home, el color se elige en el panel de diseño, por la ruta Mi App › Estructura › Inicio › tu widget › Modificar. Allí encuentras tres colores, «Bordes» para la cabecera, «Color de los bordes» para el marco del widget entero y «Color del borde» para cada celda. El grosor, en cambio, se ajusta en el JSON, ahora llegamos.

Para los campos, un solo ajuste basta para toda la app. Vive en Estilo de App, con el botón { EDICIÓN } del que hablamos más abajo, bajo designComponents, textField y luego border.

Una lista tiene una regla más. Cuando sus celdas no tienen ni fondo ni borde, se suceden directamente sobre la página y un filete fino las separa, el separador, en el color «Separador de listas» de tus Colores. Dale un color a las celdas, a su fondo o a su borde, y la lista cambia de modo. El separador desaparece por sí solo. Cada celda se despega de sus vecinas y aparecen sus esquinas, según tu ajuste de forma. Nada que desactivar, nada que alinear.

Así, en una app GoodBarber, una lista nunca acumula dos trazos, el filete entre las filas o el trazo alrededor de cada celda, y es el sistema quien elige. Es nuestro principio «No design burden», para que el diseño nunca sea una carga.

Aquí tienes dos veces la misma pantalla. A la izquierda, todos los bordes están a 1 px, en un gris discreto. Delimitan cada elemento, pero nada destaca, todo vale lo mismo. A la derecha, pasan al negro suave de la paleta (#282727) y su grosor sigue el papel de cada elemento. 1 px para la barra de navegación y la celda de evento, 2 px para las cabeceras de widget y la pastilla de fecha, 4 px para la única noticia destacada. Una sombra dura bajo la pastilla termina de dar a la pantalla su aire de cartel. El ojo sabe enseguida adónde ir.

Los grosores se cambian en un instante. Prueba, compara en la vista previa y quédate con lo que prefiera tu ojo.

La misma celda puede llevar bordes muy distintos, y cada uno cambia el estilo de tu app. La imagen muestra cuatro, del más discreto al más marcado:

La primera línea corresponde al ajuste por defecto, el que obtienes sin escribir nada. Las otras tres se copian tal cual en el editor, clave por clave.

Ninguno de estos bordes es mejor que otro, y todos se ajustan con las mismas claves. El más grueso, por sí solo, puede dar su estilo a una app, como en nuestra maqueta de app de galería de arte, en neobrutalismo, en Dribbble, con bordes negros gruesos y esquinas rectas.

Mi ajuste favorito cabe en un trazo, un filete de 1 px bajo el título de un widget, en el color de los filetes de la paleta. Te lo has cruzado en las imágenes de este artículo. Como en un periódico, separa el título del contenido sin cerrar nada, y la lista respira. Un marco completo alrededor del título lo convertiría en un botón.

Su color se elige en el panel del widget, en «Bordes», y sus lados en { EDICIÓN }, es el gesto del paso 4 de arriba.

El borde en resumen

• En una app GoodBarber, el borde ya está ahí, 1 px, en las celdas, los widgets y sus cabeceras, los campos y los botones, transparente salvo en los campos y los botones de contorno.
• Tres ajustes, el color, el grosor (un número entero en píxeles) y, en la cabecera de un widget, los lados (top, right, bottom, left), cada uno activo o desactivado.
• Borde o separador, nunca los dos. Un color de fondo o de borde en la celda borra el separador y la despega.
• En un widget de la Home, tres colores en el panel, la cabecera, el widget, la celda.
• Para los campos, un solo ajuste vale para toda la app.
• El grosor y los lados se ajustan en el JSON, con la extensión gratuita Edición avanzada (botón { EDICIÓN }).