Skip to content

Utilidades

Cactus CSS posee clases útiles, que son añadidos que pueden ir en conjunto con otras clases o que agregan una utilidad extra.

Colores

La siguiente tabla de colores aplica de forma conjunta para las clases br-color,txt-color y color. (Conoce como personalizarlos).

NombreColor en Modo OscuroColor
primary● #98f098● #98f098
secondary● #232529● #cce0cc
accent● #727fa1● #313849
yellow● #f2c94c● #f2c94c
blue● #2495ca● #2495ca
red● #dc3243● #dc3243
green● #45d25a● #45d25a

Colores Especiales

NombreColorNota
outline○ #98f098Agrega un borde y texto con el color primario y un background transparente
whiteW #232529Si se usa la clase white por si sola agrega un color:#000 y un background:#fff
blackB #727fa1Si se usa la clase black por si sola agrega un color:#fff y un background:#000

Clase None

None

Al usar la clase none, desaparecerá el bloque. Util para agregarla desde JS

<div class="none">Adios</div>

Resultado:


Adios

None en Móviles

Puedes usar la clase sm-none para ocultar cosas en dispositivos pequeños.

<p class="sm-none">👻</p>

Resultado:


👻


Picture Image

Cactus CSS proporciona estilo básico para las imágenes.

Establece el estilo predeterminado para las imágenes, incluyendo:

  • max-width: 100%: Asegura que la imagen no se estire más allá del ancho del contenedor
  • height: auto: Permite que la altura de la imagen se ajuste automáticamente al ancho
<img
src="https://images.pexels.com/photos/1022921/pexels-photo-1022921.jpeg"
alt="Imagen de un cactus"
/>

Resultado:


Imagen de un cactus