Librería utilidades CSS groseramente simple.

Necesitaba una librería css que sea facil de aprender y pueda existir en navegadores modernos, Ej: Chrome o Edge; No tenía en mente indicar un sistema complejo de colores o grillas complejo, el objetivo es evitar ser minimalista, lo contrario, es ser SIMPLE hasta no dar más. Así se podría desarrollar una interfaz agradable y clara que no interrumpe al flujo del usuario final.

• No impone una fuente de texto, utiliza por defecto la incluida en el navegador.
• Se utiliza flexbox para lograr organizar elementos de forma más práctica.
• Su enfoque es ser groseramente simple para no agobiar con reglas complejas a desarrolladores apresurados.
• No es restrictivo es progresivo, por lo cual el usuario final puede crear sus componentes y composiciones siempre que se necesite.

• Pre. ¿Porque una librería de utilidad?
  • Res. Me encanta ser explicito al desarrollar a algún programa, el diseño no tendría que estar alejado.
• Pre. ¿Se podría mejorar en el futuro?
  • Res. ¡Sí señor! por eso lo dejo de código abierto, es más quizas en otras versiones meta algo similar al sistema bloque de boostrap para prevener mal escalado en varias pantallas.

Compendio de como trabaja la hoja de estilo.

La librería se construye e irá construyendo sobre la arquitectura CUBE, permite aprovechar las características nativas de css para definir estilos globales que permiten componer disposición y utilidades para una página o app web.

1. Comienza a calcular todo el tamaño de cajas desde el borde.
2. El cuerpo de la página se muestra como un flex con flujo de columna y envuelto.
3. Todos los hijos y hermanos del cuerpo que no sean elemento "script" son mostrados como inline-flex.
4. Las imagenes no se repiten y cubren a la caja enteramente, para facilitar imagenes placeholder y/o baja calidad.
5. Las listas tiene un margin y espacio a 0, y no muestran marcador.
6. Se usan selectores globales para definir el color en todos los elementos hijos del cuerpo.

Para utilizar todos los tokens se usa la funcion var(--token)

• Colores

  
  --background-color: hsl(60, 3%, 96%);
  --foreground-color: hsl(240, 38%, 10%);
  --foreground-color-alt: hsl(246, 52%, 47%);
  --success: hsl(138, 55%, 35%);
  --alert: hsl(47, 84%, 54%);
  --error: hsl(357, 68%, 49%);
  --disable: hsl(0 0% 70%);
  

• Tamaños

  
  --size-normal: 1.6rem;
  --size-tiny: 0.8rem;
  --size-medium: 3.2rem;
  --size-large: 6.4rem;
  --default-viewport: 90dvh;
  

Mayoria se definen por propiedades lógicas. Se forman en funcion de la dirección y tamaño, su sintaxis es la siguiente:

=> SINTAXIS: regla-direccion-tamaño => EJEMPLO: mar-inline-md

Reglas y Variaciones

Esto es el main course de la librería, pues de aquí creo se desarrolla mí idea para este proyecto.

Dilema: Imagina que, dentro del diseño creado usa disposiciones comunes para hacer lucir mejor el contenido, empezar desde cero puede relantizar ese proceso y definer que sí o no se comporta es tedioso.

Mí solución: Por ello se usan composición de layouts (dispocion de pagina) prefabricadas en base a flexbox para que sean responsivas y semejantes en casí todos lo tamaños sin requerir media-querys.

Por ahora solo cuento con 5 composiciones preconstruidas, pero como esta librería tiene enfoque progresiva puedes crear tus propias composiciones. Además por ello me tome la molestía de no incluir "bloques o excepciones" ya que eso es algo bajo su criterio.