🎨 Colores

En este apartado se detallan los diferentes colores de fondo que Bodystyle ofrece para la personalización de los sitios web. Estos colores pueden ser aplicados a diferentes elementos HTML.

Sass

Toda la paleta de colores es modificable desde las variables globales de Bodystyle en el archivo _variables.scss A continuación, se muestra una tabla con los colores de fondo

Advertencia

Los colores del archivo antes mencionado son variables globales por lo tanto cualquier modificación desde el repositorio.

Paleta

En este apartado se muestran los diferentes colores de fondo disponibles en Bodystyle.

.fd-bodyui

.fd-rojo

.fd-rojo-c

.fd-rojo-o-1

.fd-rojo-o-2

.fd-rojo-o-3

.fd-rojo-o-4

.fd-rojo-t

.fd-rojo-an

.fd-rojo-ro

.fd-rosa

.fd-rosa-o-1

.fd-rosa-o-2

.fd-rosa-o-3

.fd-rosa-o-4

.fd-rosa-t

.fd-azul

.fd-azul-c

.fd-azul-o-1

.fd-azul-o-2

.fd-azul-o-3

.fd-azul-o-4

.fd-azul-t

.fd-azul-ve

.fd-verde

.fd-verde-c

.fd-verde-o-1

.fd-verde-o-2

.fd-verde-o-3

.fd-verde-o-4

.fd-verde-t

.fd-verde-az

.fd-verde-am

.fd-gris

.fd-gris-c

.fd-gris-o-1

.fd-gris-o-2

.fd-gris-o-3

.fd-gris-o-4

.fd-gris-t

.fd-gris-az

.fd-gris-az-c

.fd-gris-az-o

.fd-gris-n

.fd-blanco

.fd-negro

.fd-naranja

.fd-naranja-c

.fd-naranja-o-1

.fd-naranja-o-2

.fd-naranja-o-3

.fd-naranja-o-4

.fd-naranja-t

.fd-naranja-ro

.fd-naranja-am

.fd-amarillo

.fd-amarillo-c

.fd-amarillo-o-1

.fd-amarillo-o-2

.fd-amarillo-o-4

.fd-amarillo-t

.fd-amarillo-ve

.fd-amarillo-an

.fd-violeta

.fd-violeta-c

.fd-violeta-o-1

.fd-violeta-o-2

.fd-violeta-o-3

.fd-violeta-o-4

Aplicando Colores de Fondo

A continuación se muestran ejemplos prácticos de cómo aplicar los colores de fondo en elementos HTML:

Información

Las clases de color de fondo se pueden combinar con clases de color de texto (c-rojo, c-azul, etc.) y otras utilidades para crear diseños más complejos.

HTML

    
    
        Título con fondo rojo
        Este párrafo tiene fondo rojo y texto blanco
    

    
    
        Título con fondo verde
        Este párrafo tiene fondo verde y texto blanco
    

    
    
        Título con fondo gris oscuro
        Este párrafo tiene fondo gris oscuro y texto blanco

Alias de Colores

Bodystyle también proporciona alias para algunos colores de fondo comunes, facilitando su uso en el desarrollo web. A continuación se muestran algunos ejemplos de alias:

.bg-bodyui

.bg-red

.bg-red-s

.bg-red-d-1

.bg-red-d-2

.bg-red-d-3

.bg-red-d-4

.bg-blue

.bg-blue-s

.bg-blue-d-1

.bg-blue-d-2

.bg-blue-d-3

.bg-blue-d-4

.bg-green

.bg-green-s

.bg-green-d-1

.bg-green-d-2

.bg-green-d-3

.bg-green-d-4

.bg-grey

.bg-grey-s

.bg-grey-d-1

.bg-grey-d-2

.bg-grey-d-3

.bg-grey-d-4

.bg-violet

.bg-violet-s

.bg-violet-d-1

.bg-violet-d-2

.bg-violet-d-3

.bg-violet-d-4

.bg-yellow

.bg-yellow-s

.bg-yellow-d-1

.bg-yellow-d-2

.bg-yellow-d-3

.bg-yellow-d-4

.bg-orange

.bg-orange-s

.bg-orange-d-1

.bg-orange-d-2

.bg-orange-d-3

.bg-orange-d-4

.bg-white

.bg-black

Redes Sociales

La paleta de colores incluye los colores de las redes sosciales más utilizadas y populares del mundo. A continuación se muestran los colores de fondo disponibles para estas redes sociales:

.fd-facebook

.fd-twiter

.fd-instagram

.fd-linkedin

.fd-youtube

.fd-telegram

.fd-snapchat

.fd-pinterest

.fd-soundcloud

.fd-vimeo

.fd-tinder

.fd-tumblr

🎨 Colores

Sass

Advertencia

Paleta

Aplicando Colores de Fondo

Información

Título con fondo rojo

Título con fondo verde

Título con fondo gris oscuro

Alias de Colores

Redes Sociales

Autor