uikit3 color background & text

UIkit 3 es un framework CSS ligero y modular diseñado para desarrollar interfaces web modernas.

Al igual que otros frameworks como Bootstrap, UIkit proporciona clases utilitarias para manejar colores de fondo y de texto de forma sencilla y eficiente.

Background Color en UIkit 3

UIkit 3 ofrece clases para aplicar colores de fondo que se pueden usar en cualquier elemento HTML. Las clases de fondo suelen seguir el patrón uk-background-{color}.

Colores básicos:

• uk-background-default: Aplica un fondo blanco por defecto.
• uk-background-muted: Aplica un fondo gris claro, ideal para separar secciones.
• uk-background-primary: Aplica el color principal (generalmente azul).
• uk-background-secondary: Aplica un color secundario (usualmente oscuro o gris).
• uk-background-danger: Aplica un fondo rojo, normalmente para alertas.

Ejemplos:

<div class="uk-background-primary uk-light uk-padding">Fondo azul con texto claro</div>
<div class="uk-background-muted uk-padding">Fondo gris claro</div>
<div class="uk-background-secondary uk-light uk-padding">Fondo oscuro con texto claro</div>

• uk-background-primary: Fondo azul principal.
• uk-background-muted: Fondo gris claro.
• uk-background-secondary: Fondo oscuro.
• uk-light: Hace que el texto sea claro, ideal para fondos oscuros.

Text Color en UIkit 3

UIkit 3 también proporciona clases para aplicar colores al texto. Las clases siguen el patrón uk-text-{color}.

Colores básicos:

• uk-text-primary: Texto en el color principal.
• uk-text-secondary: Texto en un color secundario, más sutil.
• uk-text-muted: Texto gris claro, menos destacado.
• uk-text-danger: Texto rojo, usado para indicar advertencias o errores.
• uk-text-success: Texto verde, usado para indicar éxito.

Ejemplos:

<p class="uk-text-primary">Texto en color azul principal</p>
<p class="uk-text-muted">Texto gris claro, sutil</p>
<p class="uk-text-danger">Texto rojo para advertencias o errores</p>

Ejemplo combinado:

<div class="uk-background-secondary uk-light uk-padding">
  <h1 class="uk-text-success">Título con texto verde</h1>
  <p class="uk-text-muted">Este es un párrafo con texto gris claro sobre un fondo oscuro.</p>
</div>

• uk-background-secondary: Fondo oscuro.
• uk-light: Texto claro para resaltar sobre el fondo oscuro.
• uk-text-success: Texto verde para el título.
• uk-text-muted: Texto gris claro para el párrafo.

Conclusión

UIkit 3 ofrece un enfoque simple y flexible para manejar colores de fondo y texto a través de clases predefinidas. Estas clases permiten aplicar estilos consistentes en toda la interfaz, facilitando el desarrollo de páginas web con una estética moderna y profesional. Además, la combinación de clases de fondo y texto en UIkit permite crear contrastes efectivos para mejorar la legibilidad y la accesibilidad en tus proyectos web.