Turia CSS

¿Por qué existe este proyecto?

Soy capaz de hacer diseños pixel perfect si me dices lo que quieres hacer, pero me cuesta un poco diseñar desde cero, selección de colores, espacios, composición…

Sé que es la parte que cierra el círculo del desarrollo, pero hasta ahora no le he dedicado el tiempo que se merece. Lo que sí he hecho ha sido investigar herramientas (me apasiona buscar herramientas) para que mis diseños sean más armónicos y coherentes.

Así conocí Tailwind, Bulma, DaisyUI, Shadcn, Bootstrap, Open props, Pollen, Ant Design, y muchos, pero muchos más. Todos tienen algo que aportar, pero todos tienen un trade-off que no me termina de convencer.

Tailwind es muy práctico, enseguida empiezas a ver resultados “sin escribir una línea de CSS”, pero acabas teniendo un HTML un poco loco conforme avanza el proyecto.

Llegué a la conclusión de que lo que me gusta es reutilizar las clases, pero lo que me faltaba es un sistema de espaciados y colores listo para usar. Open Props es un gran ejemplo de esto, pero tiene decisiones de diseño que no terminaba de entender, como por ejemplo --size-000. Construir un sistema de design tokens CSS es algo muy complejo, hacer que todo tenga sentido es un gran reto. Sobre todo que, a la hora de desarrollar, tengas todos los valores en la cabeza o que puedas deducirlos con unas simples reglas. Ese es el gran reto.

Con Turia CSS no sé si lo he conseguido, pero al menos he intentado aportar mi granito de arena y mi visión sobre el tema.

La idea es la siguiente:

Tamaños

La idea principal era poder abarcar todos los posibles tamaños que puedas necesitar al hacer un diseño.

Para hacer esto, dividí los tamaños en 7 escalas con 7 multiplicadores cada una, teniendo que recordar “solo” 2 cosas: el paso principal de cada escala y dónde empieza.

Por ejemplo, la escala sm empieza en 48px y tiene un paso de +8px. Por lo que con esa escala puedo ajustar de 8px en 8px. La realidad es que siempre vas a probar y probar, pero el resultado es una escala de tamaños con una distribución armónica y predecible.

Colores

Para los colores me inspiré en Tailwind y en Open Colors, pero con una selección de colores diferente con más contraste entre tonos.

Extras

Además de los tamaños y colores, también añadí otras categorías como tipografía, sombras, bordes, animaciones, opacidad, z-index, blur, gradientes, grid y aspect-ratio.

Construir la librería me llevó bastante tiempo, pero lo más difícil fue mantener la coherencia y la lógica detrás de cada valor. Uno de mis mayores retos fue la elección de los colores y el sizing. Finalmente, con mucho trabajo, creo que el resultado produce diseños armónicos y con sentido.